javascript - 强制 iframe 在仅 src 哈希更改时(重新)加载文档

Question

我有一个 iframe 应该加载网络应用程序的不同模块。

当用户点击顶部窗口中的导航菜单时，它会向 iframe 传递一个新的 url。问题是，新的 url 实际上并没有指向一个新的页面，它只是使用了一个改变的 hash。

即:

• 用户点击“dashboard”，iframe src 设置为 application.html#/dashboard
• 用户点击“历史”，iframe src 设置为application.html#/history

这意味着 iframe 实际上不会再次加载 src url，因为散列更改不需要它。 iframe 内的应用程序是一个 Angular 应用程序，它使用 requireJS 动态加载所需的模块。我们需要保留此功能。

我需要强制重新加载框架源，即使只有散列改变了。有可能我找到了一种方法来重写我们的 Angular 应用程序以在推送状态事件上动态卸载/加载模块，但这为应用程序引入了多层问题，加上一些 IE 问题。

我试过:

• 设置 iframe src 并调用它的 location.reload，但这会重新加载最初加载的 url
• 设置 iframe location.href/hash 并调用 reload，同样的问题
• 将 src 属性设为空白，然后设置新的 url - 无效

我能找到的唯一解决方案是将 src 设置为空白屏幕，然后 onload 将其设置为新的 url:

var appIFrame = document.getElementById('appIFrame');
appIFrame.src = 'about:blank';
appIFrame.onload = function(){
  appIFrame.src = '// set the real source here';
  appIFrame.onload = false;
}

这可行，但似乎效率低下，因为有一个额外的步骤。

Answer 1

也许添加一个动态 GET 参数 – f.e.当前时间戳，您可以从 JavaScript Date 对象获取到 iframe URL。

不是将 application.html#/dashboard 分配为 src 值，而是从外部页面分配 application.html?1234567890#/dashboard (显然 1234567890 被当前时间戳替换了)。