2 u011500781 u011500781 于 2016.01.25 20:55 提问

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

6个回答

devmiao
devmiao   Ds   Rxr 2016.01.25 21:02
u011500781
u011500781 我解决了,少了重要的一步
2 年多之前 回复
u011500781
u011500781 能不能帮我看看问题出在哪,我写的是一样的,但是就是null
2 年多之前 回复
u011500781
u011500781 不会php
2 年多之前 回复
showbo
showbo   Ds   Rxr 2016.01.26 09:23

$(function(){...})是父页dom对象好了就执行,iframe不一定加载完毕,改为$(window).load

 $(window).load(function() {
        var x = document.getElementById('qq').contentWindow.document.getElementById('div1');

        console.log(x);

    });
ale2012
ale2012   2016.01.26 09:47

父级页面js:

            function getChildEle() {```
            var x = document.getElementById('qq').contentWindow.document.getElementById('div1');
            console.log(x);
            }

子级页面JS:
$(function() {
window.top.getChildEle();
});


qq641826454
qq641826454   2016.01.26 17:01

父级页面js:

        function getChildEle() {```
        var x = document.getElementById('qq').contentWindow.document.getElementById('div1');
        console.log(x);
        }

子级页面JS:
$(function() {
window.top.getChildEle();
});

rongku
rongku   2016.01.28 09:46

var x = $('#div1', window.iframes['iframename'].document)

WinsenJiansbomber
WinsenJiansbomber   2016.01.28 20:25

你酱紫肯定要失败了,浏览器是有安全性约束的,如果在一个A域的页面内嵌一个B域的,而且A还要通过代码去访问B的内容,这就是所谓的XSS(Cross Site Script)夸域攻击了。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
同域下iframe父、子间互相操作dom元素
在这里不考虑跨域; 大家可能在网上看过很多类似的教程,但却不能实现操作dom,在这里提醒一下,我们在父页面需要确定所有元素加载完毕后(必须要包括子级iframe),再执行代码; 1 我们需要在父页面使用window.onload = function() {}; 2 为了兼容所有浏览器,需要让iframe的id和name相同 具体示例代码如下: 父页面: Document
Js操纵iframe中Dom以及iframe子页面中Js操纵父页面Dom
一、父页面中Js读取或调用iframe中的Dom或js代码段 二、iframe子页面中的Js调用父页面中的Dom或js代码段 /*父窗口调用iframe子窗口中的Dom 本例也就是index.php页面中的js读取iframe.php中的id为demoID的Dom元素*/ var Obj = window.frames["iframecontent"].document.getElemen
iframe跨域传输数据(一);子页面访问主框架DOM元素;
如果使用同域的方法,浏览器判断A.html 与 B.html 不同域,会有错误提示。 Uncaught SecurityError: Blocked a frame with origin “http://localhost” from accessing a frame with origin “http://127.0.0.0“. Protocols, domains, and ports
iframe 操作父元素或者操作子元素
文章出处:http://www.jb51.net/article/40698.htm 在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素 在父窗口中获取iframe中的元素 格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click(); 实例:
iframe操作父级页面中html元素
html中嵌入一个iframe;现在想在iframe中操作父级html中的元素; 操作如下: 父级html<html> <head></head> <body> <div id="father" >父级html</div> <iframe src="iframe.html"></iframe> </body> </html>iframe页面
如何操作iframe父页面中的元素、方法、变量
欢迎访问我的个人博客 http://xiaolongwu.cn/ 方法 1. 在iframe中查找父页面元素的方法: jQuery的方法:$(&quot;#id&quot;,window.parent.document) 原生的方法:window.parent.document.getElementById(&quot;id&quot;); //有时候iframe会嵌套好几层,那么嵌套两层时就是: window.par...
原生js获取iframe中dom元素--父子页面相互获取对方dom元素
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1、父页面(demo.html),在父页面修改子页面div的背景色为灰色,原来为红色: demo主页面 window.onload = function(){ var _iframe = document.getElementById('if
iframe 修改父iframe的某个元素值
子iframe调用 window.parent.test('股东');
jQuery获取iframe中的元素,在iframe中获取父窗体的元素
在父窗口中获取iframe中的元素  方式1: 格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1 实例:$("#ifm").contents().find("#btnOk").click();//jquery 方法1 方式2: 格式:$("#iframe中的控件ID",document.fr
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
1)在iframe中查找父页面元素的方法: $('#id', window.parent.document) 2)在iframe中调用父页面中定义的方法和变量: parent.method parent.value 3)实例 父页面 var hello = 'hello'; function get