javascript - 将 Javascript 变量传递到 HTML 代码中以用作参数

Question

我对 javascript 还很陌生。我正在尝试创建一个页面，该页面在文本区域中获取 youtube 视频的 url，并将其传递到视频播放器对象，然后由该对象播放视频。

这是我当前拥有的代码(文本区域、youtube 视频播放器 (iframe) 和 javascript。

    <textarea id = "link" rows = "1" cols = "40" class = center>
        Insert link here
    </textarea>
    <input type="button" value="submit" onclick="getLink()">

    <div id="output">
        <iframe width="420" height="315" src=output>
        </iframe>
    </div>

    <script language="javascript" type="text/javascript">

        function getLink() {
            var url = document.getElementById("link").value;
            console.log(url);
            output.innerHTML = url;
        }

    <script>

点击提交按钮后，播放器消失，文本出现在页面上，而不是更改 YouTube 播放器中的 URL 并播放链接的视频。这里出了什么问题？

Answer 1

您尝试将 iFrame 的 .src 属性更改为 output - YouTube 视频的网址。这不是正确的方法。为了能够做到这一点，您需要首先为您的 iFrame 元素提供一个唯一的 id，例如myIframe

现在我们可以使用设置/获取它的.src

document.getElementById("myIframe").src

因此，对于您发布的示例:

   function getLink() {
            document.getElementById("myIframe").src = document.getElementById("link").value;
            }

  <textarea id = "link" rows = "1" cols = "40" class = center>https://www.youtube.com/embed/D2NAzmwNTH0
    </textarea>
    <input type="button" value="submit" onclick="getLink()">

    <div id="output">
        <iframe id="myIframe" width="420" height="315" >
        </iframe>
    </div>