Tải lại IFRAME mà không cần thêm vào lịch sử

Question

Tôi đang thay đổi src của IFRAME để tải lại, làm việc tốt và kích hoạt sự kiện onload khi HTML tải xuống.

Nhưng nó thêm mục nhập vào lịch sử mà tôi không muốn. Có cách nào để tải lại IFRAME và chưa ảnh hưởng đến lịch sử không?

Answer 1

Bạn có thể sử dụng javascript location.replace:

window.location.replace('...html'); 

Thay thế văn bản hiện tại với một tại URL được cung cấp. Sự khác biệt từ phương thức assign() là sau khi sử dụng replace() trang hiện tại sẽ không được lưu trong phiên lịch sử, nghĩa là người dùng sẽ không thể sử dụng nút Quay lại .

Answer 2

Giống như Greg đã nói ở trên, hàm .replace() là cách thực hiện việc này. Tôi không thể tìm ra cách để trả lời câu trả lời của anh ấy *, nhưng mẹo này là để tham chiếu thuộc tính iFrames contentWindow.

var ifr = document.getElementById("iframeId"); 
ifr.contentWindow.location.replace("newLocation.html"); 

* Chỉ cần biết tôi cần thêm danh tiếng để nhận xét về câu trả lời.

Answer 3

Sử dụng replace() chỉ là một tùy chọn với iframe miền của riêng bạn. Nó không hoạt động trên các trang web từ xa (ví dụ: nút twitter) và yêu cầu một số kiến ​​thức cụ thể cho trình duyệt truy cập cửa sổ con một cách đáng tin cậy.

Thay vào đó, chỉ cần xóa phần tử khung nội tuyến và tạo phần tử khung nội tuyến mới ở cùng một vị trí. Các mục lịch sử chỉ được tạo khi bạn sửa đổi thuộc tính src sau khi nó nằm trong DOM, vì vậy hãy đảm bảo đặt nó trước khi nối thêm.

Chỉnh sửa: JDandChips đề cập đúng rằng bạn có thể xóa khỏi DOM, sửa đổi và thêm lại. Xây dựng tươi là không cần thiết.

Answer 4

Cố gắng sử dụng chức năng này để thay thế iframe cũ với iframe mới được sao chép từ cũ:

function setIFrameSrc(idFrame, url) { 
    var originalFrame = document.getElementById(idFrame); 
    var newFrame = document.createElement("iframe"); 
    newFrame.id = originalFrame.getAttribute("id"); 
    newFrame.width = originalFrame.getAttribute("width"); 
    newFrame.height = originalFrame.getAttribute("height"); 
    newFrame.src = url;  
    var parent = originalFrame.parentNode; 
    parent.replaceChild(newFrame, originalFrame); 
} 

Sử dụng nó như thế này:

setIFrameSrc("idframe", "test.html"); 

Bằng cách này sẽ không thêm URL của iframe vào lịch sử trình duyệt.

Answer 5

Một phương pháp thay thế để tạo lại khung nội tuyến sẽ là xóa khung nội tuyến khỏi DOM, thay đổi src và sau đó thêm lại.

Trong nhiều cách, điều này tương tự như đề xuất replace(), nhưng tôi đã gặp một số vấn đề khi tôi thử phương pháp đó với History.js và quản lý các trạng thái theo cách thủ công.

var container = iframe.parent(); 

iframe.remove(); 
iframe.attr('src', 'about:blank'); 

container.append(iframe); 

Answer 6

Một giải pháp là sử dụng thẻ object thay vì thẻ iframe.

Thay thế này:

<iframe src="http://yourpage"/> 

Bằng cách này:

<object type="text/html" data="http://yourpage"/> 

sẽ cho phép bạn cập nhật các thuộc tính data mà không ảnh hưởng lịch sử. Điều này rất hữu ích nếu bạn sử dụng một khung khai báo như React.js nơi bạn không được phép thực hiện bất kỳ lệnh bắt buộc nào để cập nhật DOM.

tin chi tiết về sự khác nhau giữa iframe và object: Use of Iframe or Object tag to embed web pages in another

Answer 7

Giải pháp nạp đơn giản nhất và nhanh chóng
Sử dụng window.location.replace để không cập nhật lịch sử khi tải trang hoặc khung.

Đối với liên kết nó trông như thế này:

<a href="#" onclick="YourTarget.location.replace ('http://www.YourPage.com');"> 
The targeted Link</a> 

hoặc

<a href="javascript:YourTarget.location.replace ('http://www.YourPage.com');"> 
The targeted Link</a> 

Nhưng nếu bạn muốn nó không phải hành động từ liên kết mà là hành động tự động khi tải khung sau đó từ khung nội tuyến, bạn nên đặt nội dung này trong phần nội dung của tệp iframe:

onload="window.location.replace ('http://www.YourPage.com');" 

Nếu vì một lý do onload không tải trong iframe sau đó đặt tên khung mục tiêu của bạn thay vì cửa sổ trong cú pháp như thế này:

onload="YourTarget.location.replace ('http://www.YourPage.com');" 

LƯU Ý : Đối với tập lệnh này, tất cả onclick, onmouseover, onmouseout, onload và href="javascript:" sẽ hoạt động.

Answer 8

Sử dụng phương pháp replace để bỏ qua việc bổ sung các URL của khung nội tuyến để lịch sử:

HTML:

<iframe id="myIframe" width="100%" height="400" src="#"></iframe> 

JavaScript:

var ifr = document.getElementById('mIframe') 
if (ifr) { 
    ifr.contentWindow.location.replace('http://www.blabla.com') 
}