Question

我有一些使用jQuery.clone（）获取页面的html，然后将其添加到预标签。它在Firefox和Chrome中正常运行，但在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>

是否有任何知道IE的错误阻止了这个，或者我做错了什么？

（我需要克隆它，因为我在输出之前对它进行了一些更改）

Answer 1

这似乎适用于IE，Firefox＆amp;苹果浏览器。我正在调用javascript DOM API cloneNode()方法而不是jQuery的clone()。不知道为什么会这样。你应该做更多的浏览器测试。

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

Answer 2

如果您只想在页面中显示页面文字，请尝试以下操作：

$('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>')
   );
});

这适用于Chrome，Firefox和IE8。

Answer 3

我注意到克隆在IE和其他方面的作用有很大的不同。在IE中，它似乎克隆了所有内容，包括脚本标记。因此，如果脚本标记中的代码实例化代码，它将再次实例化。在这个问题的情况下，它可能遇到无限循环，因为它将不断调用代码来克隆自己。

jQuery.clone（）IE问题

3 个答案: