在 API link 中使用 "form" in HTML 的输出

Question

我一直在 GitHub website based off of the loader.to api 上开发一个非常简单的 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 块，该块仅链接到一个下载（在这种情况下，Never Gonna Give You Up）。我怎样才能让您在表单框中输入的 YouTube url 生成相关的 loader.to 卡片？

Answer 1

使用JavaScript您可以：

监听表单上的“提交”事件
停止表单刷新页面
从输入中获取 YouTube URL
使用 YouTube 在 iframe 上设置“src”属性 URL

请参阅下面的工作示例。

// 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>

在 API link 中使用 "form" in HTML 的输出

Use output from "form" in HTML in an API link

html

javascript

forms

youtube