Question

我们说我有一个html页面（assets.html），它有一些自定义元素，如按钮。按钮由html / css和图像组成。

是否可以导入＆＃34; assets.html＆＃34;并且＆＃39;抓住＆＃39;按钮并克隆/复制它并将其放入访问assets.html的页面？

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

有可能吗？什么方法可以保证使用导入的html保存css和图像？

Answer 1

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是一个W3C编辑器的草案，在Chrome和Opera中实现。来自a polyfill的WebComponents.js team可用于其他浏览器。

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>

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

1 个答案: