javascript - 如何使用用户输入更改 iframe 链接的最后一部分?

标签 javascript jquery html url iframe

我希望用户根据提示输入更改 iframe 网址的最后部分。这是到目前为止我的代码:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body{
      background-color:#ffffff
    }
    </style>
  </head>
  <body>
<!-- im attempting to make an iframe display a video the user types into 
the prompt.-->
<p id="Video"></p>

    <script>
      var VideoURL = prompt("type the last part of the YouTube.com video 
URL here");
      if(VideoURL != null){
        document.getElementById("Video").innerHTML= "you typed '' " + 
VideoURL + " '' as your url.";

      } else {
        alert("please reload and type a URL.");
      }
    </script>
<iframe src="www.youtube-nocookie.com/embed/(I WANT THE USERS INPUT 
HERE)" allowfullscreen></iframe>
  </body>
</html>

我已经尝试这样做三天了,但仍然无法弄清楚。请帮忙。

最佳答案

可以更改 src <iframe> 的属性使用 JavaScript,我认为这是解决您的问题的最佳方法。

首先,我建议您给 <iframe>一个id以便于检索。

例如:<iframe id="youtubePlayer" allowfullscreen></iframe>

如果您将用户输入存储在变量 VideoURL 中,可以使用下面这行代码来修改src <iframe>

document.getElementById('youtubePlayer').src = "www.youtube-nocookie.com/embed/" + VideoURL;

首先,我们使用 document.getElementById() 检索元素,然后我们通过将值分配给 .src 来修改源.

我希望这有帮助:)

关于javascript - 如何使用用户输入更改 iframe 链接的最后一部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43325718/

相关文章:

javascript - 我怎样才能禁止点击表格的 td?

javascript - 在 Qualtrics 中,如何阻止背景悬停颜色从描述区域渗入元素区域?

javascript - 使用其他下拉列表选项禁用下拉列表选项

javascript - 如何使用 PHP 获取星级小部件的值?

php - 如何在 Joomla 中完成的网站中添加背景音乐?

javascript - Angular 服务注入(inject)

javascript - 如何在 JavaScript 中将字符串中的 7 格式化为 '07'?

jquery将html转换为字符串并转换为html

php - 强制浏览器缓存 PHP 生成的 JavaScript

html - 需要帮助对齐文本