如何更改 iframe src？答案

【问题标题】：How to change the iframe src?如何更改 iframe src？
【发布时间】：2012-01-09 08:49:31
【问题描述】：

所以在我的页面上，我使用 iframe 在其中显示另一个网页。我想设置一个包含许多网页的数组（如我所愿），并且我想制作 2 个按钮，因此每次单击“下一步”按钮时，它都会更改我拥有的 iframe 标记内的页面。我的问题是如何设置 2 个按钮（下一个和上一个），所以当我单击它们时，我会相应地更改为 Array setup ？

<html xmlns="w3.org/1999/xhtml">
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
  </head> 

  var webpageArray = new Array()
  webpageArray[0]= "web0.com/"; 
  webpageArray[1]= "web1.com/"; 
  webpageArray[2]= "web2.com/"; 

  <iframe id="myframe" src="web1.com"></iframe> 

  loadNextPage = function() { 
    var iframe = document.getElementById("myframe"); 
    var src = webpageArray[1]; 
    iframe.src = src; 
    return; 
  } 
  <body>  
    <a href="" onclick="LoadNextPage"> Next Web Page >> </a> 
  </body> 
  </html>

【问题讨论】：

所以你还没有做任何事情？
如果您向我们展示您的代码，我们可以帮助修复它 - 请不要让我们从头开始编写所有内容，这需要我们付出更多的努力，而您将一无所获。花一点时间自己，你应该享受编写javascript，而不是避免它！当你有一个严肃或具体的问题时回来，或者edit这个问题变得不那么模糊了。
您的 html/脚本无效。您需要将脚本包装在脚本标签中，并在正文标签中包含 iframe 和链接

标签： javascript iframe

【解决方案1】：

这可行 - 使用 PLAIN javascript，是的，一个内联处理程序 - 它应该附加在 onload 中，但我们一次只做一件事

DEMO HERE

<html>
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
    <script>
      var cnt=0,webpageArray = [
        "http://cnn.com/",
        "http://msn.com/", 
        "http://yahoo.com/"
      ]; 

      function loadNextPage(dir) {   
        cnt+=dir;
        if (cnt<0) cnt=webpageArray.length-1; // wrap
        else if (cnt>= webpageArray.length) cnt=0; // wrap
        var iframe = document.getElementById("myframe"); 
        iframe.src = webpageArray[cnt]; 
        return false; // mandatory!
      } 
    </script>
  </head> 

  <body>  
  <iframe id="myframe" src="http://cnn.com/"></iframe> 

  <a href="#" onclick="return loadNextPage(-1)"> << Previus Web Page </a> | 
  <a href="#" onclick="return loadNextPage(1)"> Next Web Page >> </a> 
  </body> 
  </html>

jQuery 版本

DEMO HERE

var cnt=0,webpageArray = [
  "http://cnn.com/",
  "http://msn.com/", 
  "http://yahoo.com/"
]; 

$(document).ready(function() {
  $("#prev, #next").click(function(e) {
    cnt+=this.id=="next"?1:-1;
    if (cnt<0) cnt=webpageArray.length-1; // wrap
    else if (cnt>= webpageArray.length) cnt=0; // wrap
    $("#myframe").attr("src", webpageArray[cnt]);
    return false;
  });
});    

<iframe id="myframe" src="http://cnn.com"></iframe> <br />
<a href="#" id="prev"> << Previous Web Page </a> | 
<a href="#" id="next"> Next Web Page >> </a>

【讨论】：

更新纯版本也有以前的链接

【解决方案2】：

垃圾方式

<html>
<head>
<script type="text/javascript">
flag = 0;
SrcList = new Array("http://www.google.com", "http://www.27nov.fr", "http://www.perdu.com");
function NextSrc(){
    if(flag < SrcList.length - 1){
    flag++;
    ChangeSrc(SrcList[flag]);
    }
    return false;
}
function PrevSrc(){
    if(flag > 0){
    flag--;
    ChangeSrc(SrcList[flag]);
    }
    return false;

}
function ChangeSrc(src){
    var iframe = document.getElementById('Myiframe');
    iframe.setAttribute('src',src);
}
</script>
</head>
<body>
<p><a href="#" onclick="PrevSrc()">Prev</a> - <a href="#" onclick="NextSrc()">Next</a></p>
<iframe id="Myiframe" src="http://www.w3schools.com" width="640" height="480">
</iframe>
</body>
</html>

【讨论】：

请在 onclick 处理程序上返回 false！为什么要更改源onload？为什么称索引为标志？它不是一面旗帜。没有名为 MaxLenght 的变量，如果有，拼写为 maxLength 或仅使用数组的长度另外请阅读w3fools.com
当我到达最后一页时，如何让它旋转回来？（请编辑您自己的代码）

【解决方案3】：

<iframe id="myframe" src="some web page"></iframe>

loadNextPage = function() {
    var iframe = document.getElementById("myframe");
    var src = webpageArray[2];
    iframe.src = src;
    return;
}

但我不推荐这个过程。

【讨论】：

计数器和IDX的变化和方向的编码在哪里？
柜台不是我看出来的。问这个问题的人已经实现了代码。好吗？
在过去的几天里，我试图完成这项工作，但它对我不起作用:(我看了很多教程，我真的想了解更多。无论如何，这就是我所拥有的远在你的帮助下，但它根本不起作用（我知道我很想念）
w3.org/1999/xhtml"> 无标题文档 var pagesArray = new Array() pagesArray[0]= "web0.com" pagesArray[1]= "web1.com" pagesArray[2]= "web2.com" loadNextPage = function() { var iframe = document.getElementById("myframe"); var src = 网页数组[1]; iframe.src = src;返回; } 下一个网页 >>
我在问题中添加了这个 - 但它没有任何意义。你需要脚本标签之类的