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

【问题标题】：Passing a Javascript variable into HTML code to be used as a parameter将 Javascript 变量传递到 HTML 代码中以用作参数
【发布时间】：2019-06-04 07:21:02
【问题描述】：

我对这里的 javascript 很陌生。我正在尝试制作一个页面，该页面在 textarea 中获取 youtube 视频的 url，并将其传递给视频播放器对象，然后播放视频。

这是我目前拥有的代码（textarea、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 并播放链接的视频。这里出了什么问题？

【问题讨论】：

你做document.getElementById("link")，然后尝试使用output.innerHTML 来触摸一个id为output的div。在这种情况下，您也需要从文档中获取元素。此外，您实际上想要获取 iframe 并设置 src，而不是设置 div 的内容。

标签： javascript html

【解决方案1】：

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

现在我们可以设置/获取它的 .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>

【讨论】：

【解决方案2】：

我建议您了解 javascript 的基础知识并在 html 中使用 js。给定的代码中有很多错误，但是每个人都必须从某个地方开始。反正这里是代码

<input type="text" id="link" placeholder="Insert link here">
<button onclick="getLink()">Submit</button>

<div id="output">
  <iframe width="420" height="315" id="video"></iframe>
</div>
<script>
function getLink() {
  var url = document.getElementById("link");
  var tag = youtube_parser(url.value);
  // You pass the src by this in js. In order to access youtube video in iframe, you have to use "https://www.youtube.com/embed/<videotag>" in src
  document.getElementById("video").src = "https://www.youtube.com/embed/"+tag;
  // This is totally optional but once the button is clicked then the input field is cleared
  url.value = '';
}

function youtube_parser(url){
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    var match = url.match(regExp);
    return (match&&match[7].length==11)? match[7] : false;
}
</script>

youtube 解析器函数取自here

【讨论】：