iframe父操作子的dom元素失效？
父级：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="js/jquery-1.11.3.js"></script>
<style>
* {padding: 0; margin: 0;}
body,html {width: 100%; height: 100%;}
</style>
</head>
<body>
<iframe id="qq" name="myFrame" src="test2.html" frameborder="0"></iframe>
</body>
<script>
;$(function() {
var x = document.getElementById('qq').contentWindow.document.getElementById('div1');
console.log(x);
});
</script>
</html>
子级：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="js/jquery-1.11.3.js"></script>
<style>
* {padding: 0; margin: 0;}
body,html {width: 100%; height: 100%;}
#div1 {height: 200px; background: red;}
</style>
</head>
<body>
<div id="div1">123</div>
</body>
<script>
$(function() {
})
</script>
</html>请问为什么输出的null？？？
我想操作iframe里面的元素，求解决？
如果换成：
`var x = $(window.frames["myFrame"].document).find("#div1").text();
console.log(x);`
输出的是空值，不知道问题到底出在哪里？？网上教程对不对啊
展开
收起
1
条回答
写回答
写回答
-
您好，很高兴为您解答。 直接赋值如下代码测试： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<div class="line">====================注意:测试从这里开始=========================<p id="pox">用来测试子窗体iframeA访问父窗体的某元素<div class="line">====================iframe分割线=========================<iframe src="a.html" width="100%" frameborder="0" id="frameA" name="frameA"><iframe src="b.html" name="iframeB" width="100%" frameborder="0" id="frameB"><div class="line">====================iframe分割线=========================先来演示:父窗体访问子窗体中的某方法或元素
总结:父窗体访问子窗体的方法跟元素采用不同的方式
<input type="button" onclick="frameDiv()" value="父窗体访问子窗体中的某元素" /><input type="button" onclick="frameFun()" value="父窗体访问子窗体中的某方法" /><script type="text/javascript"> //子窗口访问父窗口方法 function testP(ss){ alert(ss) } //取得iframe的元素 function getIframe(id){ return document.getElementById(id).contentWindow.document; } //父窗口访问子窗口元素 function frameDiv(){ getIframe("frameA").getElementById("ooxx").style.backgroundColor="#f00" //window.frames["iframeA"].getElementById("ooxx").style.backgroundColor="#f00" //不能通过这种形式访问某元素 } //父窗口访问子窗口方法 function frameFun(){ //getIframe("frameB").getsFun();//不能通过这种形式访问子窗体某方法 // window.frames["iframeB"].getsFun(); alert(window.frames["iframeB"].getsFun()); } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <div id="ooxx">用来测试父窗体访问子窗体中的某元素<p id="divooxx">用来测试子窗口B访问窗体A的某元素1.子窗口iframeA访问父窗口的某元素
<input type="button" onclick="frameToPdiv()" value="子窗口访问父窗口的某元素" /><input type="button" onclick="frameToPfun()" value="子窗口访问父窗口的某方法" /><script type="text/javascript"> //子窗口访问父窗口的某元素 function frameToPdiv(){ parent.document.getElementById("pox").style.color="#fff"; parent.document.getElementById("pox").style.backgroundColor="#f0a0f0" } //子窗口访问父窗口方法 function frameToPfun(ss){ parent.testP("ssss"); } //用于测试iframeB访问的方法 function testBA(){ alert("用于测试iframeB访问的方法") } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />二:测试子窗体间相互访问某方法或元素
<input type="button" value="子窗体B访问子窗体A的某元素" onclick="frameTframeDiv()" /><input type="button" value="子窗体B访问子窗体A的某方法" onclick="frameTframeFun()" /><script type="text/javascript"> //子窗体B访问子窗体A的某元素 function frameTframeDiv(){ //parent.document.getElementById("frameA").contentWindow.document.getElementById("divooxx").style.color="#a0c0f0"; //parent.document.getElementById("frameA").contentWindow.document.getElementById("divooxx").style.backgroundColor="#000" var _bframe=parent.getIframe("frameA");//子窗体访问父窗体方法 _bframe.getElementById("divooxx").style.color="#a0c0f0"; _bframe.getElementById("divooxx").style.backgroundColor="#000"; } //子窗体B访问子窗体A的某方法 function frameTframeFun(){ window.parent.frames["frameA"].testBA(); }<script type="text/javascript"> function getsFun(){ return "sssssss"; } //getFun() 答案来源于网络2019-10-15 15:33:49赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
