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
3 answers
solution1
2 ACCPTED 2013-10-06 03:21:40
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>
solution2
1 2013-10-06 02:28:44
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>
solution3
0 2013-10-06 02:25:24
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.