javascript —— 父页面监听iframe子页面的自定义事件
在html中，当iframe想通过自定义事件的方式给父页面传递消息时，我们该如何实现呢？
怎么创建自定义事件
创建自定义事件可以通过new CustomEvent()的方式创建，代码如下：
var bEvent = new CustomEvent("tReady", {
detail: {
msg: "2000ms ok"
},
bubbles: true,// 是否冒泡
cancelable: true// 是否可以取消事件的默认行为
});
其中detail传递数据，bubbles参数用来配置该事件是否冒泡，cancelable参数用来配置该事件是否可以取消事件的默认行为
该方法在一些旧的浏览器里可能不兼容，为此MDN社区还提供了一套适配代码：
(function(){
try{
// a : While a window.CustomEvent object exists, it cannot be called as a constructor.
// b : There is no window.CustomEvent object
new window.CustomEvent('T');
}catch(e){
var CustomEvent = function(event, params){
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
};
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
}
})();
为了更好的兼容性，我们也可以直接通过document.createEvent('CustomEvent')的方式来创建自定义事件，代码如下：
var bEvent = document.createEvent("CustomEvent");
bEvent.initCustomEvent("tReady", true, true, {msg: "2000ms"});
initCustomEvent的参数说明：
第一个参数：自定义的事件名
第二个参数：配置该事件是否冒泡
第三个参数：配置该事件是否可以取消事件的默认行为
第四个参数：事件传递的数据
怎么触发自定义事件
触发自定义事件可以通过指定对象来触发，这里通过window来触发，代码如下：
window.dispatchEvent(bEvent);
怎么监听自定义事件
要监听iframe的事件，父页面先要获得iframe的window对象，通过监听window对象的事件来实现，我也试着过通过监听iframe的document来监听事件（iframe的自定义事件通过document来触发），发现监听不到，这里有清楚原因的大佬欢迎留言。监听自定义事件的代码如下：
var b_win = document.getElementById("b_iframe").contentWindow;
b_win.addEventListener("tReady", function(e){
var msg = e.detail.msg
console.log("getmsg：" + msg)
})
父页面和iframe页面的完整代码：
父页面：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<h2>嵌入b页面：h2>
<iframe id="b_iframe" src="b.html">iframe>
body>
<script type="text/javascript">
var adata = "huzhen120"
var b_win = document.getElementById("b_iframe").contentWindow;
b_win.addEventListener("tReady", function(e){
var msg = e.detail.msg
console.log("getmsg：" + msg)
})
script>
html>
iframe子页面：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<span id="bspan" style="color:red;">我是嵌入的b页面span>
body>
<script type="text/javascript">
var data = 'huzhenv5';// b页面的数据
// 测试触发
setTimeout(function(){
// 1，创建事件对象
var bEvent = new CustomEvent("tReady", {
detail: {
msg: "2000ms ok",
doc: document
},
bubbles: true,// 是否冒泡
cancelable: true// 是否可以取消事件的默认行为
});
window.dispatchEvent(bEvent);
}.bind(this), 2000)
script>
html>