it-swarm-vi.tech

Điều gì là cách tốt nhất để tải lại / làm mới iframe?

Tôi muốn tải lại một <iframe> bằng JavaScript. Cách tốt nhất mà tôi tìm thấy cho đến bây giờ là đặt thuộc tính iframe chanh src thành chính nó, nhưng đây không phải là rất sạch. Có ý kiến ​​gì không?

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

hãy cẩn thận, trong Firefox, window.frames[] không thể được lập chỉ mục theo id, nhưng theo tên hoặc chỉ mục

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

Nó sẽ tải lại iframe, thậm chí trên các miền! Đã thử nghiệm với IE7/8, Firefox và Chrome.

177
evko

Nếu sử dụng jQuery, điều này dường như hoạt động:

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

Tôi hy vọng nó không quá xấu cho stackoverflow.

57
lousygarua
window.frames['frameNameOrIndex'].location.reload();
14
scunliffe

Thêm không gian trống cũng tự động tải lại iFrame.

document.getElementById('id').src += '';
12
Yohanes AI

Do cùng chính sách Xuất xứ , điều này sẽ không hoạt động khi sửa đổi iframe trỏ đến một tên miền khác. Nếu bạn có thể nhắm mục tiêu các trình duyệt mới hơn, hãy xem xét sử dụng nhắn tin tài liệu chéo của HTML5 . Bạn xem các trình duyệt hỗ trợ tính năng này tại đây: http://caniuse.com/#feat=x-doc-messaging .

Nếu bạn không thể sử dụng chức năng HTML5, thì bạn có thể làm theo các thủ thuật được nêu ở đây: http://softwareas.com/cross-domain-cransication-with-iframes . Mục blog đó cũng làm tốt công việc xác định vấn đề.

8
big lep

Tôi vừa mới nghĩ ra điều này trong chrome và điều duy nhất hoạt động là loại bỏ và thay thế iframe. Thí dụ:

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

Khá đơn giản, không bao gồm trong các câu trả lời khác.

4
Liam M

cho url mới

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

Phương thức gán () tải một tài liệu mới.

tải lại

location.reload();

Phương thức reload () được sử dụng để tải lại tài liệu hiện tại.

4
user2675617

Một sàng lọc trên bài đăng của yajra ... Tôi thích ý nghĩ đó, nhưng ghét ý tưởng phát hiện trình duyệt.

Tôi thà xem quan điểm của ppk về việc sử dụng phát hiện đối tượng thay vì phát hiện trình duyệt, ( http://www.quirksmode.org/js/support.html ), vì khi đó bạn thực sự đang kiểm tra khả năng của trình duyệt và hành động phù hợp, thay vì những gì bạn nghĩ trình duyệt có khả năng tại thời điểm đó. Cũng không yêu cầu quá nhiều phân tích chuỗi ID trình duyệt xấu xí và không loại trừ các trình duyệt có khả năng hoàn hảo mà bạn không biết gì về nó.

Vì vậy, thay vì nhìn vào navigator.AppName, tại sao không làm điều gì đó như thế này, thực sự kiểm tra các yếu tố bạn sử dụng? (Bạn có thể sử dụng các khối thử {} nếu bạn muốn nhận được nhiều hơn nữa, nhưng điều này hiệu quả với tôi.)

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!");
    }
}

Bằng cách này, bạn có thể thử bao nhiêu hoán vị khác nhau tùy thích hoặc cần thiết, mà không gây ra lỗi javascript và làm điều gì đó hợp lý nếu tất cả các cách khác đều thất bại. Việc kiểm tra các đối tượng của bạn trước khi sử dụng chúng là một công việc nhỏ hơn, nhưng, IMO, làm cho mã không an toàn hơn và tốt hơn.

Làm việc cho tôi trong IE8, Firefox (15.0.1), Chrome (21.0.1180,89 m) và Opera (12.0.2) trên Windows.

Có lẽ tôi có thể làm tốt hơn nữa bằng cách thực sự kiểm tra chức năng tải lại, nhưng điều đó là đủ cho tôi ngay bây giờ. :)

3
Aaron Wallentine

Đơn giản chỉ cần thay thế thuộc tính src của phần tử iframe là không thỏa đáng trong trường hợp của tôi vì người ta sẽ thấy nội dung cũ cho đến khi trang mới được tải. Điều này hoạt động tốt hơn nếu bạn muốn cung cấp phản hồi trực quan ngay lập tức:

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

Sử dụng tải lại cho IE và đặt src cho các trình duyệt khác. (tải lại không hoạt động trên FF) được thử nghiệm trên IE 7,8,9 và 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;
}
2
yajra

Bây giờ để thực hiện công việc này trên chrome 66, hãy thử điều này:

const reloadIframe = (iframeId) => {
    const el = document.getElementById(iframeId)
    const src = el.src
    el.src = ''
    setTimeout(() => {
        el.src = src
    })
}
2
Northern

Nếu bạn sử dụng Jquery thì có một mã dòng.

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

và nếu bạn đang làm việc với cùng cha mẹ thì

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

Bạn đã xem việc gắn vào url một tham số chuỗi truy vấn vô nghĩa chưa?

<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>

Nó sẽ không được nhìn thấy và nếu bạn biết thông số này an toàn thì nó sẽ ổn.

2
user1212212

Trong IE8 sử dụng .Net, lần đầu tiên đặt iframe.src là ổn, nhưng đặt iframe.src lần thứ hai sẽ không tăng page_load của trang có khung. Để giải quyết nó, tôi đã sử dụng iframe.contentDocument.location.href = "NewUrl.htm".

Khám phá nó khi sử dụng jQuery thickBox và cố gắng mở lại cùng một trang trong iframe hộp dày. Sau đó, nó chỉ hiển thị các trang trước đó đã được mở.

2
Shaulian

Nếu tất cả những điều trên không phù hợp với bạn:

window.location.reload();

Điều này vì một số lý do đã làm mới iframe của tôi thay vì toàn bộ tập lệnh. Có lẽ bởi vì nó được đặt trong chính khung, trong khi tất cả các giải pháp getElemntById đó hoạt động khi bạn cố gắng làm mới một khung từ khung khác?

Hoặc tôi không hiểu điều này một cách đầy đủ và nói những điều vô nghĩa, dù sao thì điều này làm việc với tôi như một cơ duyên :)

1
Marcin Janeczek

Sử dụng self.location.reload() sẽ tải lại iframe.

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

Đối với mục đích gỡ lỗi, người ta có thể mở bàn điều khiển thay đổi bối cảnh thực hiện thành khung mà anh ta muốn làm mới và thực hiện document.location.reload()

0
h3dkandi

Nếu bạn đã thử tất cả các đề xuất khác và không thể thực hiện bất kỳ đề xuất nào trong số chúng (như tôi không thể), thì đây là thứ bạn có thể thử có thể hữu ích.

HTML

<a class="refresh-this-frame" rel="#iframe-id-0">Refresh</a>
<iframe src="" id="iframe-id-0"></iframe>

JS

$('.refresh-this-frame').click(function() {
    var thisIframe = $(this).attr('rel');
    var currentState = $(thisIframe).attr('src');
    function removeSrc() {
        $(thisIframe).attr('src', '');
    }
    setTimeout (removeSrc, 100);
    function replaceSrc() {
        $(thisIframe).attr('src', currentState);
    }
    setTimeout (replaceSrc, 200);
});

Ban đầu, tôi bắt đầu thử và tiết kiệm thời gian với RWD và thử nghiệm trên nhiều trình duyệt. Tôi muốn tạo một trang nhanh chứa một loạt các iframe, được tổ chức thành các nhóm mà tôi sẽ hiển thị/ẩn theo ý muốn. Theo logic, bạn muốn có thể dễ dàng và nhanh chóng làm mới bất kỳ khung đã cho nào.

Tôi nên lưu ý rằng dự án tôi đang thực hiện, dự án đang sử dụng trên giường thử nghiệm này là trang web một trang với các vị trí được lập chỉ mục (ví dụ: index.html # home). Điều đó có thể có liên quan đến lý do tại sao tôi không thể có bất kỳ giải pháp nào khác để làm mới khung cụ thể của mình.

Phải nói rằng, tôi biết đó không phải là thứ sạch nhất trên thế giới, nhưng nó hoạt động cho mục đích của tôi. Hy vọng điều này sẽ giúp được ai đó. Bây giờ nếu tôi chỉ có thể tìm ra cách giữ iframe cuộn trang mẹ mỗi lần có hoạt hình bên trong iframe ...

EDIT: Tôi nhận ra rằng điều này không "làm mới" iframe như tôi mong muốn. Nó sẽ tải lại nguồn ban đầu của iframe. Vẫn không thể hiểu tại sao tôi không thể có bất kỳ tùy chọn nào khác để làm việc ..

CẬP NHẬT: Lý do tôi không thể sử dụng bất kỳ phương pháp nào khác để làm việc là vì tôi đã thử nghiệm chúng trong Chrome và Chrome sẽ không cho phép bạn để truy cập nội dung của iframe (Giải thích: Có khả năng các bản phát hành tương lai của Chrome hỗ trợ nội dungWindow/contentDocument khi iFrame tải tệp html cục bộ từ tệp html cục bộ không? ) nếu nó không xuất phát từ cùng một vị trí (theo như tôi hiểu) Sau khi thử nghiệm thêm, tôi cũng không thể truy cập nội dungWindow trong FF.

JS SỬA ĐỔI

$('.refresh-this-frame').click(function() {
    var targetID = $(this).attr('rel');
    var targetSrc = $(targetID).attr('src');
    var cleanID = targetID.replace("#","");     
    var chromeTest = ( navigator.userAgent.match(/Chrome/g) ? true : false );
    var FFTest = ( navigator.userAgent.match(/Firefox/g) ? true : false );      
    if (chromeTest == true) {
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc() {
            $(targetID).attr('src', targetSrc);
        }
        setTimeout (replaceSrc, 200);
    }
    if (FFTest == true) {
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc() {
            $(targetID).attr('src', targetSrc);
        }
        setTimeout (replaceSrc, 200);
    }       
    if (chromeTest == false && FFTest == false) {
        var targetLoc = (document.getElementById(cleanID).contentWindow.location).toString();
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc2() {
            $(targetID).attr('src', targetLoc);
        }
        setTimeout (replaceSrc2, 200);
    }
});
0
Todd
<script type="text/javascript">
  top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script> 
0
Sid

Giải pháp khác.

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

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