我正在尝试创建这个页面，其中我有一个 iframe，我想添加一个按钮来显示 iframe 中的下一页，以及一个按钮来显示 iframe 中的上一页。
我总共有 4 个页面要显示在名为 1.html 2.html 3.html 4.html 的 iframe 中，我希望按钮从 1 到 4 工作，然后返回到 1，依此类推.
草图是这样的:
_________
| IFRAME |
| |
___________
<<previous Next >>
这是我用来更改 iframe 内容的简单脚本
这是 iframe/按钮/功能。
<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>
谢谢
最佳答案
使用 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>
■更新
<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>
关于javascript - 添加一个 Javascript 按钮来更改 iframe 的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19204737/