jQuery .html() 没有正确设置内容？

Question

这是我准备更轻松地讲述问题的示例。

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

“这是旧的html！”

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

样式不是从<body>元素携带的。 此外， <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);
})

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

Answer 1

问题是，当您使用 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!

或者使用 vanilla-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!

Answer 2

问题是您在根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);

jQuery .html() 没有正确设置内容？

问题描述

2 个解决方案

解决方案1
1 2015-11-02 01:46:30

解决方案2
0 2015-11-02 01:54:49

jQuery .html() 没有正确设置内容？

问题描述

2 个解决方案

解决方案1 1 2015-11-02 01:46:30

解决方案2 0 2015-11-02 01:54:49

解决方案1
1 2015-11-02 01:46:30

解决方案2
0 2015-11-02 01:54:49