Question

我尝试执行一个javascript函数，该函数会更改每个iframe的源代码。如果iframe不在任何其他标签内，则可以使用。

<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button onclick="myFunction()">Search</button>
<iframe src="https://www.espn.com"  frameborder="1"  width="500" height="320"></iframe>
<iframe src="https://www.nbc.com"  frameborder="1"  width="500" height="320"></iframe>
<iframe src="https://www.cnn.com"  frameborder="1" width="500" height="320"></iframe>
 <script type = "text/javascript">
  function myFunction(){
  alert("Hello!");
  var frames = window.frames;
  for (var i = 0; i < frames.length; i++){
    frames[i].location = "http://www.w3schools.com";
    }  
}
</script>
</body>
</html>

如果我将iframe放在div标签中，javascript因某些原因无法访问它们。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
 <div class="container-fluid">
    <form align = "center">
      <br>
      <button onclick="myFunction()">Search</button>
      <br>
    </form>
<div class="col-xs-8 col-lg-6">
    <h3 id = "ESPN">ESPN</h3>
       <iframe src="https://www.espn.com"  frameborder="1"  width="500" height="320"></iframe>
      <br>
    </div>
    <div class="col-xs-8 col-lg-6">
    <h3 id = "NBC">NBC</h3>
      <iframe src="https://www.nbc.com"  frameborder="1"  width="500" height="320"></iframe>
      <br>
    </div>
    <div class="col-xs-8 col-lg-6">
    <h3 id = "CNN">CNN</h3>
      <iframe src="https://www.cnn.com"  frameborder="1" width="500" height="320"></iframe>
      <br>
</div>
</div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script type = "text/javascript">
  function myFunction(){
  alert("Hello!");
  var frames = window.frames;
  for (var i = 0; i < frames.length; i++){
    frames[i].location = "http://www.w3schools.com";
    }  
}
</script>
</body>
</html>

为了让我的函数能够读取iframe，我还需要做些什么吗？

Answer 1

请尝试运行此

＆＃13;

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
 <div class="container-fluid">
    <form align = "center" action="javascript:void(0);">
      <br>
      <button onclick="myFunction()">Search</button>
      <br>
    </form>
<div class="col-xs-8 col-lg-6">
    <h3 id = "ESPN">ESPN</h3>
       <iframe src="https://www.espn.com"  frameborder="1"  width="500" height="320"></iframe>
      <br>
    </div>
    <div class="col-xs-8 col-lg-6">
    <h3 id = "NBC">NBC</h3>
      <iframe src="https://www.nbc.com"  frameborder="1"  width="500" height="320"></iframe>
      <br>
    </div>
    <div class="col-xs-8 col-lg-6">
    <h3 id = "CNN">CNN</h3>
      <iframe src="https://www.cnn.com"  frameborder="1" width="500" height="320"></iframe>
      <br>
</div>
</div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script type = "text/javascript">
  function myFunction(){
  var frames = window.frames;
  for (var i = 0; i < frames.length; i++){
    frames[i].location = "http://www.w3schools.com";
    }  
}
</script>
</body>
</html>

＆＃13;

Answer 2

问题不在于你的iframe在div中，而是你的按钮在一个表单中。按下按钮提交表单（执行JavaScript函数后），当表单操作为空时，返回原始页面。因此，即使您的JavaScript工作并且iframe的新位置已加载，您也永远无法看到它们，因为浏览器会重新加载整个页面，并返回原始iframe源的原始页面。

作为第一个修复尝试onclick处理程序中的return false;

之类的东西

 <button onclick="return myFunction()">Search</button>

和

<script type = "text/javascript">
  function myFunction(){
    var frames = window.frames;
    alert("Hello!");
    for (var i = 0; i < frames.length; i++){
      frames[i].location = "http://www.w3schools.com/404";
    }
    return false;
  }
</script>

由于您已经加载了jQuery，您可能希望通过执行类似

之类的操作来防止表单提交（以及内联onclick处理程序）

<script type = "text/javascript">
    $(function() {
      $("#search").click(function(e) {
        e.preventDefault(); // this uses the event object to prevent form submit
        var frames = window.frames;
        for (var i = 0; i < frames.length; i++){
          frames[i].location = "http://www.w3schools.com/404";
        }
      });
   });
</script>

然后用

替换按钮

<button id="search">Search</button>

更改div标签内的iframe源，javascript函数无法正常执行

2 个答案: