HTML导入另一个无法正确显示的HTML文件

Question

I need to essentially import another HTML file into an HTML file. 实际上，我需要将另一个HTML文件导入HTML文件。 I've tried three different setups of this, linked below, and none of them display properly. 我尝试了以下三种不同的设置，如下所示，但没有一个显示正确。 I would appreciate any help in fixing this. 对于解决此问题，我将不胜感激。 For those who are wondering why I am doing this, the HTML and other linked files are created using a program which uploads frequently and write over the old files, and I would like to do this so I can change the fonts without having to redo that every time a new copy is uploaded. 对于那些想知道为什么要执行此操作的人，HTML和其他链接文件是使用经常上传并覆盖旧文件的程序创建的，我想这样做是为了我可以更改字体而不必重做每次上传新副本时。

Here's those links: jaredcaputo.photography/1/index2.html, jaredcaputo.photography/1/index22.html, jaredcaputo.photography/1/index222.html 这些链接是：jaredcaputo.photography/1/index2.html，jaredcaputo.photography/1/index22.html，jaredcaputo.photography/1/index222.html

Index 2: 索引2：

    <html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script>
    $(function(){
      $("#includedContent").load("index.html");
    });
    </script>
  </head>

<script>
    var LR = LR || {};
</script>

<link rel="stylesheet" type="text/css" href="assets/css/normalize.css">
        <link rel="stylesheet" type="text/css" href="assets/css/main.css">
        <link rel="stylesheet" type="text/css" media="screen" title="Custom Settings" href="assets/css/custom.css" >

  <body>
     <div id="includedContent"></div>
  </body>

</html>

Index 22: 索引22：

<head>
  <link rel="import" href="index.html">
</head>

Index 222: 索引222：

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="index.html"></div>

<script>
w3IncludeHTML();
</script>

</body>
</html>

The file I'm trying to import is jaredcaputo.photography/1/index.html 我要导入的文件是jaredcaputo.photography/1/index.html

Thanks very much! 非常感谢！

Answer 1

AJAX is normally used for this. AJAX通常用于此目的。 Put this in the top of the two pages that you want to import INTO: 将其放在要导入INTO的两个页面的顶部：

$(document).ready(function(){
    $.get( "index2.html", function( data ) {
       $( "body" ).append(data);
    });    
});

It simply gets and appends the index2.html file onto the body of the current page. 它只是获取index2.html文件并将其附加到当前页面的正文中。

Answer 2

The samples are working fine, The page is showing in the DOM, the only part that isnt is the pages body and that's because you are trying to put a <body> element inside a <div> and another page that already has a <body> . 这些示例工作正常，该页面在DOM中显示，唯一不存在的部分是页面主体，这是因为您试图将<body>元素放入<div>而另一个页面已经具有<body> 。

You either need to modify the embedded document to be an incomplete HTML doc without the head and body tags, or you need to use an IFrame to allow the child content to have its own DOM. 您要么需要将嵌入式文档修改为不带head和body标签的不完整HTML文档，要么需要使用IFrame允许子内容具有自己的DOM。

Answer 3

Why not just use HTML imports as described in the Web Components spec ? 为什么不按照Web组件规范中的说明使用HTML导入？

If you're concerned with browser compatibility, there's also a polyfill , which you can learn about here . 如果您担心浏览器的兼容性，那么还有一个polyfill ，您可以在此处了解有关信息。

HTML导入另一个无法正确显示的HTML文件

问题描述

3 个解决方案

解决方案1
2 2016-04-30 19:15:56

解决方案2
2 已采纳 2016-04-30 19:55:29

解决方案3
1 2016-04-30 18:47:11

HTML导入另一个无法正确显示的HTML文件

问题描述

3 个解决方案

解决方案1 2 2016-04-30 19:15:56

解决方案2 2 已采纳 2016-04-30 19:55:29

解决方案3 1 2016-04-30 18:47:11

解决方案1
2 2016-04-30 19:15:56

解决方案2
2 已采纳 2016-04-30 19:55:29

解决方案3
1 2016-04-30 18:47:11