获取iframe的window对象js代码如下.注意：一定要在文档加载完成之后，才能获取到
var Iframe=document.getElementById("script");//先获取到iframe元素

var iframeWindow=(Iframe.contentWindow || Iframe.contentDocument);//获取到指定iframe下window

对应html代码：

<iframe  class="Panel" id="script" src="t.html"></iframe>

以上代码就能实现获得页面中iframe的window对象

现在实现iframe和父页面通信，

page1（为iframe页面代码）：

<!DOCTYPE html>

<html>

<head>

    <meta charset=utf-8" />

    <title>By：DragonDean</title>

    <script src="jquery.js"></script>

    <script type="application/javascript">

       window.onload=function(){

            window.evt=document.createEvent('Event');//创建一个事件，挂在当前页面的window对象上

            window.evt.initEvent('myEvent',true,true);//初始这个事件

            var obj=document.getElementById('testBtn');

            obj.addEventListener('click', function(){//自定义事件触发的条件，例子中用的点击

                window.evt.test='测试iframe之间用事件传数据';//测试传值

                window.dispatchEvent(window.evt);//让自定义事件触发

            }, false);
　　　　console.log(parent);//父页面的window对象，iframe嵌入页面自带
　　　　};
　　

    </script></head>

<body>

<button id="testBtn">test</button>

</body>

</html>

page2（主页面）：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script>

     window.onload=function(){

         var Iframe=document.getElementById("script");//先获取到iframe元素

         var iframeWindow=(Iframe.contentWindow || Iframe.contentDocument);//获取到指定iframe下window

         /*在主页面对iframe页面的window上添加一个监听事件，监听自定义事件，传入一个当前页面的函数，获取iframe触发的事件*/

         iframeWindow.addEventListener('myEvent',function(event){//event为t.html中触发这个监听的window.evt事件

             console.log(event.test);//到此，传值完成

         })

     }

    </script>

</head>

<body>

<iframe  class="Panel" id="script" style="height: 1000px;" src="page1.html" name="script"></iframe>

</body>

</html>

将两个页面放同目录下，运行page2,呼出控制台，就能看到传值结果。

html,获取iframe的window,document，自定事件与iframe通信的更多相关文章

  1. SharePoint 2013 页面中window/document.onload/ready 事件不能触发的解决方案

    问题1:在SharePoint 2013页面中使用Javascript 事件window/document.onload/ready时,你会发现处理onload/ready事件的代码根本不能执行. 问 ...

  2. 获取iframe的window对象

    在父窗口中获取iframe中的元素 // JS // 方法1: var iframeWindow = window.frames["iframe的name或id"]; iframe ...

  3. js 浏览器窗口大小改变 高度 宽度获取 window/document.height()区别

    <script> //当浏览器的窗口大小被改变时触发的事件window.onresize window.onresize = function(){ console.log($(windo ...

  4. jQuery 获取父窗口的元素 父窗口 子窗口(iframe)

    $("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementById ...

  5. JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作

    一.Iframe 篇 公共部分 //父对象得到子窗口的值 //ObjectID是窗口标识,ContentID是元素ID function GetValue(ObjectID,ContentID) { ...

  6. 总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作

    一.Iframe 篇 //&&&&&&&&&&&&&&&&&&a ...

  7. 总结js(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作

    http://hi.baidu.com/yashua839/blog/item/131fdb2fe547ef221f3089af.html一.Iframe 篇 //&&&&am ...

  8. 基本的window.document操作及实例

    基本的window.document操作及实例 找元素 1.根据id找 var d1 = document.getElementById("d1"); alert(d1); 2.根 ...

  9. Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunme ...

随机推荐

  1. BZOJ4653 & 洛谷1712 & UOJ222：[NOI2016]区间——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4653 https://www.luogu.org/problemnew/show/P1712 ht ...

  2. BZOJ1604 & 洛谷2906：[USACO2008 OPEN]Cow Neighborhoods 奶牛的邻居——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1604 https://www.luogu.org/problemnew/show/P2906#sub ...

  3. 征战jQuery

    一:jQuery的用途 1>.访问 和 操作 DOM元素 2>.控制 页面样式 3>.对页面事件的处理 4>.方便的使用jQuery插件 5>.与Ajax技术的完美结合 ...

  4. bzoj3524: [Poi2014]Couriers（主席树）

    主席树(可持久化权值线段树)初探... 修改一个点只对树上logn个点有影响,所以新建logn个点就行了,总共新建mlogn个点. 查询一个区间[l,r],相当于将数一个一个加进树,询问第l到第r次操 ...

  5. NOIP2009 codevs1173 洛谷P1073 最优贸易

    Description: 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一部分为双向通 ...

  6. CentOS 6.5 下安装 QT 4

    1. 获取下载地址 从我到网盘下载:  qt-creator-opensource-linux-x86_64-3.5.1.run            qt-everywhere-opensource ...

  7. ACE的安装

    转载于:http://www.cnblogs.com/TianFang/archive/2006/12/03/580714.html ACE的安装是一件比较麻烦的事情,这里简单的记录了我在VS2005 ...

  8. iOS开发ARC机制下的内存管理技术要点

    转载一篇: iOS开发ARC内存管理技术要点.ARC内存管理原则总结.iOS ARC内存管理总结 ARC内存管理机制 (一)ARC的判断准则: 只要没有任何一个强指针指向该对象,该对象就会被释放. ( ...

  9. HDU 2094 拓扑排序

    产生冠军 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  10. bzo4802 欧拉函数 miller_rabin pollard_rho

    欧拉函数 Time Limit: 5 Sec  Memory Limit: 256 MBSubmit: 1112  Solved: 418[Submit][Status][Discuss] Descr ...