获取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. 【Codeforces 506E】Mr.Kitayuta’s Gift&&【BZOJ 4214】黄昏下的礼物 dp转有限状态自动机+矩阵乘法优化

    神题……胡乱讲述一下思维过程……首先,读懂题.然后,转化问题为构造一个长度为|T|+n的字符串,使其内含有T这个子序列.之后,想到一个简单的dp.由于是回文串,我们就增量构造半个回文串,设f(i,j, ...

  2. HDU 5650 异或

    so easy Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Sub ...

  3. [技巧篇]21.Android Studio的快捷键设置[图片版]

    如果对你有帮助,请点击推荐!

  4. [Leetcode] LRU 算法实现

    Design and implement a data structure for Least Recently Used (LRU) cache. It should support the fol ...

  5. 【C++ STL】Stack

    1.定义 class stack<> 实作出一个stack(也成为LIFO,后进先出),你可以使用push()将任意数量的元素置入stack中,也可以使用pop()将元素依次插入次序反序从 ...

  6. static变量与context泄漏

    1.mContext--- public class LoginActivity extends BaseActivity { ....      /**初始化信息*/      private vo ...

  7. 「6月雅礼集训 2017 Day7」三明治

    [题目大意] $1 \leq n,m \leq 400$ N字形表示:上图第1行第1个那种:Z字形表示上图第1行第2个那种. [题解] 很容易得到结论: 考虑如果紫色比绿色先消去,那么黄色一定会比对应 ...

  8. 洛谷P2901 [USACO08MAR]牛慢跑Cow Jogging

    题目描述 Bessie has taken heed of the evils of sloth and has decided to get fit by jogging from the barn ...

  9. 基本控件文档-UISlider属性---iOS-Apple苹果官方文档翻译

    本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址  //转载请注明出处--本文永久链接:http://www.cnblogs.com/C ...

  10. csc_滤镜filter和实现透明的两种方式

    有这样一个需求,给一个地图实现半透明效果. 使用css滤镜属性可以实现:filter. 下面是属性的所以值 filter: none | blur() | brightness() | contras ...