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