Include html in another html file

后端未结

关注

 6  1292

I have a html \"head\" template and a navigation template that I want to include in all my other html files for my site. I found this post:

Include another HTML fi

相关标签:

6条回答

我寻月下人不归

2020-12-02 21:25
I needed to include many files. So I created the following script:
```
<script>
  $(function(){
    $('[id$="-include"]').each(function (e){
        $(this).load("includes\\" + $(this).attr("id").replace("-include", "") +  ".html");
    });
  });
</script>
```
Use div, for example, to put a placeholder for the insertion.
```
<div id="example-include"></div>
```
Created folder "includes" for all files I needed to include. Created file "example.html". It works with any number of includes. You just have to use the name convention and put all included files in the right folder.
0 讨论(0)
发布评论:

提交评论
- 加载中...

刺人心

2020-12-02 21:27

For anyone interested in a Web Component approach:

<html-include src="my-html.html"></html-include>

And the corresponding JS:

class HTMLInclude extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = "Loading...";
    this.loadContent();
  }

  async loadContent() {
    const source = this.getAttribute("src");
    if (!source) {
      throw new Error("No src attribute given.");
    }
    const response = await fetch(source);
    if (response.status !== 200) {
      throw new Error(`Could not load resource: ${source}`);
    }
    const content = await response.text();
    this.innerHTML = content;
  }
}

window.customElements.define("html-include", HTMLInclude);

Note that it is possible to do some nice things with a shadow DOM to make sure styling of loaded content does not influence the outer page.

The above code is pretty "modern" JS and you might not want to use the above code directly without some polyfills/babel transpilation.

0 讨论(0)

北恋

2020-12-02 21:31

Using HTML tag.

I have faced similar problem , then I used

<iframe src = "b.html" height="80px" width="500px" >

0 讨论(0)
发布评论:

提交评论
- 加载中...
星月不相逢

2020-12-02 21:47
Method 1:

I think it would be best way to include an html content/file into another html file using jQuery.

You can simply include the jQuery.js and load the HTML file using $("#DivContent").load("yourFile.html");

For example
```
<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#DivContent").load("another_file.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="DivContent"></div>
  </body> 
</html>
```
Method 2:

There are no such tags available to include the file but there are some third party methods available like this:
```
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

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

<script>
w3IncludeHTML();
</script>

</body>
</html>
```
Method 3:

Some people also used server-side-includes (SSI):
```
 
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
隐瞒了意图╮

2020-12-02 21:47
Use <object> tag:
```
<object data="filename.html"></object>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

别跟我提以往

2020-12-02 21:50

This is similar to another custom tag solution, but this one uses the text between the opening and closing tags as the include path/url. The other solution uses the src attribute instead.

<html-include> ./partials/toolbar.html </html-include>

The element implementation's a little trickier:

# -- ./js/html-include.js --

class HTMLInclude extends HTMLElement {
    constructor(src) {
        super();
        this.attachShadow({mode: "open"});
        if (src) { 
            this.textContent = src;
        }
        setTimeout(() => this._load());
    }
    async _load() {
        let src = this.textContent.trim();

        if (!src) {
            throw new Error("URL missing between <html-import> tags.");
        } 
        let rsp = await fetch(src);

        if (rsp.status != 200) {
            throw new Error(`Failed to load file (${src}) for <html-import>.`);
        }
        this.shadowRoot.innerHTML = await rsp.text();
    }
}
customElements.define("html-include", HTMLInclude);

The setTimeout() was necessary because this.textContent, if accessed too early, can include all the preceding text of the page (seen on Chrome/Chromium). Deferring the access fixes that.

This is what it looks like incorporated in a page:

<html>
    <head>
        <link rel="stylesheet" href="./css/index.css">
        <script type="text/javascript" src="./js/html-include.js"></script>
    </head>
    <body>
        <html-include> ./partials/toolbar.html   </html-include>
        <html-include> ./partials/side-menu.html </html-include>
        <html-include> ./partials/statusbar.html </html-include>
    </body>
</html>

CSS styles should be properly applied to the newly imported HTML.

This element can also be created from JS by passing it the URL to the import file.

let wgthost = document.getElementById("tgt");
wgthost.appendChild(new HTMLInclude("./partials/mywidget.html"));

0 讨论(0)