html 以包含另一个 html

Question

我喜欢 Angular 管理组件的方式。 我的意思是单独的 html、scss 和 js 文件。 但我不想使用 Angular、Webpack 或 jQuery。 我希望仅依赖本机浏览器 api 编写一个简单的 Web 应用程序。 我快到了，但唯一阻碍我的是将 html 模板包含到 index.html 中。 我可能可以做的一种方法是编写一个脚本，将所有模板附加到 index.html 的末尾。 我对其进行了测试，效果很好。 但我想知道是否有任何我不知道的更简单的方法。 请注意我需要零依赖。

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WSLD</title>
    <script type="module" src="my-summary.js"></script>
    <script type="module" src="my-detail.js"></script>
</head>
<body>
<my-summary></my-summary>
</body>
</html>

<template id="my-summary">
    <my-detail></my-detail>
    <my-detail></my-detail>
</template>

<template id="my-detail">
    <div>hello there</div>
</template>

我的摘要.js

customElements.define('my-summary',
    class extends HTMLElement {
        constructor() {
            super();
            const template = document.querySelector('#my-summary').content;
            this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true));
            // this.appendChild(template.cloneNode(true));

            const details = this.shadowRoot.querySelectorAll('my-detail');
            console.log(details);
            details[0].setAttribute('a', '123');
        }
    }
);

我的详细信息.js

customElements.define('my-detail',
    class extends HTMLElement {
        constructor() {
            super();
            const template = document.querySelector('#my-detail').content;
            const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true));
            // this.appendChild(template.cloneNode(true));
        }

        static get observedAttributes() {
            return ["a"];
        }

        attributeChangedCallback(name, oldValue, newValue) {
            console.log(name, oldValue, newValue);
        }
    }
);

Answer 1

服务器端包含 (SSI)允许您将 HTML 文件包含到 HTML 文件中。 它是大多数 Web 服务器的成熟功能。 启用它并将包含语句放入您的 HTML 代码中：

<!--#include file="my-summary.html" -->
<!--#include file="my-detail.html" -->

有时 SSI 只是为扩展名为“.shtml”的文件启用。

这是最快的解决方案，因为它不需要额外的请求。 所有 HTML 代码都随第一个请求一起交付。

Answer 2

通常，当我编写 WebComponents 时，我会在我的 js 文件中创建模板标记。

例如：

const template = document.createElement('template');
template.innerHTML = `<div>hello there</div>`;

所以我可以更好地控制我的模板。

我附上一个链接，其中包含一个精心编写的 WebComponents 指南： https ://dev.to/thepassle/web-components-from-zero-to-hero-4n4m

Answer 3

我将使用fetch API 从服务器获取模板的内容并将内容放入 DOM 节点中。 像这样的东西：

我的详细信息.js

(() => {
  let templateContent = null;
  let onLoaded = [];
  (() => {
    let templateContainer = document.createElement("div");
    fetch("./my-detail.html")
      .then(res => res.text())
      .then(text => {
        templateContainer.innerHTML = text;
        templateContent = templateContainer.firstChild.content;
        onLoaded.forEach(cb => cb());
        loaded = true;
    });
  })();
  customElements.define(
    "my-detail",
    class extends HTMLElement {
      loaded = false;
      constructor() {
        super();
        const onLoad = () => {
          this.attachShadow({ mode: "open" }).appendChild(
            templateContent.cloneNode(true)
          );
        };
        if (templateContent != null) {
          onLoad();
        } else {
          onLoaded.push(onLoad);
        }
      }

      static get observedAttributes() {
        return ["a"];
      }

      attributeChangedCallback(name, oldValue, newValue) {
        console.log(name, oldValue, newValue);
      }
    }
  );
})();

我的详细信息.html

<template id="my-detail">
    <div>hello there</div>
</template>

显然，您可以创建一些小的实用程序函数来简化此逻辑，这样就不会在您的应用程序中产生大量重复的代码。

html 以包含另一个 html

问题描述

3 个解决方案

解决方案1
1 2019-12-25 23:29:44

解决方案2
0 2019-12-25 23:06:19

解决方案3
0 2019-12-25 23:14:14

html 以包含另一个 html

问题描述

3 个解决方案

解决方案1 1 2019-12-25 23:29:44

解决方案2 0 2019-12-25 23:06:19

解决方案3 0 2019-12-25 23:14:14

解决方案1
1 2019-12-25 23:29:44

解决方案2
0 2019-12-25 23:06:19

解决方案3
0 2019-12-25 23:14:14