假设我有一个 html 页面 (assets.html)，其中有一些自定义元素，例如按钮。这些按钮由 html/css 和图像组成。
是否可以导入“assets.html”并“抓取”按钮并克隆/复制它并将其放入访问 asset.html 的页面中？
我希望能够拥有一个包含大量界面组件的页面，能够加载该页面并从中获取我想要的任何组件。
这可能吗？什么方法可以保证 css 和图像与导入的 html 一起保留？
最佳答案
HTML 导入
您可以使用HTML Imports导入外部 HTML 页面。将链接放在主文档的头部。
<head>
<link rel="import" href="assets.html" id="assets">
</head>
导入的文档在下载时进行解析(并执行其中的脚本)，但元素不会导入到 DOM 树中。相反，它以 HTML 文档的形式存储。
然后您可以使用 import 抓取导入文档中的任何元素<link>的属性(property)元素。使用cloneNode(true)获取导入 Assets 的深拷贝。
<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 编辑草案。有a polyfill来自WebComponents.js team适用于其他浏览器。
HTML 模板
您还可以一次导入多个元素，方法是将它们放入 <template> 中。元素。克隆 content <template>的属性(property)元素:
<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>关于javascript - 从外部文件导入单独的 html 资源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39902471/