Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
404 views
in Technique[技术] by (71.8m points)

javascript - How to change the iframe src?

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.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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.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 version

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...