javascript div嵌入網頁 - 重新加載/刷新iframe的最佳方式是什麼?



html location (17)

我想用JavaScript重新加載一個<iframe> 。 我發現到目前為止最好的方法是將iframe的src屬性設置為自己,但這不是很乾淨。 有任何想法嗎?


Answers

簡單地替換iframe元素的src屬性在我的情況下並不令人滿意,因為在加載新頁面之前會看到舊內容。 如果您想提供即時的視覺反饋,這會更好:

var url = iframeEl.src;
iframeEl.src = 'about:blank';
setTimeout(function() {
    iframeEl.src = url;
}, 10);

出於調試目的,可以打開控制台將執行上下文更改為他想要刷新的框架並執行document.location.reload()


使用self.location.reload()將重新加載iframe。

<iframe src="https://vivekkumar11432.wordpress.com/" width="300" height="300"></iframe>
<br><br>
<input type='button' value="Reload"  onclick="self.location.reload();" />


為新的網址

location.assign("http:google.com");

assign()方法加載一個新文檔。

重裝

location.reload();

reload()方法用於重新加載當前文檔。


<script type="text/javascript">
  top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script> 

你有沒有考慮追加到URL無意義的查詢字符串參數?

<iframe src="myBaseURL.com/something/" />

<script>
var i = document.getElementsById("iframe")[0],
    src = i.src,
    number = 1;

//For an update
i.src = src + "?ignoreMe=" + number;
number++;
</script>

它不會被看到,如果你知道參數是安全的,那麼它應該沒問題。


添加空白區域也會自動重新加載iFrame。

document.getElementById('id').src += '';

在使用.Net的IE8中,第一次設置iframe.src是可以的,但是第二次設置iframe.src並不會引發iframe.src頁面的page_load 。 要解決它我使用iframe.contentDocument.location.href = "NewUrl.htm"

使用jQuery thickBox時發現它,並嘗試重新打開thickbox iframe中的相同頁面。 然後它只顯示了打開的較早的頁面。


我剛剛在Chrome中遇到了這種情況,唯一有效的工作是刪除並替換iframe。 例:

$(".iframe_wrapper").find("iframe").remove();
var iframe = $('<iframe src="' + src + '" frameborder="0"></iframe>');
$.find(".iframe_wrapper").append(iframe);

很簡單,在其他答案中沒有涉及。


如果你使用Jquery,那麼只有一行代碼。

$('#iframeID',window.parent.document).attr('src',$('#iframeID',window.parent.document).attr('src'));

如果你正在和同一個父母一起工作的話

$('#iframeID',parent.document).attr('src',$('#iframeID',parent.document).attr('src'));

如果使用jQuery,這似乎工作:

$('#your_iframe').attr('src', $('#your_iframe').attr('src'));

我希望它對於來說不是太難看。


document.getElementById('iframeid').src = document.getElementById('iframeid').src

它會重新加載iframe ,甚至跨域! 經過IE7 / 8,Firefox和Chrome的測試。


解決方案。

const frame = document.getElementById("my-iframe");

frame.parentNode.replaceChild(frame.cloneNode(), frame);

由於具有相同的來源策略 ,因此在修改指向其他域的iframe時,這不起作用。 如果您可以定位較新的瀏覽器,請考慮使用HTML5的跨文檔消息傳遞 。 您可以在這裡查看支持此功能的瀏覽器: http://caniuse.com/#feat=x-doc-messaginghttp://caniuse.com/#feat=x-doc-messaging

如果您無法使用HTML5功能,那麼您可以按照此處列出的技巧進行操作: http://softwareas.com/cross-domain-communication-with-iframes : http://softwareas.com/cross-domain-communication-with-iframes 。 該博客條目在定義問題方面也做得很好。


使用IE重新加載並為其他瀏覽器設置src。 (重新加載不適用於FF)在IE 7,8,9和Firefox上測試

if(navigator.appName == "Microsoft Internet Explorer"){
    window.document.getElementById('iframeId').contentWindow.location.reload(true);
}else {
    window.document.getElementById('iframeId').src = window.document.getElementById('iframeId').src;
}

window.frames['frameNameOrIndex'].location.reload();





javascript iframe