javascript-【急】iframe父操作子的dom元素失效?

问题描述

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

解决方案

http://blog.jjonline.cn/userInterFace/140.html

解决方案二:

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

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

        console.log(x);

    });

解决方案三:

父级页面js:

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

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


解决方案四:

父级页面js:

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

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

解决方案五:

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

解决方案六:

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

时间: 2024-12-09 20:49:28

javascript-【急】iframe父操作子的dom元素失效?的相关文章

《jQuery Cookbook中文版》——1.10 创建、操作和插入DOM元素

1.10 创建.操作和插入DOM元素 1.10.1 问题 你打算创建一个或者多个新的DOM元素,立刻选中这些元素加以操作,然后把它们注入到DOM中. 1.10.2 解决方案 你可能还不清楚,jQuery函数是多功能的,根据你发送的不同参数结构,一个函数能以不同的方式运行.如果以原始HTML文本字符串为参数调用函数,它将立刻创建这些元素.例如,下列语句将创建一个包装在< p>元素中的< a>元素,在< p>和< a>元素中还封装了一个文本节点: jQuery(

Javascript调用iframe父窗口与子窗口元素例子总结

1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 代码如下: $("#objid",document.frames('iframename').document) 3.js 在iframe子页面获取父页面元素代码如下: indow.parent.document.getElementByIdx_x("元素id");

JavaScript实现iframe中操作父类的input

iframe中操作父类的input window.parent.document.getElementById('mark2').value=$('#rightPointer').val(); 在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["iframeSon"].document).find(":text"); 在IFRAME中操作 选中父窗口中的所有输入框: $(window.parent.document).find(&qu

iframe父页面获取子页面参数的方法

 这篇文章主要介绍了iframe父页面获取子页面参数的方法,需要的朋友可以参考下 1.父页面中的iframe  代码如下: <iframe name="parentPage"></iframe>    2.子页面中元素的属性   代码如下: <input type="text" id="date" data-dojo-type="dijit/form/DateTextBox" value=&quo

iframe父页面获取子页面参数的方法_javascript技巧

1.父页面中的iframe 复制代码 代码如下: <iframe name="parentPage"></iframe> 2.子页面中元素的属性 复制代码 代码如下: <input type="text" id="date" data-dojo-type="dijit/form/DateTextBox" value="2013-11-12"/> 3.取子页面中DateTe

获取dom元素那些讨厌的位置封装代码_javascript技巧

介绍 解决各个浏览器下 获取dom 元素的 位置 兼容性 ie 6 7 8 firefox 3.6 chrome 4.0 目前只测试了这几个浏览器 作者 Jelle · lu QQ:271412542 Email:idche@qq.com blogs:http://www.cnblogs.com/idche/ 源码说明 jquery 源码给我很大帮助,也用到一个叫 布鲁斯 · 李 的同学的源码,当然更多资源来源于网络. 功能说明 // jelle(elem) 对象 elem传递对象ID 或者 d

javascript iframe 父窗口和子窗口实现代码

一.父窗口调用iframe子窗口方法 1.html语法:<iframe name="myframe" src="child.html"></iframe> 2.父窗口调用子窗口:myframe.window.functionname(); 3.子窗品调用父窗口:parent.functionname(); 简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行 4.父窗口页面源码: 复制代码 代码如下: <html>

jQuery实现iframe父窗体和子窗体的相互调用_jquery

本文实例讲述了jQuery实现iframe父窗体和子窗体的相互调用方法.分享给大家供大家参考,具体如下: 父窗体 <html> <head> <title>usually function</title> </head> <body> <iframe src="http://www.baidu.com" ></iframe> <iframe src="myifame.html

跨域取子页面的dom-父页面操作子页面的dom,通过子页面的URL怎么做

问题描述 父页面操作子页面的dom,通过子页面的URL怎么做 appcan.ready(function() { titHeight = $('#header').offset().height; content = $('#reply').offset().height; var url = "http://192.168.1.195/jc6/wfAndroidHtml/knowledge2.html?UserCode=xiaoyujie%24356a192b7913b04c54574d18c