Javascript iframe中的Detect事件与父级上的jQuery事件侦听器一起使用,但现在与纯JS一起使用
我试图找到几种不同的方法来添加事件侦听器,以侦听来自iFrame的自定义事件 我可以使用jQuery事件监听器成功地监听来自iFrame的事件,但是我似乎不能用纯JS来监听。如果有人愿意看一下代码,让我知道我做错了什么,那就太好了 内部iFrame Iframe容器父级Javascript iframe中的Detect事件与父级上的jQuery事件侦听器一起使用,但现在与纯JS一起使用,javascript,jquery,html,iframe,Javascript,Jquery,Html,Iframe,我试图找到几种不同的方法来添加事件侦听器,以侦听来自iFrame的自定义事件 我可以使用jQuery事件监听器成功地监听来自iFrame的事件,但是我似乎不能用纯JS来监听。如果有人愿意看一下代码,让我知道我做错了什么,那就太好了 内部iFrame Iframe容器父级 在这里,您的事件是在主体上触发的,所以您应该侦听主体上的事件,而不是文档上的事件: document.querySelector("body").addEventListener("myevent:load",function(
在这里,您的事件是在主体上触发的,所以您应该侦听主体上的事件,而不是文档上的事件:
document.querySelector("body").addEventListener("myevent:load",function() {
console.log("Hello");
},false);
语法:
<script type="text/javascript">
<!--
// iFrame document resize script
function autoResize(id){
var newheight
, newwidth
, iframe;
if(document.getElementById){
iframe = document.getElementById(id);
newheight=iframe.contentWindow.document .body.scrollHeight;
newwidth=iframe.contentWindow.document .body.scrollWidth;
}
iframe.height= (newheight) + "px";
iframe.width= (newwidth) + "px";
};
// add event cross browser
function addEvent(elem, event, fn) {
// avoid memory overhead of new anonymous functions for every event handler that's installed
// by using local functions
function listenHandler(e) {
var ret = fn.apply(this, arguments);
if (ret === false) {
e.stopPropagation();
e.preventDefault();
}
return(ret);
}
function attachHandler() {
// set the this pointer same as addEventListener when fn is called
// and make sure the event is passed to the fn also so that works the same too
var ret = fn.call(elem, window.event);
if (ret === false) {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
return(ret);
}
if (elem.addEventListener) {
elem.addEventListener(event, listenHandler, false);
} else {
elem.attachEvent("on" + event, attachHandler);
}
}
// listen for load event from iFrame
addEvent(document, 'myevent:load', function(){
// doesn't work
console.log("IFRAME LOADED! 2");
});
document.addEventListener('myevent:load', function(){
// also doesn't work
console.log("IFRAME LOADED! 1");
});
$(document).bind('myevent:load', function(){
// works
console.log("IFRAME LOADED! - jQuery");
});
//-->
</script>
document.querySelector("body").addEventListener("myevent:load",function() {
console.log("Hello");
},false);