我一直在基于loader.to api在我的GitHub 網站上開發一個非常簡單的 YouTube 下載器。這是我到目前為止：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p>
<form>
<label for="theurl">Youtube URL:</label><br>
<input type="text" id="theurl" name="theurl"><br>
<input type="submit" value="Ok">
</form>
</p>
<iframe
style="width:800px;height:250px;border:0;overflow:hidden;"
scrolling="no" src="https://loader.to/api/card/?url=https://www.youtube.com/watch?v=dQw4w9WgXcQ">
</iframe>
<p><a href="https://replit.com/@Pufferfishe/YoutubeDownloader">replit code</a></p>
<p><a href="https://youtubedownloader.pufferfishe.repl.co">replit website</a></p>
</body>
</html>
這本質上是一個網頁，它顯示一個帶有提交按鈕的表單框，然后是一個預定義的 loader.to 塊，它只鏈接到一個下載（在這種情況下，永遠不會放棄你）。我怎樣才能讓您在表單框中輸入的 YouTube 網址生成相關的 loader.to 卡？
uj5u.com熱心網友回復：
使用 JavaScript，您可以：
- 監聽表單上的“提交”事件
- 停止表單重繪 頁面
- 從輸入中獲取 YouTube URL
- 使用 YouTube URL 在 iframe 上設定“src”屬性
請參閱下面的作業示例。
// Listen for the "submit" event on the form
document.querySelector('form').addEventListener('submit', event => {
// Stop the form from refreshing the page
event.preventDefault()
// Get the YouTube URL from the input
const youtubeUrl = document.querySelector('[name="theurl"]').value
// Set the "src" attribute on the iframe using the YouTube URL
document.querySelector('iframe').setAttribute('src', 'https://loader.to/api/card/?url=' youtubeUrl)
}) <form>
<label for="theurl">Youtube URL:</label><br>
<input type="text" id="theurl" name="theurl"><br>
<input type="submit" value="Ok">
</form>
<iframe
style="width:800px;height:250px;border:0;overflow:hidden;"
scrolling="no" src="https://loader.to/api/card/?url=https://www.youtube.com/watch?v=dQw4w9WgXcQ">
</iframe>
<p><a href="https://replit.com/@Pufferfishe/YoutubeDownloader">replit code</a></p>
<p><a href="https://youtubedownloader.pufferfishe.repl.co">replit website</a></p>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/389094.html
標籤：javascript html 形式 YouTube
上一篇：引數值作為另一個向量的函式。解開
下一篇：將單選按鈕中的資料插入資料庫