87,910
社区成员
发帖
与我相关
我的任务
分享菜鸟求解关于iframe中运用contentWindow的问题！！！
//html的代码：
<!DOCTYPE html>
<html>
<head>
<title>iframe 2</title>
<script src="script03.js"></script>
<link rel="stylesheet" href="script01.css">
</head>
<body>
<iframe src="iframe01.html" id="icontent" name="icontent"></iframe>
<h1>Main Content Area</h1>
<h2>
<a href="page1.html">Link 1</a><br>
<a href="page2.html">Link 2</a><br>
<a href="page3.html">Link 3</a>
</h2>
</body>
</html>
//JS的代码：
window.onload = initLinks;
function initLinks() {
for (var i=0; i<document.links.length; i++) {
document.links[i].onclick = setContent;
}
}
function setContent() {
document.getElementById("icontent").contentWindow.document.location.href = this.href;
return false;
}
运行初步的代码效果图应该是：
代码呈现的效果应该是点击一个链接 就在iframe中显示链接的网页 比如点击Link1 就在iframe里面显示page1
可是我现在实验出来是点击链接 直接跳转到链接的新网页，而不在iframe中显示
我怀疑是contentWindow的兼容性问题，当然也有可能是我的代码出了问题，求大神赐教。本菜鸟用的浏览器是360极速浏览器。。。
<!DOCTYPE html>
<html>
<head>
<title>iframe 2</title>
<script src="script03.js"></script>
<link rel="stylesheet" href="script01.css">
</head>
<body>
<iframe src="iframe01.html" id="icontent" name="icontent"></iframe>
<h1>Main Content Area</h1>
<h2>
<a href="page1.html">Link 1</a><br>
<a href="page2.html">Link 2</a><br>
<a href="page3.html">Link 3</a>
</h2>
</body>
</html>
//JS的代码：
window.onload = initLinks;
function initLinks() {
for (var i=0; i<document.links.length; i++) {
document.links[i].onclick = setContent;
}
}
function setContent() {
document.getElementById("icontent").contentWindow.document.location.href = this.href;
return false;
}
运行初步的代码效果图应该是：
代码呈现的效果应该是点击一个链接 就在iframe中显示链接的网页 比如点击Link1 就在iframe里面显示page1
可是我现在实验出来是点击链接 直接跳转到链接的新网页，而不在iframe中显示
我怀疑是contentWindow的兼容性问题，当然也有可能是我的代码出了问题，求大神赐教。本菜鸟用的浏览器是360极速浏览器。。。
...全文
请发表友善的回复…
发表回复
sublimeMan 2018-01-14
- 打赏
- 举报
这个题主也是看了兔子js的书吧，我也看到这里测试怎么都不行。用的谷歌浏览器。看了9楼的回答茅塞顿开。用firefox或者编辑器用HBuider内部的谷歌按钮打开（好像hb编辑器会模拟服务器打开的效果）就行了。
天际的海浪 2016-06-04
- 打赏
- 举报
这不是跳转到新的一个网页中，是重写框架内当前页面body标签中的内容。
如果是要增加内容。用
document.getElementById("I content").contentWindow.document.body.innerHTML+=newText;
[/quote]
大神，按照你的方法还是不行，源代码是这样的：
window.onload = initLinks;
function initLinks() {
for (var i=0; i<document.links.length; i++) {
document.links[i].onclick = writeContent;
document.links[i].thisPage = i+1;
}
}
function writeContent() {
var newText = "<h1>You are now looking at example " + this.thisPage + ".<\/h1>";
document.getElementById("icontent").contentWindow.document.body.innerHTML = newText;
return false;
}
当点击HTML的链接时，就会将newText文本写入iframe中，可是现在的问题是点击链接以后，网页直接跳转到链接的新网页，而不会将文本写入iframe里面，麻烦大神再解答一下~~~菜鸟学起来比较捉急
[/quote]
链接的地址都设置为href="javascript:void(0)"
[/quote]
链接的地址都设置为href="javascript:void(0)"
Go 旅城通票 2016-06-04
- 打赏
- 举报
没有发布网站不要使用webikit核心浏览器访问，不允许操作iframe，要用firefox，ie之类的测试
dearestayuS 2016-06-04
- 打赏
- 举报
这不是跳转到新的一个网页中，是重写框架内当前页面body标签中的内容。
如果是要增加内容。用
document.getElementById("I content").contentWindow.document.body.innerHTML+=newText;
[/quote]
大神，按照你的方法还是不行，源代码是这样的：
window.onload = initLinks;
function initLinks() {
for (var i=0; i<document.links.length; i++) {
document.links[i].onclick = writeContent;
document.links[i].thisPage = i+1;
}
}
function writeContent() {
var newText = "<h1>You are now looking at example " + this.thisPage + ".<\/h1>";
document.getElementById("icontent").contentWindow.document.body.innerHTML = newText;
return false;
}
当点击HTML的链接时，就会将newText文本写入iframe中，可是现在的问题是点击链接以后，网页直接跳转到链接的新网页，而不会将文本写入iframe里面，麻烦大神再解答一下~~~菜鸟学起来比较捉急
dearestayuS 2016-06-02
- 打赏
- 举报
还想再问一下大神们，另一种代码：
document.getElementById("I content").contentWindow.document.body.innerHTML=newText;
其中newText是一个文本，这句代码是想把文本插入到iframe中，可是和前面问题一样，会跳转到新的一个网页中，求大神解答一下(T ^ T)
document.getElementById("I content").contentWindow.document.body.innerHTML=newText;
其中newText是一个文本，这句代码是想把文本插入到iframe中，可是和前面问题一样，会跳转到新的一个网页中，求大神解答一下(T ^ T)
dearestayuS 2016-06-02
- 打赏
- 举报
谢谢3楼大神，用你的修改方式也是可行的，想问问为什么要去掉document呢？求大神解答～
天际的海浪 2016-06-02
- 打赏
- 举报
这不是跳转到新的一个网页中，是重写框架内当前页面body标签中的内容。
如果是要增加内容。用
document.getElementById("I content").contentWindow.document.body.innerHTML+=newText;
天际的海浪 2016-06-02
- 打赏
- 举报
这是
window.location.href 和 document.location.href 的区别。
在某些浏览器中window.location 可写，document.location只读
天际的海浪 2016-06-01
- 打赏
- 举报
document.getElementById("icontent").contentWindow.location.href = this.href
dearestayuS 2016-06-01
- 打赏
- 举报
按照楼上大神的修改，我的实验已经成功了。所以应该是contentWindow的问题对吗？大神能解释一下为什么contentWindow这句代码不能实现呢？万分感激！！！！！！
functionsub 2016-06-01
- 打赏
- 举报
document.getElementById("icontent").src = this.href;
