onload bug in Google Chrome/Safari

Question

I have various links that open bootstrap modals. Some of the modals open with simple html content inside, others contain an iframe.

I am using ng-switch to determine which content type to load into the modal. This issue is only taking place in Google Chrome and Safari (i.e. webkit browsers).

I am using onload in the iframe to call a function once the iframe is instantiated.

<div class="modal-body" ng-switch="modal.type">
   <div ng-switch-when="iframe">
      <iframe ng-src="http://plunker.co/group" onload="callMeMaybe();"></iframe>
   </div>
   <div ng-switch-when="html">
      <h1>I'm just plain ol' html up in here.</h1>
   </div>
</div>

The issue: Chrome and Safari call the onload function twice. Whereas Firefox and IE properly call the function once.

What can I do to prevent this behavior in Chrome/Safari?

Here's a plunkr

Answer 1

Apparently, on webkit browsers, the onload event on a iframe triggers twice. Once when the iframe is created and then, when the src is set.

According to this answer : https://stackoverflow.com/a/15880489/3170216

You can prevent this behavior if you attach the onload event after your iframe element is appended to the body. But i'm not sure how to do that in your situation.