Question

171

How to change the iframe src?

rated 0 times [ 175] [ 4] / answers: 1 / hits: 39623 / 13 Years ago, mon, january 9, 2012, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zoey

Add To Favorites

Follow

Total Points: 120

Total Questions: 103

Total Answers: 105

Location: Marshall Islands

Member since Mon, May 31, 2021

3 Years ago

answered 13 Years ago daquanmilesw · Accepted Answer

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>