Javascript 如何更改 iframe src？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8785779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the iframe src?
提问by Maansahir
So on my page I am using Iframe to display another webpage inside it. I want to set up an Array with many webpage (as much as I want) and I want to make 2 buttons so every time I click the Next button it will change the page inside the iframe tag that I have. My question is how can I setup the 2 buttons (Next and previous) so when I click them I will change accordingly to Array set up ?
所以在我的页面上，我使用 Iframe 在其中显示另一个网页。我想设置一个包含许多网页的数组（我想设置多少），并且我想制作 2 个按钮，因此每次单击“下一步”按钮时，它都会更改我拥有的 iframe 标记内的页面。我的问题是如何设置 2 个按钮（下一个和上一个），因此当我单击它们时，我会相应地更改为 Array setup ？
<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>
回答by mplungjan
This works - using PLAIN javascript and yes, an inline handler - it should be attached in onload, but let's take it one thing at a time
这有效 - 使用 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>
jQuery version
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>
回答by 27nov
Junk way
垃圾方式
<html>
<head>
<script type="text/javascript">
flag = 0;
SrcList = new Array("http://www.google.com", "http://www.27nov.fr", "http://www.perdu.com");
function NextSrc(){
if(flag < SrcList.length - 1){
flag++;
ChangeSrc(SrcList[flag]);
}
return false;
}
function PrevSrc(){
if(flag > 0){
flag--;
ChangeSrc(SrcList[flag]);
}
return false;
}
function ChangeSrc(src){
var iframe = document.getElementById('Myiframe');
iframe.setAttribute('src',src);
}
</script>
</head>
<body>
<p><a href="#" onclick="PrevSrc()">Prev</a> - <a href="#" onclick="NextSrc()">Next</a></p>
<iframe id="Myiframe" src="http://www.w3schools.com" width="640" height="480">
</iframe>
</body>
</html>
回答by Acn
<iframe id="myframe" src="some web page"></iframe>
loadNextPage = function() {
var iframe = document.getElementById("myframe");
var src = webpageArray[2];
iframe.src = src;
return;
}
But I donot recommend this process.
但我不推荐这个过程。
