开发者社区> 问答> 正文

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);`
输出的是空值,不知道问题到底出在哪里??网上教程对不对啊

展开
收起
小旋风柴进 2016-06-01 09:42:16 2798 0
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
    赞同 展开评论 打赏
问答分类:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载