javascript - vue - window iframe reload




重新加載/刷新iframe的最佳方式是什麼? (14)

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


你有沒有考慮追加到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>

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


使用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();" />


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


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

使用jQuery thickBox時發現它,並嘗試重新打開thickbox 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'));

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


對yajra的帖子進行了改進......我喜歡這個想法,但討厭瀏覽器檢測。

我寧願採用ppk關於使用對象檢測而不是瀏覽器檢測的觀點( http://www.quirksmode.org/js/support.html ),因為那樣您實際上正在測試瀏覽器的功能並相應地採取行動,而不是您認為瀏覽器當時有能力。 也不需要太多醜陋的瀏覽器ID字符串解析,並且不排除你完全不知道的完美功能的瀏覽器。

所以,不要看navigator.AppName,為什麼不做這樣的事情,實際測試你使用的元素? (如果你想更有趣,你可以使用try {}塊,但這對我很有用。)

function reload_message_frame() {
    var frame_id = 'live_message_frame';
    if(window.document.getElementById(frame_id).location ) {  
        window.document.getElementById(frame_id).location.reload(true);
    } else if (window.document.getElementById(frame_id).contentWindow.location ) {
        window.document.getElementById(frame_id).contentWindow.location.reload(true);
    } else if (window.document.getElementById(frame_id).src){
        window.document.getElementById(frame_id).src = window.document.getElementById(frame_id).src;
    } else {
        // fail condition, respond as appropriate, or do nothing
        alert("Sorry, unable to reload that frame!");
    }
}

這樣,你可以嘗試盡可能多的不同排列,或者是必要的,而不會導致javascript錯誤,並且如果一切都失敗了,就做一些明智的事情。 在使用它們之前測試你的對像是一件多一點的工作,但IMO會提供更好更安全的代碼。

在Windows上為IE8,Firefox(15.0.1),Chrome(21.0.1180.89 m)和Opera(12.0.2)工作。

也許我可以通過實際測試重載功能來做得更好,但現在對我來說已經足夠了。 :)


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

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

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


為新的網址

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

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

重裝

location.reload();

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


由於具有相同的來源策略 ,因此在修改指向其他域的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 。 該博客條目在定義問題方面也做得很好。


解決方案。

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

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

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

document.getElementById('some_frame_id').contentWindow.location.reload();

要小心,在Firefox中, window.frames[]不能通過id索引,而是通過名稱或索引


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




iframe