2

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

是否可以导入“assets.html”并“抓取”按钮并将其克隆/复制并将其放入访问 assets.html 的页面中？

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

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

4

1 回答 1

3

HTML 导入

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

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

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

import然后，您可以使用元素的属性抓取导入文档中的任何<link>元素。用于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 是在 Chrome 和 Opera 中本地实现的 W3C 编辑器草案。WebComponents.js 团队有一个可用于其他浏览器的polyfill。

HTML 模板

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

<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>

于 2016-10-08T15:31:51.203 回答