2010-05-20 40 views
5

Tôi có một số sử dụng jQuery.clone() để lấy html của một trang và sau đó thêm nó vào thẻ trước. Nó hoạt động chính xác trong Firefox và Chrome, nhưng không có gì xảy ra trong IE:jQuery.clone() Vấn đề IE

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<script> 
$(function(){ 

    $('button').click(function(){ 
    var $clone = $('html').clone(); 
    $('#output').text($clone.html()); 
    }); 

}); 
</script> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
</style> 
</head> 
<body> 
    <button>run test</button> 
    <pre id="output"></pre> 
</body> 
</html> 

Có lỗi nào với IE ngăn chặn điều này hoặc tôi đang làm điều gì sai?

(Tôi cần phải sao chép nó bởi vì tôi đang làm một số thay đổi nó trước khi xuất nó)

+2

Bạn đang thêm tương đương với toàn bộ tài liệu (bao gồm '', '') * trở lại vào * tài liệu hiện tại và tự hỏi tại sao nó không hoạt động? Tôi ngạc nhiên rằng nó hoạt động ở tất cả, trong bất kỳ trình duyệt nào. –

+0

Bạn đã thử sử dụng nội dung() chưa? http://api.jquery.com/contents/ – vsync

+0

@Roatin Marth - Anh ấy đang sử dụng '.text()' và đặt nó vào vùng chứa 'trước'. Rõ ràng anh ta dự định hiển thị đánh dấu trang trong '# output'. – user113716

Trả lời

2

Nếu bạn muốn chỉ hiển thị nội dung trang trong trang, hãy thử này:

$('button').click(function(){ 
    $('#output').empty().html(('<html>\n ' + $('html').html() + '\n</html>') 
    .replace(/&/gm, '&amp;') 
    .replace(/</gm, '&lt;') 
    .replace(/>/gm, '&gt;') 
    .replace(/\r/gm, '') 
    .replace(/\n/gm, '<br>') 
    ); 
}); 

Điều đó phù hợp với tôi trong Chrome, Firefox và IE8.

+0

thanks :) nhưng tôi cũng cần phải loại bỏ một số yếu tố từ html gốc, làm thế nào tôi có thể làm điều đó với bạn phương pháp? –

+0

Vâng, bạn có thể thực hiện thao tác 'clone()' của bạn, lộn xộn với nó theo cách bạn muốn, và sau đó làm việc với giá trị '.html()' của kết quả. – Pointy

7

Điều này dường như hoạt động trong IE, Firefox & Safari. Tôi đang gọi phương thức javascript DOM API cloneNode() thay vì jQuery clone() của jQuery. Không biết tại sao nó hoạt động. Bạn có lẽ nên làm một số thử nghiệm trình duyệt khác.

var $scripts = $('script');   // Cache all scripts in the document 

var html = $('html').get(0).cloneNode(true); // Clone HTML using DOM API 

var $html = $(html);      // Make jQuery object from cloned HTML 

$('script', $html).each(function(i) {  // Loop through scripts in $html 
    this.text = $scripts.get(i).innerHTML; // replacing content with that 
});           // from the cached $scripts 

$('#output').empty().text($html.html()); // Append to #output 
+0

gần như, nhưng nó loại bỏ các tập lệnh nhúng. như nếu tôi có . chỉ còn lại thẻ. bất kỳ ý tưởng? –

+0

OK, tôi nghĩ mình đã hiểu rồi. Vì IE vui lòng để lại cho chúng ta các thẻ 'script' trống, tất cả những gì chúng ta cần làm là cache những thứ đầu tiên, sao chép' html' của chúng ta, sau đó cập nhật các thẻ 'script' trống rỗng với nội dung của các thẻ được lưu trữ. Dường như làm việc. Tôi đã cập nhật câu trả lời của mình. Cho tôi biết. – user113716

1

Tôi đã nhận thấy một sự khác biệt lớn về bản sao trong IE và các ứng dụng khác. Trong IE, nó xuất hiện để sao chép mọi thứ, bao gồm cả các thẻ script. Vì vậy, nếu bạn có mã bên trong thẻ kịch bản lệnh mã hóa, nó sẽ được khởi tạo lại. Trong trường hợp của câu hỏi này nó có thể gặp phải một vòng lặp vô hạn vì nó sẽ liên tục gọi mã để nhân bản chính nó.

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