Menu
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
984
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" /> <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" /> <input type = "button" value = "Next" />
<br />
<iframe id="frame" src="1.html"></iframe>
</body>
</html>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
