Maa*_*hir -3 javascript iframe
所以在我的页面上,我使用Iframe在其中显示另一个网页.我想设置一个包含许多网页的数组(我想要的多少),我想制作2个按钮,所以每次点击"下一步"按钮,它都会改变我所拥有的iframe标签内的页面.我的问题是我如何设置2个按钮(下一个和上一个),所以当我点击它们时,我会相应地改变数组设置?
<html xmlns="w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
var webpageArray = new Array()
webpageArray[0]= "web0.com/";
webpageArray[1]= "web1.com/";
webpageArray[2]= "web2.com/";
<iframe id="myframe" src="web1.com"></iframe>
loadNextPage = function() {
var iframe = document.getElementById("myframe");
var src = webpageArray[1];
iframe.src = src;
return;
}
<body>
<a href="" onclick="LoadNextPage"> Next Web Page >> </a>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
这有效 - 使用PLAIN javascript和是内联处理程序 - 它应该附加在onload中,但让我们一次只做一件事
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var cnt=0,webpageArray = [
"http://cnn.com/",
"http://msn.com/",
"http://yahoo.com/"
];
function loadNextPage(dir) {
cnt+=dir;
if (cnt<0) cnt=webpageArray.length-1; // wrap
else if (cnt>= webpageArray.length) cnt=0; // wrap
var iframe = document.getElementById("myframe");
iframe.src = webpageArray[cnt];
return false; // mandatory!
}
</script>
</head>
<body>
<iframe id="myframe" src="http://cnn.com/"></iframe>
<a href="#" onclick="return loadNextPage(-1)"> << Previus Web Page </a> |
<a href="#" onclick="return loadNextPage(1)"> Next Web Page >> </a>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
jQuery版本
var cnt=0,webpageArray = [
"http://cnn.com/",
"http://msn.com/",
"http://yahoo.com/"
];
$(document).ready(function() {
$("#prev, #next").click(function(e) {
cnt+=this.id=="next"?1:-1;
if (cnt<0) cnt=webpageArray.length-1; // wrap
else if (cnt>= webpageArray.length) cnt=0; // wrap
$("#myframe").attr("src", webpageArray[cnt]);
return false;
});
});
<iframe id="myframe" src="http://cnn.com"></iframe> <br />
<a href="#" id="prev"> << Previous Web Page </a> |
<a href="#" id="next"> Next Web Page >> </a>
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
37765 次 |
最近记录: |