jQuery.html(）未正确设置内容

jQuery .html() not setting content correctly?

本文关键字：设置 html jQuery      更新时间：2023-09-26

下面是我准备的一个例子，可以更容易地讲述这个问题。

http://codepen.io/anon/pen/EVpYXm

如您所见，初始<html>设置为显示文本：

"这是旧的html！"

它将整个内容设置为变量myHtml中的数据。然而，我注意到：

样式不是从CCD_ 3元素携带的。此外，<body>元素在某种程度上根本没有创建！

这是sring myHtml，整理后显示为html:

<html>
<head>
<title>Title Here</title>
<link href='style.css' rel='stylesheet' type='text/css'/>
</head>
<body style='background-color: red'>
<div>Div!</div>
</body>
</html>

我已经意识到，当链接元素被删除时，一切都很好。试试看吧。

在过去的几个小时里一直被这个问题困扰着。正在寻找结果。

这是完整的代码：

页面html:

<html>
  This is the old html!
</html>

javascript:

$(function(){
  var myHtml = "<html><head><title>Title Here</title><link href='style.css' rel='stylesheet' type='text/css'/></head><body style='background-color: red'><div>Div!</div></body></html>"
  $("html").html(myHtml);
})

这个问题的主要目的是了解这种行为的原因，并找到最佳解决方案。

问题是，当您使用jQuery的html(val)时，它会执行以下操作：

html: function(value) {
  /* ... */
  // See if we can take a shortcut and just use innerHTML
  if ( typeof value === "string" && !rnoInnerhtml.test( value ) && /* ... */) {
    /* ... */ elem.innerHTML = value; /* ... */
  }
  /* ... */
}

也就是说，它使用正则表达式rnoInnerhtml检查字符串，即

rnoInnerhtml = /<(?:script|style|link)/i

因此，大概是为了避免插入样式表，jQuery避免了innerHTML，而使用domManip做了一些复杂的事情。

我建议使用本机innerHTML:

$("html").prop('innerHTML', myHtml);


var myHtml = "<head><title>Title Here</title><link href='style.css' rel='stylesheet' type='text/css'/></head><body style='background-color: red'><div>Div!</div></body>"
$("html").prop('innerHTML', myHtml);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is the old html!

或者搭配香草js:

document.documentElement.innerHTML = myHtml;


var myHtml = "<head><title>Title Here</title><link href='style.css' rel='stylesheet' type='text/css'/></head><body style='background-color: red'><div>Div!</div></body>"
document.documentElement.innerHTML = myHtml;
This is the old html!

问题是在根html元素中附加了一个html元素，这是未定义的行为，浏览器无法可靠地呈现。从myHtml字符串中去掉打开和关闭<html>和</html>标签，它就工作了！

工作演示

$(function() {
  var myHtml = "<head><title>Title Here</title></head><body style='background-color: red; '><div>Div!</div></body>"
  $('html').html(myHtml);
})

或者，您可以保留标记并直接写入document对象，这将打开一个新的流并覆盖以前的文档。

// ...
document.write(myHtml);
相关文章：