Javascript error when iFrame removed by Angular.

[nelisbijl]

When I leave the page containing the iFrame (actually an angular ui-router ui-view), i get the error:

Unhandled exception at line 8, column 4217 in http://localhost:60049/vendor/iframe-resizer/js/iframeResizer.min.js

0x800a138f - JavaScript runtime error: Unable to get property 'postMessage' of undefined or null reference

Is it a bug? Is there any possibility to unbind/detach/unsubscribe before leaving the page?
You could test for iframe.contentWindow in the target method but it would be better if you could gracefully exit a page with an iFrame

[davidjbradshaw]

That's an interesting one. Would you be able to create a simple test case I could look at?

I guess Angular is removing the iFrame from the page whilst this code is running. I take a look in the next few days, if you want to have a play, look at the trigger function at line 408. I expect adding something like if(contentWindow in iframe){...} will fix this for you.

[davidjbradshaw]

Oh I just reread your post and see you also suggested that.

The code is very loosely bound to the html, and the trigger function only gets called in one of two ways, at page setup, or mid-way through a double page resize used to workout if the page needs to size downwards with some of the non-standard height calculation methods.

So I think doing check in the target function is the cleanest way of handling this.

[nelisbijl]

After I worked around this issue the client side crashed on Math.max telling me that Math did not exist !?
I resolved things for now by calling close from the client side but that is of course non-ideal

[davidjbradshaw]

This gets stranger and stranger. The Math object is only used in the iFrame, not the parent page and then only to work out the height of the page. If you've removed the iFrame then this code can not be running.

To me it looks like the iFrame isn't being fully removed from the page by Angular. Have you tried removing it from the page directly, rather than calling the close() method in the child?

var iframe = document.getElementByTagname('iframe')[0];
iframe.parentNode.removeChild(iframe);

It's difficult for me to make any more suggestions without seeing an example of the problem.

[davidjbradshaw]

Closed due to no response.

[nelisbijl]

Finally found the time to make an example:
https://jsfiddle.net/nelis/aznb65jL/16/

[davidjbradshaw]

The fiddle doesn't work due to JS location.

[nelisbijl]

Weird, could you try Firefox

[markvantilburg]

In firefox the errors do trigger. It seems safari is more strict about loading javascript files with the wrong mime-type

[davidjbradshaw]

This gets stranger and stranger. Will dig in more deeply when I get some time. Can you turn the log option on the fiddle please.

The problem is that the reset call gets received by the parent, but I don't see it being triggered in the iframe! In the mean time if change to the resize method to 'lowestElement' or 'grow' the problem goes away.

[nelisbijl]

log: true -> https://jsfiddle.net/aznb65jL/20/

[davidjbradshaw]

I've just updated the version in src to warn rather than error in this situation. JSFiddle seems to do strange things with the log. Can you make a stand alone example I can look further at.