从外部文件导入单独的 html 资产

Question

假设我有一个 html 页面 (assets.html)，上面有一些自定义元素，例如按钮。这些按钮由 html/css 和一张图片组成。

是否可以导入 "assets.html" 和 'grab' 按钮以及 clone/copy 并将其放入访问 assets.html 的页面中？

我希望能够拥有一个包含大量界面组件的页面，能够加载该页面并从中获取我想要的任何组件。

可能吗？什么方法可以保证 css 和图像将与导入的 html 一起保留？

Answer 1

HTML 进口

您可以使用 HTML Imports 导入外部 HTML 页面。将 link 放在主文档的头部。

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

导入的文档在下载时被解析（并执行其中的脚本）但元素没有导入到 DOM 树中。相反，它以 HTML 文档的形式存储。

然后您可以使用 <link> 元素的 import 属性获取导入文档中的任何元素。使用 cloneNode(true) 获取导入资产的深层副本。

<script>
    var importedDoc = document.querySelector( 'link#assets' ).import
    var button = importedDoc.querySelector( 'button#btn1' ).cloneNode( true )
</script>

您可以使用 appendChild() 将克隆的元素添加到主文档中。

您还可以导入一个 <style> 元素来获取 CSS 资产：

document.head.appendChild( importedDoc.querySelector( 'style#st1' ).cloneNode( true ) )

注意： HTML Imports 是 W3C 编辑器的草案，在 Chrome 和 Opera 中本地实现。 a polyfill from the WebComponents.js team 可用于其他浏览器。

HTML 模板

您还可以通过将多个元素放在 <template> 元素中来一次导入多个元素。克隆 <template> 元素的 content 属性：

<template id="templ1">
    <style>
       #btn2 { color: red ; }
    </style>
    Name: <input id="name1">
    <button id="btn2" onclick="alert('Hello '+name1.value)">Say Hello</button>
</template>

<script>
    var template = importedDoc.querySelector( '#templ1' )
    document.body.appendChild( template.content.cloneNode( true ) )
</script>

var template = document.querySelector( '#templ1' )
document.body.appendChild( template.content.cloneNode( true ) )

<template id="templ1">
    <style>
       button { color: red ; }
    </style>
    Name: <input id="name1">
    <button onclick="alert('Hello '+name1.value)">Say Hello</button>
</template>

从外部文件导入单独的 html 资产

Importing separate html assets from external file

javascript

assets

dynamic

html5-template

html-imports