I have an iframe
that's supposed to load different modules of a web application.
When the user clicks a navigation menu in the top window, it's passes a new url to the iframe. The trouble is, the new url doesn't actually point to a new page, it only uses a changed hash
.
i.e.:
- User clicks "dashboard", iframe
src
set toapplication.html#/dashboard
- User clicks "history", iframe
src
set toapplication.html#/history
This means that the iframe does not actually load the src
url again because hash changes don't require it to. The application inside the iframe is an angular app which loads the required modules dynamically using requireJS. We need this functionality to remain.
I need to force the frame source to load again even though only the hash changed. It's possible that I instead find a way to rewrite our angular app to dynamically unload/load the modules on push state events but that introduces several layers of issues for the app, plus some IE trouble.
I've tried:
- Setting iframe src and calling it's
location.reload
, but that reloads the originally loaded url - Setting the iframe location.href/hash and calling reload, same issue
- Blanking the
src
attribute and then setting the new url - no effect
The only solution I can find is to set the src to a blank screen, then onload
set it to the new url:
var appIFrame = document.getElementById('appIFrame');
appIFrame.src = 'about:blank';
appIFrame.onload = function(){
appIFrame.src = '// set the real source here';
appIFrame.onload = false;
}
This works, yet it seems inefficient because there's an extra step.