admin管理员组

文章数量:1291334

So on my page I am using Iframe to display another webpage inside it. I want to set up an Array with many webpage (as much as I want) and I want to make 2 buttons so every time I click the Next button it will change the page inside the iframe tag that I have. My question is how can I setup the 2 buttons (Next and previous) so when I click them I will change accordingly to Array set up ?

<html xmlns="w3/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/"; 
  webpageArray[1]= "web1/"; 
  webpageArray[2]= "web2/"; 

  <iframe id="myframe" src="web1"></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>

So on my page I am using Iframe to display another webpage inside it. I want to set up an Array with many webpage (as much as I want) and I want to make 2 buttons so every time I click the Next button it will change the page inside the iframe tag that I have. My question is how can I setup the 2 buttons (Next and previous) so when I click them I will change accordingly to Array set up ?

<html xmlns="w3/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./"; 
  webpageArray[1]= "web1./"; 
  webpageArray[2]= "web2./"; 

  <iframe id="myframe" src="web1."></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
  • iframe
Share Improve this question edited Jan 9, 2012 at 9:29 mplungjan 178k28 gold badges181 silver badges240 bronze badges asked Jan 9, 2012 at 8:49 MaansahirMaansahir 291 gold badge4 silver badges8 bronze badges 3
  • 1 So you haven't done anything yet? – Jan Hančič Commented Jan 9, 2012 at 8:51
  • 2 If you show us your code, we can help fix it - please don't make us write everything from scratch, it takes much more effort on our part and you will learn nothing that way. Spend a little time on this yourself, you should enjoy writing javascript, not avoid it! Come back when you have a serious or specific question or edit this one into something less vague. – No Results Found Commented Jan 9, 2012 at 8:56
  • Your html/script is invalid. You need to wrap the script in script tags and have the iframe and link inside the body tags – mplungjan Commented Jan 9, 2012 at 9:30
Add a ment  | 

3 Answers 3

Reset to default 6

This works - using PLAIN javascript and yes, an inline handler - it should be attached in onload, but let's take it one thing at a time

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./",
        "http://msn./", 
        "http://yahoo./"
      ]; 

      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./"></iframe> 

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

jQuery version

DEMO HERE

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

$(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."></iframe> <br />
<a href="#" id="prev"> << Previous Web Page </a> | 
<a href="#" id="next"> Next Web Page >> </a>

Junk way

<html>
<head>
<script type="text/javascript">
flag = 0;
SrcList = new Array("http://www.google.", "http://www.27nov.fr", "http://www.perdu.");
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." width="640" height="480">
</iframe>
</body>
</html>

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

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

But I donot remend this process.

本文标签： javascriptHow to change the iframe srcStack Overflow

版权声明：本文标题：javascript - How to change the iframe src? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741527395a2383550.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。