从父级捕获iFrame onhashchange事件

时间:2017-04-22 01:09:53

标签: javascript html events iframe hashchange

我正试图从父母手中捕捉iFrame的HashChange事件而没有成功。

基本上我正在做:

index.html - 方法1:

iframeEl = document.getElementById('myiframeid');
iframeEl.addEventListener('hashchange', function() {
    alert('hash changed')
}, true);

index.html - 方法2:

iframeEl = document.getElementById('myiframeid');
iframeEl.onhashchange = function() {
    alert('hash changed')
};

无论如何,当我尝试从父级捕获iframe事件时,没有一种方法可行,尽管如果我尝试从iframe内部运行以下代码:

window.addEventListener('hashchange', function() {
    alert('hash changed')
}, true);

window.onhashchange = function() {
    alert('hash changed')
};

这两种方法都有效。

麻烦的是:我需要从iFrame外部捕获hashchange事件。

有人知道如何处理它吗?

仅供参考:jQuery不是一个选项。

提前致谢。

1 个答案:

答案 0 :(得分:1)

假设您想要从包含IframeElement.contentWindow的页面<iframe>测试哈希更改:

//<![CDATA[
// external.js - the page with your <iframe>
var doc, bod, htm, C, E, T; // for use on other loads
addEventListener('load', function(){ // window.onload sort of

doc = document; bod = doc.body; htm = doc.documentElement;
C = function(tag){
  return doc.createElement(tag);
}
E = function(id){
  return doc.getElementById(id);
}
T = function(tag){
  return doc.getElementsByTagName(tag);
}
var innerWindow = E('yourIframeId').contentWindow;
var oldHash = innerWindow.location.hash.replace(/#/, '');
innerWindow.addEventListener('hashchange', function(){
  console.log('#'+oldHash+' has been changed to #'+innerWindow.location.hash.replace(/#/, ''));
});

}); // end load
//]]>