Question

我希望提示中的用户输入更改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>

我一直试图这样做3天仍然无法理解。请帮忙。

Answer 1

可以使用JavaScript更改src的{{1}}属性，我认为这是解决问题的最佳方式。

首先，我建议您使用<iframe> <iframe>以便于检索。

例如：id

如果您将用户输入存储在变量<iframe id="youtubePlayer" allowfullscreen></iframe>中，则可以使用以下代码行修改VideoURL

的src

<iframe>

首先我们使用document.getElementById('youtubePlayer').src = "www.youtube-nocookie.com/embed/" + VideoURL;检索元素，然后我们通过为document.getElementById()赋值来修改源代码。

我希望这会有所帮助：）

Answer 2

您必须通过JavaScript变量分配URL的最后一部分，因为在HTML呈现时您不会在页面加载时使用它。最简单的方法是为您的iframe分配一个ID - 例如videoFrame - 然后您就可以执行此操作：

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

Answer 3

您只是在脚本末尾缺少一行设置src

的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>
    <iframe src="www.youtube-nocookie.com/embed/" allowfullscreen></iframe>
    
    <script>
      // By placing the script just before the end of the <body>, all the DOM elements will
      // have loaded by the time the script runs.
      
      // Get user input:
      var videoURL = prompt("type the last part of the YouTube.com video URL here");
      
      if(videoURL != null){
        // Get a reference to the iframe and reset its src property:
        var frame = document.querySelector("iframe");
        frame.src = frame.src + videoURL;
        
        // Output the new URL
        document.getElementById("video").innerHTML= "New src is: " + frame.src;
      } else {
        alert("please reload and type a URL.");
      }
    </script>
  </body>
</html>

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

3 个答案: