如何使用 jquery 附加整个 html 文件答案

【问题标题】：How to append a whole html file with jquery如何使用 jquery 附加整个 html 文件
【发布时间】：2017-04-14 03:20:23
【问题描述】：

我有一个这样的html文件，

<!DOCTYPE html>
 <html lang="en">
  <head>
   //some content
  </head>
  <body>
   //some content
  </body>
 </html>

我的问题是如何使用 jquery 将这个文件作为一个整体加载。我试过了 append 函数，但它不起作用.. 我搜索了很长一段时间的解决方案，但只是找到了很多方法来附加 html 文件的某些部分，比如元，链接，而不是整个文件。

我可以用 jquery 做吗？

【问题讨论】：

你可以使用.load()方法
我能问一下你为什么要这样做吗？也许你问错了问题。最终目标是什么？也许你做错了。
我正在使用 3D 引擎 playcanvas 制作一个项目。使用这个引擎，我必须加载带有文档的html文件，否则它不会显示我用html + css编写的ui。我知道这样做的一个简单方法是使用 jquery，但我不知道如何准确地加载或附加整个 html。这就是我提出这个问题的原因。
文件应该加载到哪里？
请查看：w3schools.com/jquery/ajax_load.asp

标签： javascript jquery

【解决方案1】：

index.html 之类的

<iframe src="filename.html"></iframe>

文件名.html

<!DOCTYPE html>
 <html lang="en">
  <head>
   //some content
  </head>
  <body>
   //some content
  </body>
 </html>

【讨论】：

OP 正在尝试用导入的document 替换现有的document，而不是在<iframe> 元素中显示导入的document。
我以为他是在“附加”它，这意味着将它添加到末尾或子元素等中
见stackoverflow.com/questions/43404728/…, stackoverflow.com/questions/43404728/…

【解决方案2】：

您可以使用<link> 元素，其中rel 属性设置为import，href 设置为文件路径，type 设置为"text/html"。使用XMLSerializer() 实例.serializeToString() 替换document .doctype 属性作为参数从导入的<!DOCTYPE> 声明document； document.write() 和 link 元素的 .import.documentElement.outerHTML 属性作为参数，用导入的 .doctype 和 document 替换现有的 .doctype 和 <html> 节点。

<!DOCTYPE html>
 <html lang="en">
  <head>
   <link id="doc" rel="import" href="https://gist.githubusercontent.com/guest271314/9921cb52b143437b23f23fa32284ca35/raw/86532c043b666bce15b33c91dc29e98615dd4e25/replacementDocument.html" type="text/html" />
  </head>
  <body>
   //original content
   <button>load html document</button>
   <script>
   var link = document.getElementById("doc");
   document.querySelector("button")
   .onclick = function() {
     // http://stackoverflow.com/a/30565562/
     var dt = new XMLSerializer().serializeToString(link.import.doctype);  
     document.write(dt, link.import.documentElement.outerHTML);
     document.close();
   }
   </script>
  </body>
 </html>

【讨论】：

在 Firefox、IE11 或 Edge 中不起作用。似乎可以在 Chrome 中使用。