Add a Javascript Button to change content of iframe

Question

I am trying to create this page where I have a single Iframe and I want to add a button to show a next page in the iframe, and a button to show the previous page in the iframe.

I have a total of 4 pages to show in the iframe named 1.html 2.html 3.html 4.html and I would like the buttons to work going from 1 to 4 and then go back to 1 and so on.

the sketch is something like this:

            _________
           | IFRAME  |
           |         |
           ___________


    <<previous       Next >>

This is a simple script that I made to change the content of the iframe

This is the iframe / Button / function.

<iframe id="screen" width="609" scrolling="no" height="410" frameborder="0" align="middle" name="canal" src="1.html"></iframe>


<input type="button" onclick="content2()" class="butonactual" value="See 2">

<script> function content2() { document.getElementById('screen').src = "2.html"; } </script>

Thanks

shenhengbin · Accepted Answer · 2013-10-06 03:46:05Z

4

Using Jquery

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
  var locations = ["1.html", "2.html", "3.html","4.html"];
  var currentIndex = 0;
  var len = locations.length;
  $(document).ready(function(){
    $(':button').click(function() {
        currentIndex = this.value == "Next" ? 
                currentIndex < len - 1 ? ++currentIndex : len - 1 : 
                currentIndex > 0 ? --currentIndex : 0;
        $('#frame').attr('src', locations[currentIndex]);
    });
  });
</script>
</head>
<body>
<input type = "button" value = "Previous" />&nbsp;<input type = "button" value = "Next" />
<br />
<iframe id="frame" src="1.html"></iframe>
</body>
</html>

■Update

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      var locations = ["1.html", "2.html", "3.html","4.html"];
      var currentIndex = 0;
      var len = locations.length;
      $(document).ready(function(){
        $(':button').click(function() {
            currentIndex = this.value == "Next" ? 
                currentIndex < len - 1 ? ++currentIndex : 0 : 
                currentIndex > 0 ? --currentIndex : len - 1;

            $('#frame').attr('src', locations[currentIndex]);
        });
      });
    </script>
  </head>
  <body>
    <input type = "button" value = "Previous" />&nbsp;<input type = "button" value = "Next" />
    <br />
    <iframe id="frame" src="1.html"></iframe>
  </body>
</html>

edited Oct 6, 2013 at 3:46

answered Oct 6, 2013 at 3:21

shenhengbin

4,2941 gold badge26 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alan Foust Over a year ago

Is there a way to make it go back to the page 1 once you are in the page 4 and you hit next?

shenhengbin Over a year ago

Sure... you can do it as you like.1 sec

Alan Foust Over a year ago

Hello this works perfect but is there a way to give a function to Next and other to Previous? so I could change what the button says?

francisco.preller · Accepted Answer · 2013-10-06 03:15:26Z

1

Not too difficult, just change the src tag of the iframe. Let's assume the below is your html:

<body>
    <!-- Assuming 1.html is the first shown, you can
         initialize it as the first src to be displayed -->
    <iframe id="frame" src="1.html"></iframe>

    <a href="#" id="prev">Previous</a> <a href="#" id="next">Next</a>
</body>

Then you could do it as explained below:

jQuery

var currentView = 1,
    minView     = 1,
    maxView     = 4;

var changeViewNext = function() {
    if (currentView >= minView && currentView < maxView) {
        currentView++;
        $('#frame').prop('src', currentView + '.html');
    }
}

var changeViewPrev = function() {
    if (currentView <= maxView && currentView > minView) {
        currentView--;
        $('#frame').prop('src', currentView + '.html');
    }
}

// Then some click events
$('#prev').click(function(e) {
    e.preventDefault();
    changeViewPrev();
}); 

$('#next').click(function(e) {
    e.preventDefault();
    changeViewNext();
})

Alternatively, just add the markup to your anchor tags to call these functions:

<a href="#" onClick="changeViewPrev()">Previous</a>
<a href="#" onClick="changeViewNext()">Next</a>

UPDATE

If you wanted to use buttons instead of anchor tags, leave the jQuery the same, and just change your anchor tags for buttons, as such

<button id="prev">Previous</button> <button id="next">Next</button>

UPDATE2: Tested code using javascript only, no jQuery

<body>
    <!-- Assuming 1.html is the first shown, you can
         initialize it as the first src to be displayed -->
    <iframe id="frame" src="1.html"></iframe>

    <button onClick="changeViewPrev()">Previous</button>
    <button onClick="changeViewNext()">Next</button>
    <script>
        var currentView = 1,
            minView     = 1,
            maxView     = 4,
            frame       = document.getElementById('frame');

        function changeViewNext() {
            if (currentView >= minView && currentView < maxView) {
                currentView++;
                frame.src = currentView + '.html';
            }
        }

        function changeViewPrev() {
            if (currentView <= maxView && currentView > minView) {
                currentView--;
                frame.src = currentView + '.html';
            }
        }
    </script>
</body>

edited Oct 6, 2013 at 3:15

answered Oct 6, 2013 at 2:28

francisco.preller

6,6494 gold badges30 silver badges39 bronze badges

3 Comments

Alan Foust Over a year ago

Is there a way to call the function with a buttons?

francisco.preller Over a year ago

of course, you can use the click bindings at the bottom of the jQuery I demonstrated, just replace your anchor tags with button tags and keep the ID references. Updated the answer for you.

francisco.preller Over a year ago

Yep, it doesn't work because you're not using jQuery which is what I thought. I gave you jQuery because you had tagged jquery on the tags. Please take a look at Update2 and use that code instead

Conqueror · Accepted Answer · 2013-10-06 02:25:24Z

0

If I understand the question, you have 4 urls and are using a single iframe. If such is the case, use an array to store the urls and a counter (which is an index into the array). When next is pressed, increment the counter and switch the iframe url. Previous decrements the counter and does the same.

answered Oct 6, 2013 at 2:25

Conqueror

4,5438 gold badges37 silver badges42 bronze badges

Collectives™ on Stack Overflow

Add a Javascript Button to change content of iframe

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related