html,获取iframe的window,document,自定事件与iframe通信
获取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通信的更多相关文章
- SharePoint 2013 页面中window/document.onload/ready 事件不能触发的解决方案
问题1:在SharePoint 2013页面中使用Javascript 事件window/document.onload/ready时,你会发现处理onload/ready事件的代码根本不能执行. 问 ...
- 获取iframe的window对象
在父窗口中获取iframe中的元素 // JS // 方法1: var iframeWindow = window.frames["iframe的name或id"]; iframe ...
- js 浏览器窗口大小改变 高度 宽度获取 window/document.height()区别
<script> //当浏览器的窗口大小被改变时触发的事件window.onresize window.onresize = function(){ console.log($(windo ...
- jQuery 获取父窗口的元素 父窗口 子窗口(iframe)
$("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementById ...
- JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
一.Iframe 篇 公共部分 //父对象得到子窗口的值 //ObjectID是窗口标识,ContentID是元素ID function GetValue(ObjectID,ContentID) { ...
- 总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
一.Iframe 篇 //&&&&&&&&&&&&&&&&&&a ...
- 总结js(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
http://hi.baidu.com/yashua839/blog/item/131fdb2fe547ef221f3089af.html一.Iframe 篇 //&&&&am ...
- 基本的window.document操作及实例
基本的window.document操作及实例 找元素 1.根据id找 var d1 = document.getElementById("d1"); alert(d1); 2.根 ...
- Window.document对象
1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunme ...
随机推荐
- BZOJ3990:[SDOI2015]排序——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=3990 小A有一个1-2^N的排列A[1..2^N],他希望将A数组从小到大排序,小A可以执行的操作 ...
- BZOJ2428:[HAOI2006]均分数据——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=2428 https://www.luogu.org/problemnew/show/P2503 已知 ...
- AOJ.综合训练.2016-12-1
友情提示:不要复制粘贴,看完解析先自己尝试写一下,不行再看代码!祝AC愉快 @_@ A. 近似值计算 题意分析 根据公式,先用含有n的代数式表示出来pi,然后计算这个近似值和题目给出来的3.14159 ...
- 【简单算法】37.Shuffle an Array
题目: 打乱一个没有重复元素的数组. 示例: // 以数字集合 1, 2 和 3 初始化数组. ,,}; Solution solution = new Solution(nums); // 打乱数组 ...
- hdu4109 topsort
Problem Description Ali has taken the Computer Organization and Architecture course this term. He le ...
- springmvc不通过controller进行页面跳转
1.controller 继承WebMvcConfigureAdapter 然后使用ViewControllerRegistry 来进行跳转
- mysql的时间函数整理
转:这里总结的非常齐全: http://fengbin2005.iteye.com/blog/1999763 Mysql时间函数 对于每个类型拥有的值范围以及并且指定日期何时间值的有效格式的描 ...
- SDUT 3930 线段树
皮卡丘的梦想2 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 一天,一只住在 501 实验 ...
- 使用localhost调试本地代码,setcookie无效
今天在本地调试代码的时候,再域名中使用localhost,结果一直调试不成功,最后发现在登录时,setcookie()没有设置进去 于是发现了,在使用localhost调试时,保存cookie是无效的 ...
- PAT (Top Level)1002. Business DP/背包
As the manager of your company, you have to carefully consider, for each project, the time taken to ...