添加一个Javascript按钮来更改iframe的内容 [英] Add a Javascript Button to change content of iframe
问题描述
我正在尝试创建此页面，其中包含一个Iframe，并且我想添加一个按钮以显示iframe中的下一个页面，以及一个用于显示iframe中上一页的按钮。
我总共有4个页面显示在名为1.html 2.html 3.html 4.html的iframe中，我希望按钮能够从1到4工作，然后去回到1等等。
草图是这样的：
_________
| IFRAME |
| |
___________
<<上一页下一页>>
这是一个简单的脚本，用于更改iframe的内容
这是iframe / Button / function。
< iframe id =screen width =609scrolling =noheight =410frameborder =0align =middlename =canalsrc =1.html>< / iframe>
< input type =buttononclick =content2（）class =butonactualvalue =See 2>
< script> function content2（）{document.getElementById（'screen'）。src =2.html; }< / script>
谢谢
使用Jquery
< html>
< head>
< script type =text / javascriptsrc =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'，位置[currentIndex]）;
}）;
}）;
< / script>
< / head>
< body>
< input type =buttonvalue =Previous/>& nbsp;< input type =buttonvalue =Next/>
< br />
< iframe id =framesrc =1.html>< / iframe>
< / body>
< / html>
■更新
< HTML>
< head>
< script type =text / javascriptsrc =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 =buttonvalue =Previous/>& nbsp;< input type =buttonvalue =Next/>
< br />
< iframe id =framesrc =1.html>< / iframe>
< / body>
< / html>
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
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>
这篇关于添加一个Javascript按钮来更改iframe的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
