我尝试执行一个javascript函数,该函数会更改每个iframe的源代码。如果iframe不在任何其他标签内,则可以使用。
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button onclick="myFunction()">Search</button>
<iframe src="https://www.espn.com" frameborder="1" width="500" height="320"></iframe>
<iframe src="https://www.nbc.com" frameborder="1" width="500" height="320"></iframe>
<iframe src="https://www.cnn.com" frameborder="1" width="500" height="320"></iframe>
<script type = "text/javascript">
function myFunction(){
alert("Hello!");
var frames = window.frames;
for (var i = 0; i < frames.length; i++){
frames[i].location = "http://www.w3schools.com";
}
}
</script>
</body>
</html>
如果我将iframe放在div标签中,javascript因某些原因无法访问它们。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<form align = "center">
<br>
<button onclick="myFunction()">Search</button>
<br>
</form>
<div class="col-xs-8 col-lg-6">
<h3 id = "ESPN">ESPN</h3>
<iframe src="https://www.espn.com" frameborder="1" width="500" height="320"></iframe>
<br>
</div>
<div class="col-xs-8 col-lg-6">
<h3 id = "NBC">NBC</h3>
<iframe src="https://www.nbc.com" frameborder="1" width="500" height="320"></iframe>
<br>
</div>
<div class="col-xs-8 col-lg-6">
<h3 id = "CNN">CNN</h3>
<iframe src="https://www.cnn.com" frameborder="1" width="500" height="320"></iframe>
<br>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type = "text/javascript">
function myFunction(){
alert("Hello!");
var frames = window.frames;
for (var i = 0; i < frames.length; i++){
frames[i].location = "http://www.w3schools.com";
}
}
</script>
</body>
</html>
为了让我的函数能够读取iframe,我还需要做些什么吗?
答案 0 :(得分:0)
请尝试运行此
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<form align = "center" action="javascript:void(0);">
<br>
<button onclick="myFunction()">Search</button>
<br>
</form>
<div class="col-xs-8 col-lg-6">
<h3 id = "ESPN">ESPN</h3>
<iframe src="https://www.espn.com" frameborder="1" width="500" height="320"></iframe>
<br>
</div>
<div class="col-xs-8 col-lg-6">
<h3 id = "NBC">NBC</h3>
<iframe src="https://www.nbc.com" frameborder="1" width="500" height="320"></iframe>
<br>
</div>
<div class="col-xs-8 col-lg-6">
<h3 id = "CNN">CNN</h3>
<iframe src="https://www.cnn.com" frameborder="1" width="500" height="320"></iframe>
<br>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type = "text/javascript">
function myFunction(){
var frames = window.frames;
for (var i = 0; i < frames.length; i++){
frames[i].location = "http://www.w3schools.com";
}
}
</script>
</body>
</html>
&#13;
答案 1 :(得分:0)
问题不在于你的iframe在div中,而是你的按钮在一个表单中。 按下按钮提交表单(执行JavaScript函数后),当表单操作为空时,返回原始页面。因此,即使您的JavaScript工作并且iframe的新位置已加载,您也永远无法看到它们,因为浏览器会重新加载整个页面,并返回原始iframe源的原始页面。
作为第一个修复尝试onclick处理程序中的return false
;
<button onclick="return myFunction()">Search</button>
和
<script type = "text/javascript">
function myFunction(){
var frames = window.frames;
alert("Hello!");
for (var i = 0; i < frames.length; i++){
frames[i].location = "http://www.w3schools.com/404";
}
return false;
}
</script>
由于您已经加载了jQuery,您可能希望通过执行类似
之类的操作来防止表单提交(以及内联onclick
处理程序)
<script type = "text/javascript">
$(function() {
$("#search").click(function(e) {
e.preventDefault(); // this uses the event object to prevent form submit
var frames = window.frames;
for (var i = 0; i < frames.length; i++){
frames[i].location = "http://www.w3schools.com/404";
}
});
});
</script>
然后用
替换按钮<button id="search">Search</button>