Search code examples
htmlasp.netangularjsiframeangular-controller

Why does my Iframe load its page twice?

When I land on the main page for the first time fiddler shows the iframe site loading once. When I F5 or click back to the page it seems to load the site twice.

Fiddler shows that the first time has a symbol signifying it was aborted.

Iframe loads page twice - is this really an issue?

Explaining the points on the image

  1. The first time the page loaded the iframe page loaded fine (in this case its an ASP page, but it occurs for non ASP pages).
  2. On F5 page refresh this is my issue; the page loads but it looks like it was aborted. I'm trying to figure out why. Is it even an issue? Will it cause extra resources to be used on the client/server?
  3. The page then loads fine.

My IFrame looks like this:

<div class="IframeContainer">
    <iframe class="IframeContent" ng-src="{{::trustSrc(ActiveLink)}}" iframe-onload="iframeLoadedCallBack()" frameborder="0" scrolling="no"></iframe>
</div>

I've a watcher on ActiveLink and it only changes from undefined to defined once. However I've added logging to the function trustSrc and it appears to be called 3 times. I've no idea why yet.

The Iframe is added as a template URL within the app.js as such:

.state('Retrieved', {
      url: '/Retrieved',
      templateUrl: 'Scripts/AngularJs/Views/_GenericIframeContainer.html'
  })

I think that because the iframe is using ng-src the variable goes through the digest cycle and becomes evaluated. Could it be that this evaluation is causing the iframe to reload?

Solution

  • The fix was to alter the angular JS (version 1.4.9) file that we use. Around line 20365 we replaced the following

    attr.$set(name, value);

    with (which adds a 10ms delay)

    setTimeout(function () {
   attr.$set(name, value);
}, 10);

    We also changed 

    if (msie && propName) element.prop(propName, attr[name]);

    with

    if (msie && propName && element[0].tagName !== 'IFRAME') element.prop(propName, attr[name]);

    So it is probably a IE only issue. The same code is in AngularJS 1.6.4

    It seems like the issue is addressed here: https://github.com/angular/angular.js/issues/9843 but the fix wasn't in place IMO.