Capture iFrame onhashchange event from the parent

Question

I've being trying to capture the event onHashChange of an iFrame from his parent without success.

So basically I'm doing:

index.html - Approach 1:

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

index.html - Approach 2:

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

Regardless, none of the approaches work when I try to capture the iframe event from his parent, although if I try to run the code below from inside the iframe:

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

or

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

Both approaches will work.

Trouble is: I need to capture the hashchange event from the outside the iFrame.

Does anyones have a idea on how to handle it?

FYI: jQuery isn't an option.

Thanks in advance.

You need the `IframeElement.contentWindow.document` or `IframeElement.contentDocument`. The first is more backward compatible. `chage` Events need to be Attached to a specific Element that is a part of `IframeElement.contentDocument`. — StackSlave, Apr 22 '17 at 01:28
Hi, thanks for the answer, unfortunately it didn't work. I tried your both suggestions with the 2 approaches ( above ) and nothing happened. Woudl you mind in chuck your idea into a fiddlejs or something similar? Thanks — Tito Facchini, Apr 22 '17 at 01:35
Yup! They are. Actually both are localhost to be precise. :) — Tito Facchini, Apr 22 '17 at 01:43

StackSlave · Accepted Answer · 2017-04-22T02:08:03.530

2

Let's say you want to test for hash changes on IframeElement.contentWindow, from the page that contains your <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
//]]>

edited Apr 22 '17 at 02:08

answered Apr 22 '17 at 01:52

StackSlave

10,613
2
18
35

I think I may expressed myself badly. Basically I want capture at parent element level every time the hash changes in the iframe. By hash I mean – Tito Facchini Apr 22 '17 at 02:01
But yes, really appreciate your effort :) – Tito Facchini Apr 22 '17 at 02:03
So you're changing the `.src` of the `IframeElement` and not on the `IframeElement.contentWindow`? There is no Event to see if the `src` was changed. Changing the `IframeElement.src` will load the page fresh. Just change the hash using `innerWindow.location.hash = 'hashWithoutPound'`, based on `innerWindow` in the code above. – StackSlave Apr 22 '17 at 02:16
@TitoFacchini how is the `src` changing? – zer00ne Apr 22 '17 at 02:21

Capture iFrame onhashchange event from the parent

1 Answers1