2009-08-06 22 views
51

Tôi có một chuỗi trông giống như:Làm thế nào để thay thế toàn bộ nút HTML sử dụng jQuery

<html><head><title>example</title></head><body>some example text</body></html> 

tôi nhận được chuỗi này trở như kết quả đến một yêu cầu AJAX a.

Tôi muốn trình duyệt hiển thị và hiển thị chuỗi đó. Ý tưởng sẽ là làm một việc gì đó như:

$('html').parent().html(myString); 

Vâng, điều đó không hiệu quả. Tôi đã cố gắng sử dụng một IFRAME nhưng tôi đã không tìm ra cách để có được điều đó để làm việc hoặc.

Lưu ý: Tôi không thể thay đổi chuỗi này. Nó cũng không thể cho tôi để tái tạo chuỗi này trong một cuộc gọi tiếp theo đến máy chủ (nếu không tôi chỉ có thể chuyển hướng trình duyệt đến url đó).

+0

Theo như tôi biết, không có phụ huynh nào cho phần tử 'html', IE6 và IE7 ngoại trừ. (Nhưng họ hầu như không đếm) Vì vậy, bạn cần phải nhìn vào các hoạt động mà làm việc trực tiếp trên '$ ('html')' - outerhtml âm thanh về quyền. – wombleton

Trả lời

114

Các phương pháp document.open/write/close sẽ làm những gì bạn muốn:

var newDoc = document.open("text/html", "replace"); 
newDoc.write(myString); 
newDoc.close(); 

Trừ khi bạn chuyển tham số thay thế, cuộc gọi document.open sẽ thêm lịch sử trang. Vì vậy, người dùng sẽ phải nhấp lại hai lần để truy cập trang trước đó.

+1

Cảm ơn, công trình này hoàn hảo. Bạn có biết liệu điều này có hoạt động khác với bất kỳ trình duyệt nào không phải là tức thì không? –

+1

Vì đây là một phần của DOM trong một thời gian rất dài, tôi hy vọng chúng hoạt động chính xác trên tất cả các trình duyệt hiện đại. –

+1

Hey, hiện tại có một vấn đề với firefox và làm mới khó khăn khi sử dụng giải pháp. Có một cách giải quyết hiện nay? –

13

Bạn chỉ có thể loại bỏ các thẻ html, và sau đó đặt tất cả mọi thứ bên trong phần tử html:

$('html').html(myString.replace(/<html>(.*)<\/html>/, "$1")); 
+1

Cảm ơn nhưng điều này không hoạt động. Không có vấn đề gì giá trị tôi cố gắng, kết quả của '$ ('html') html (somevalue)' là một trang trống với một DOM trống (trong IE). –

+0

Xuất hiện để làm việc trong Chrome & FF, tho! –

+4

Không cần phải xoá '$ (" html "). Html (myString)' tự động thực hiện. – inf3rno

4

biến khác để cố gắng có thể

$('html').replaceWith(myString); 

http://api.jquery.com/replaceWith/

+0

Lưu ý rằng điều này thay thế đối tượng jQuery là tốt, vì vậy nếu bạn đang giữ tài liệu tham khảo, bạn cần cập nhật chúng. –

+3

Không hoạt động. 'HierarchyRequestError: Không thể chèn nút tại điểm đã chỉ định trong hệ thống phân cấp' trong firefox. – inf3rno

+0

Hầu như cùng một kết quả như inf3rno => Node không thể thay thế chính nó – Mauro

5

Ít nhất trong firefox (47,0) giải pháp:

var newDoc = document.open("text/html", "replace"); 
newDoc.write(response); 
newDoc.close(); 

không hoạt động như đề xuất từ ​​cách nhấn nút back trên firefox vẫn tải mục nhập lịch sử trước đó - tức là toàn bộ điểm sử dụng "thay thế" là tránh người dùng nhấp vào nút quay lại của họ chỉ để được chào đón bởi chế độ xem trang trước lần cuối document.write() được gọi. Cách làm điều này mà không gây tác dụng nói trên chỉ đơn giản là gọi phương pháp trên đối tượng tài liệu trực tiếp:

document.open("text/html", "replace"); 
document.write(response); 
document.close(); 

Sử dụng tùy chọn thay thế không chỉ tránh làm đầy lịch sử người dùng với rác thải, mà còn giúp trong việc đối phó với các vấn đề phát sinh từ những cách lạ thường mà trình duyệt thường xử lý các mục lịch sử được tạo bởi javascript, đôi khi cho phép trình duyệt ghi nhật ký các thay đổi được thực hiện cho tài liệu bằng javascript trong lịch sử có thể có kết quả bất ngờ khi xử lý các hoạt động quay lại/chuyển tiếp (ví dụ: thêm 'wyciwyg: // (somenumber)' vào url sau khi thực hiện một document.write() trên tài liệu có lịch sử của nó được hoàn nguyên về trạng thái trước đó).

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