2009-08-20 59 views
27

Có cách nào để bỏ tải một trang đã được tải bên trong khung nội tuyến không? Tôi không muốn thay đổi iframe src thành một trang trống nếu có thể. Tôi về cơ bản tìm kiếm một cái gì đó mà sẽ làm một cái gì đó như thế này $('#frameID').attr("src",""); ngoại trừ mã đó dường như không rõ ràng trang đã tải trước đó.Dỡ bỏ/Xóa nội dung khỏi iFrame

Có chức năng "unload" mà tôi có thể gọi sẽ đặt lại iframe để không có nội dung nào được tải bên trong không?

+4

bạn chỉ có thể xóa và tạo một iframe mới. –

+5

'$ (" # frameID "). Attr (" src "," ")' hoạt động tốt cho tôi trên Firefox 11. Nếu bạn thực sự muốn một iframe trống, bạn cũng có thể thử đặt 'src' thành' about: blank' thay vì một chuỗi rỗng. –

+0

@IlmariKaronen 'about: blank' works wonders !!! – TheVillageIdiot

Trả lời

24

Các giải pháp khác sử dụng innerHTML, không phải lúc nào cũng hoạt động trong XHTML. Họ cũng chỉ rõ ràng document.body (mọi thứ trong số <head> vẫn còn hiện diện). Đây là một giải pháp mà sử dụng DOM:

var frame = document.getElementById("myFrame"), 
frameDoc = frame.contentDocument || frame.contentWindow.document; 
frameDoc.removeChild(frameDoc.documentElement); 

giải pháp này sử dụng innerHTML:

var frame = document.getElementById("myFrame"), 
frameDoc = frame.contentDocument || frame.contentWindow.document; 
frameDoc.documentElement.innerHTML = ""; 
+1

cảm ơn tôi đã sử dụng giải pháp này – Dan

+1

Giải pháp tốt, thực sự đánh giá cao !! –

+2

Như [AJ Ostergaard] (http://stackoverflow.com/users/63306/aj-ostergaard) được chỉ ra trong [edit suggestion] (http://stackoverflow.com/suggested-edits/227353), điều này chỉ có thể hoạt động nếu khung nội tuyến nằm trên cùng một tên miền với trang chính. Tôi đã từ chối bản chỉnh sửa bị thất lạc, nhưng quan điểm của anh ấy vẫn chính xác và đáng nhắc đến. –

4

$ ('# frameID'). ContentWindow.document.body.innerHTML = '';

Giống như với bất kỳ khung nội tuyến nào, điều này chỉ hoạt động nếu bạn ở trên cùng một miền.

+1

bạn có thể làm '.contentWindow'? – geowa4

1

Thứ nhất, nhận được tài liệu của khung:

var frame = $('#frameId').get(0); 
var frameDoc = frame.contentDocument || frame.contentWindow.document; 

Sau đó, trống nó:

frameDoc.getElementsByTagName('body')[0].innerHTML = ""; 

Tôi nghĩ rằng điều này sẽ làm việc quá:

$('body', frameDoc).html(""); 

Bây giờ, có lẽ bạn muốn làm điều gì đó với bất kỳ tập lệnh nào có thể được tải trong phần đầu, nhưng điều này sẽ giúp bạn bắt đầu.

2
$("#frameId").contents().find("div#SomeDIVinsideFrame").remove(); // removes some div content inside iframe 

$("#FrameId").remove(); // removes frame 

có cùng một vấn đề để hiển thị tin tức iframe trên http://www.livepage.info

1

Bạn có thể kích hoạt sự kiện dỡ bỏ của iframe đó như

$('body').trigger('unload'); 

và sau đó xóa khung nội tuyến khỏi cửa sổ chính và tải lại iframe mới bằng src mới khi cần.

$('#iframe_wrapper').html(''); 
$('#iframe_wrapper').html('<iframe src="...">'); 
0
function getContentFromIframe(iFrameName) 
{ 

var myIFrame = document.getElementById(iFrameName); 
var content = myIFrame.contentWindow.document.body.innerHTML; 

//Do whatever you need with the content  

} 

nó chắc chắn sẽ làm việc !!!!!!!!!!!!!!!!

7

Hãy thử điều này,

$("iframe").contents().find("body").html(''); 

Nó chỉ xóa innerHTML của thẻ của bạn bên trong và không thực sự dỡ bỏ iframe để bạn có thể tái sử dụng iframe của bạn mà không cần tải lại nó và làm việc của nó trong tất cả các trình duyệt và khá đơn giản !!

+3

Nhưng điều này chỉ hoạt động nếu khung nội tuyến được tải từ cùng một miền, phải không? – Robert

+0

có, bạn không thể làm việc với tên miền khác nhau !!! –

2

Xóa và tạo lại khung nội tuyến là giải pháp thông minh nhất ở đây (không vi phạm các câu trả lời khác).

Bằng cách loại bỏ chỉ innerHTML của iframe bạn không tuôn các biến lưu trữ, eventListeners ràng buộc, vv

Hãy cẩn thận với điều này, nó có thể gây ra rất nhiều vấn đề (như rò rỉ bộ nhớ, nhiều trigger của cùng một sự kiện, vv).

0

Điều này làm việc cho tôi, xóa mọi thứ trong thẻ iframe; cơ thể, người đứng đầu, html và tất cả:

$("iframe").contents().empty(); 
4

Nếu bạn tạo động nội dung của khung nội tuyến của bạn, tất cả các kịch bản/biến nạp sẽ bị rò rỉ từ một ghi khác. Do đó, giải pháp được cung cấp bởi @Eli để xóa phần tử dom sẽ không hoạt động.

Nói tóm lại:

Để làm sạch, quấn iframe của bạn thành một phần tử div và thay thế nội dung dom của nó.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <div id="wrapper"> 
    <iframe id="test"></iframe> 
    </div> 
</body> 
</html> 

Để làm sạch:

var wrapper = document.getElementById('wrapper'); 
wrapper.innerHTML= "<iframe id='test'></iframe>"; 

Cụ thể: Demo rò rỉ kịch bản

Ví dụ về rò rỉ kịch bản giữa hai iframe viết (thử nghiệm với Chrome):

var iframe = document.getElementById('test'); 

// define variable 'a' 
var content = "<html><body><script>var a=555;</script></body></html>"; 

iframe.contentWindow.document.open(); 
iframe.contentWindow.document.write(content); 
iframe.contentWindow.document.close(); 

// uncomment this to clean the iframe 
//document.getElementById('wrapper').innerHTML= "<iframe id='test'></iframe>"; 

// write 'a' if defined 
var content2 = "<html><body><div id='content'></div><script>document.getElementById('content').innerHTML=typeof a === 'undefined' ? 'undefined' : a;</script></body></html>"; 

var iframe2 = document.getElementById('test'); 
iframe2.contentWindow.document.open(); 
iframe2.contentWindow.document.write(content2); 
iframe2.contentWindow.document.close(); 

Nếu bạn chạy mã này, bạn sẽ thấy đầu ra của iframe thứ hai là 555 mặc dù iframe đã được xác định trong iframe đầu tiên.

Nếu bạn bỏ ghi chú phần giữa, nó sẽ hoạt động như mong đợi.

câu hỏi liên quan: Avoiding memory leaks loading content into an iframe

1
var frame = document.getElementById("myframe"); 
frame.src = "about:blank"; 

này đã làm việc từ tôi và ngăn chặn rò rỉ bộ nhớ quá. Trong trường hợp của tôi, tôi cũng phải phá hủy cha mẹ. Trong trường hợp đó, bạn phải hủy bỏ cha mẹ với một số chậm trễ để ngăn chặn rò rỉ bộ nhớ

+0

Bởi 'cha mẹ' bạn có nghĩa là trang mẹ hoặc phần tử cha trong DOM có chứa thẻ IFRAME không? – donohoe

+0

Phần tử gốc chứa iframe – Antonis

Các vấn đề liên quan