AngularJS - Duplicate Source Files in IE11

Question

My company has created a generic application that launches custom applications within an iframe. The parent window allows end users to click on an item within a worklist, and depending on what they've clicked on, we navigate to a launch controller which will build up a url to the product associated with the task. We then load that product application into an iframe within the launch view.

We are seeing duplicate static content files (js and partial templates) existing inside IE's developer tools.

Image of dev tools

Bundled js as well

We end up seeing additional copies of the file after every load the iframe. Since we're an SPA the assumption was that these files would be cached (which they are in all browsers except for IE). Each file is served up from the same web server. We even notice that if we dont set a breakpoint in the correct instance of the js file it wont get hit.

We have tried numerous things including removal of the iframe in the destroy event within the launch controller (since the frame gets added to the window object, we figured it was living on forever). We've ensured that the iframe has a valid ng-src tag as well as using $sce for the dynamically created url.

Since we require the iframe to be loaded via a POST from a form, we're doing something like this which is a super hacky way of submitting a POST. The snippet wont run as is but i wanted to include info on how we're populating our iframe.

function launch() {
  //return launchService.launch(vm.url, buildLaunchRequest()).then(success, error);
  $timeout(function() {
    $("#productForm").submit().remove();
  }, 1);
}
launch();

<div id="launch" class="container-fluid ss-container">
  <iframe name="productFrame" id="productFrame" data-ng-src="{{vm.url}}" resize-frame />
</div>
<form id="productForm" role="form" method="post" action="{{vm.url}}" name="productForm" target="productFrame">
  <input type="hidden" name="user" ng-value="vm.user" id="user" />
  <input type="hidden" name="authToken" ng-value="vm.authToken" id="authToken" />
  <input type="hidden" data-ng-repeat="(k,v) in vm.styles" name="{{k}}" value="{{v}}" />
</form>

Im sure there is a better way to submit a form with the target being an iframe but at the moment nothing seems to have worked for us.

If anyone has seen this duplicate source file issue and/or knows the proper way to submit a form with generated inputs automatically when the controller is loaded please help us out!

Thanks,

Jake

score 1 · Answer 1 · edited May 23 '17 at 10:27

Turns out it was some weird issue with how IE caches the iframe if you dont clear out the src tag on the iframe that causes this.

This question helped identify the issue: IE8 reloads dynamic iframe content from cache into the wrong iframe

It somehow would add a clone of the iframe to the parent window every time the angular view was loaded regardless of the src being the same. Clearing the src tag out on $destroy of our angular controller seems to kick IE into actually removing the node from the dom. We even tried $("#productFrame").remove() without any luck. Removing the src attrib didnt work as well.

What worked was $("#productFrame").attr("src", "").remove();

AngularJS - Duplicate Source Files in IE11

1 Answers1