jQuery.clone() IE problem

2020-04-05 20:58发布

站内问答 / JavaScript
1698 3 4

I'm have some that uses jQuery.clone() to get the html of a page and then add it to a pre tag. It works correctly in Firefox and Chrome, but nothing happens in 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>

Is there any know bug with IE that prevents this, or am I doing something wrong?

(I need to clone it because I'm doing some changes to it before outputting it)

3条回答
祖国的老花朵
2楼-- · 2020-04-05 21:27

If you want to just show the page text in the page, try this:

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

That works for me in Chrome, Firefox, and IE8.

查看更多
0人赞 添加讨论(0) 举报
Luminary・发光体
3楼-- · 2020-04-05 21:40

I have noticed one big difference in what clone does in IE and others. In IE, it appears to clone everything, including script tags. Therefore if you have code inside the script tag that instantiates code, it will be instantiated again. In the case of this question it is probably encountering an infinite loop since it will continually call the code to clone itself.

查看更多
0人赞 添加讨论(0) 举报
别忘想泡老子
4楼-- · 2020-04-05 21:51

This seems to work in IE, Firefox & Safari. I'm calling the javascript DOM API cloneNode() method instead of jQuery's clone(). Don't know why it works. You should probably do some more browser testing.

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人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)