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
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.