Javascript 加载后如何强制 iFrame 重新加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7851727/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to force an iFrame to reload once it loads
提问by Brett
I have numerous iframes that load specific content on my pages. Both the parent and iframe are on the same domain.
我有许多 iframe 可以在我的页面上加载特定内容。父级和 iframe 都在同一个域中。
I have a scrollbar inside the iframe that doesn't seem to load correctly in all browsers. But when I refresh the iframe it loads perfect. I have no idea why it does this.
我在 iframe 中有一个滚动条，它似乎无法在所有浏览器中正确加载。但是当我刷新 iframe 时它加载完美。我不知道它为什么这样做。
I have used the meta refresh, which works but I don't want the page to refresh constantly, just once.
我使用了元刷新，它有效，但我不希望页面不断刷新，只刷新一次。
The solution I'm looking for will reload the iFrame content after the iFrame is opened, with a minimal delay.
我正在寻找的解决方案将在 iFrame 打开后重新加载 iFrame 内容，延迟最小。
Edit
编辑
I realized that my page loads all of my iframes when the index is loaded. The iframes appear in a jQuery overlay, which is also loaded but visibility:hidden until called. So on this call is when I would want the iframe to be reloaded.
我意识到我的页面在加载索引时加载了我所有的 iframe。iframe 出现在 jQuery 叠加层中，该叠加层也已加载但可见性：隐藏直到被调用。所以在这个调用中，我希望重新加载 iframe。
Could anyone help me come up with a Javascript function that reloads the iFrame when I click the link to the iFrame? I've gotten close but I know nothing about js and I keep falling short. I have a function that reloads the page, but I can't figure out how to get it called just once.
谁能帮我想出一个 Javascript 函数，当我点击 iFrame 的链接时，它会重新加载 iFrame？我已经接近了，但我对 js 一无所知，而且我一直在做不到。我有一个重新加载页面的函数，但我不知道如何让它只调用一次。
I have this so far:
到目前为止我有这个：
<script type="text/javascript">
var pl;
var change;
pl=1;
function ifr() {
if (pl=1) {
document.location.reload([true]);
alert("Page Reloaded!");
change=1;
return change;
}
change+pl;
}
So basically it uses the document.location.reload which works to reload the page. I'm trying to then make pl change to something other than 1 so the function doesnt run again. I've been calling this JS from the body with onLoad.
所以基本上它使用 document.location.reload 来重新加载页面。我试图然后将 pl 更改为 1 以外的其他值，以便该函数不会再次运行。我一直在用 onLoad 从主体调用这个 JS。
回答by Brett
All the leads on this went dead, but I did find a code snippet that worked. Not written by me, and I don't remember where it came from. Just posting to help someone should they ever have the same question.
这方面的所有线索都消失了，但我确实找到了一个有效的代码片段。不是我写的，我不记得它来自哪里。如果他们有同样的问题，只是发布以帮助他们。
<div class="overlay-content"> //Content container needed for CSS Styling
<div id="Reloader">
//iFrame will be reloaded into this div
</div>
//Script to reload the iframe when the page loads
<script>
function aboutReload() {
$("#Reloader").html('<iframe id="Reloader" height="355px" width="830px" scrolling="no" frameborder="0" src="about.html"></iframe>');
}
</script>
</div>
Basically just loads the iFrame source when the window with the iFrame opens, as opposed to the iFrame loading when the original page loads.
基本上只是在带有 iFrame 的窗口打开时加载 iFrame 源，而不是在加载原始页面时加载 iFrame。
回答by John Pettitt
Beyond the scope of the original question, however this jQuery snippit works with cross domain iframeelements where the contentDocument.location.reload(true) method won't due to sandboxing.
超出了原始问题的范围，但是这个 jQuery snippit 适用于跨域iframe元素，其中 contentDocument.location.reload(true) 方法不会由于沙箱。
//assumes 'this' is the iframe you want to reload.
$(this).replaceWith($(this).clone()); //Force a reload
Basically it replaces the whole iframe element with a copy of itself. We're using it to force resize embedded 3rd party "dumb" widgets like video players that don't notice when their size changes.
基本上它用自身的副本替换整个 iframe 元素。我们正在使用它来强制调整嵌入的第 3 方“愚蠢”小部件的大小，例如视频播放器在其大小发生变化时不会注意到。
回答by Niet the Dark Absol
On the iframe element itself, set an onload:
在 iframe 元素本身上，设置一个 onload：
iframe.onload = function() {this.contentWindow.location.reload(); this.onload = null;};
(Only works if the iframe's location is in the same domain as the main page)
（仅当 iframe 的位置与主页在同一域中时才有效）
回答by Nickolay
Here's a complete solution to the original question:
这是原始问题的完整解决方案：
<iframe onload="reloadOnce(this)" src="test2.html"></iframe>
<script>
var iframeLoadCount = 0;
function reloadOnce(iframe) {
iframeLoadCount ++;
if (iframeLoadCount <= 1) {
iframe.contentWindow.location.reload();
console.log("reload()");
}
}
</script>
The updated question is not really clear (what's "the link to the iFrame" and where is it in your snippet?), but you have a few issues with the code:
更新的问题不是很清楚（“iFrame 的链接”是什么以及它在您的代码段中的什么位置？），但是您的代码有一些问题：
- "calling this JS from the body with onLoad", assuming you mean an iframe's body, means the variable you're hoping to use to avoid infinite reloading will get clobbered along with the rest of the iframe's page when it's reloaded. You need to either load a slightly different URL in the iframe (and check the URL on iframe's onload before reloading) or put the flag variable in the outer page (and access it with
parent.variableName- that should work I think) if (pl=1) {should use==, as=is always an assignment.change+pl;has no effect.
- “使用 onLoad 从主体调用此 JS”，假设您指的是 iframe 的主体，则意味着您希望用来避免无限重新加载的变量将在重新加载时与 iframe 页面的其余部分一起被破坏。您需要在 iframe 中加载一个略有不同的 URL（并在重新加载之前检查 iframe onload 上的 URL）或将标志变量放在外部页面中（并使用
parent.variableName访问它- 我认为这应该可行） if (pl=1) {应该使用==，因为=它总是一个任务。change+pl;没有效果。
