Question

我试图在“运行时”简单地更改iframe src，但它对我没用。

我的尝试：

<html>
<script>
   document.getElementById("test")..contentWindow.document.location.href = "www.google.com";
</script>
<body>

<iframe id="test" src="https://www.w3schools.com">
</iframe>

</body>
</html>

但它不是改变来源，这是什么原因？

谢谢！

Answer 1

首先，如果使用普通JS，您需要稍后运行该脚本，因为它会过早命中（在DOM就绪状态之前）。

其次，您只需设置.src = url。

您甚至可以将jQuery方法$(document).ready()与其选择器结合使用。

<html>
<body>

<iframe id="test" src="https://www.w3schools.com">
</iframe>
</body>
<script>
   document.getElementById("test").src = "http://www.bing.com";
</script>
</html>

jQuery版本：

<html>
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script>
   $(document).ready(function() {
       $('#test').attr('src','http://www.bing.com');
   });
</script>
<body>

<iframe id="test" src="https://www.w3schools.com">
</iframe>
</body>
</html>

Answer 2

问题是你的脚本标记在DOM加载之前被执行了;您的document.getElementById("test")代码不会返回任何内容。您可以使用<body onload="myfunction()">并在其中编写所需的代码，以便在加载DOM后执行它，或者您可以在jQuery apporach下面尝试：

$(document).ready(function(){
  
  
  $("#test").attr("src","http://stackoverflow.com/questions/42504395/change-to-change-iframe-source-dynamically");
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<iframe id="test" src="https://www.w3schools.com">
</iframe>

Answer 3

试试这个;

 document.getElementById("test").setAttribute("src",Path);

Answer 4

document.getElementById("test").setAttribute("src","www.google.com");

$(#test).attr('src','www.google.com');

更改为动态更改iframe源

4 个答案: