`
2008winstar
  • 浏览: 60861 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
  • chenke: 写的很好,也可以看看那这个文章,我感觉学的还可以。http:/ ...
    HTML

HTML import

 
阅读更多

<link rel="import" href="">

1、使用link标签导入

2、link标签的rel属性值为import

3、link标签的href属性值为需要导入的资源

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <link rel="import" href="imports/myimport.html">
    </head>
    <body>
        <p>This is a import demo</p>
    </body>
</html>

 

 

import关键字给资源提供的默认类型是text/html

该link标签还有一个async属性,其值为布尔类型

该link标签不依赖media属性(media属性不生效)

 

可以在JavaScript中获取到import的属性,如

var link = document.querySelector('link[rel=import]');
var heart = link.import;
var pulse = heart.querySelector('div.pulse');

 

返回的import为被引入的文档的document对象。

 

如果通过JavaScript脚本创建link import标签,可以通过onload或onerror事件监听其是否加载成功或失败,如

var link = document.createElement('link');
link.rel = 'import';
link.href = 'myimport.html';
document.head.appendChild(link);
alert(link.import) // null,因为import的内容是异步载入,需要通过下面的onload来处理
link.onload = function(){};
link.onerror = function(){};

 

 虽然,返回的import为document对象,但导入的document不能使用document.open(),document.write(),document.close()方法,使用这些方法会抛出InvalidStateError异常。

 

由于是document对象,可以使用document.head.innerHTML;document.body.innerHTML;document.querySelector()

 

被导入的html文档中也隐含着head和body,其中导入其它文档(如果有的话)的link标签会出现在document.head中,其余的会出现在document.body中。

 

在被导入的html文档中的document指的是主文档的document;

在被导入的html文档中,可以通过document.currentScript.ownerDocument来获取当前(即被导入文档自身)的document

 

将被导入html文档的内容加到主文档的示例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Demo</title>
    <link rel="import" href="imports/myimport.html">
</head>
<body>
    <script>
        var link = document.querySelector('link[rel="import"]');
        document.body.appendChild(link.import.body.querySelector('p').cloneNode(true));
    </script>
</body>
</html>

 

 浏览器的网络协议栈(network stack)会对访问相同URL的请求自动去重。这意味着从同一个URL导入的内容只会被获取一次。无论这个地址被导入多少次,最终它将只执行一次。

 

特性检测:

function supportImports() {
    return 'import' in document.createElement('link');
}

 

 

 

 

分享到:
评论

相关推荐

    HTML-Import-SHIM:HTML Import SHIM(简单HTML导入方法)是一种客户端技术,使Web文档可以声明性地将外部HTML文件(和文件片段)导入其自己的DOM中。

    HTML导入SHIM NB HTML Import SHIM最初由filament group的Scott Jehl于2019年4月出色地记录在: 的HTML导入SHIM(šimpleħTML我M端口中号ethod)是一个客户端技术,该技术使得Web文档引入外部HTML文件(和文件片段...

    TRichView HTML Import-开源

    TRichView HTML Import 是一个专为 Delphi 开发者设计的开源组件,它允许程序将 HTML 文档导入到 TRichView 组件中。TRichView 是一个强大的富文本编辑和显示控件,广泛用于 Delphi 和 C++Builder 应用程序中,提供...

    python调试文件时发生import requests报错.doc

    Python 调试文件时发生 Import Requests 报错解决方法 在 Python 调试文件时,如果碰到 Import Requests 报错,可能是因为 Python 环境中没有安装 Requests 库所致。解决这个问题需要完成 pip 安装过程,下面是详细...

    EMS Advanced Data Import VCLV3.9.2.2〖D5~XE7〗

    You can import data from MS Excel, MS Access, DBF, XML, TXT, CSV, ODF and HTML. There will be no need to waste your time on tiresome data conversion - Advanced Data Import will do the task quickly, ...

    EMS Advanced Data Import 3.11D7XE10.1-3.zip

    Data import from the most popular data formats: MS Excel 97-2007, MS Access, DBF, XML, TXT, CSV, OpenDocument format (ODS, ODT), and HTML Import of Unicode data (UTF-8, UTF-16/UCS-2, UTF-32/UCS-4). ...

    html-import:用于将HTML文档(的一部分)导入其他文档的自定义元素

    html-import&gt; 用于将HTML文档(或文档的一部分)导入其他文档的自定义元素。 如果您了解PHP,则基本上是客户端include() 。 &lt;!-- The complete file &#40;body&#41; content will be appended after the ...

    前端开源库-vulcanize-loader

    HTML Import是其中一种,用于在HTML文档中引入其他HTML文档,实现模块化和代码分离。 二、Vulcanize简介 Vulcanize是由Polymer Project团队开发的工具,它的主要任务是对HTML Import进行预处理,将多个HTML文件合并...

    import-as-and-html-modules:importAs()和HTML模块的概念证明

    import doc from './my-html-module.html' as HTMLModule ; 这可以完全替代HTML导入,从而利用JavaScript模块系统,而不是具有用于导入的并行依赖项系统。 此外,这允许将HTML模块的整个实现编写在JavaScript库中...

    import random.html

    import random.html

    URL转换为PDF的Java实现

    import org.jsoup.Jsoup; import java.io.IOException; import java.net.URL; String url = "http://example.com"; Document doc = Jsoup.connect(url).get(); ``` 一旦我们获取到HTML,可以使用如PDFBox、iText或...

    DBImport_V3 数据库导入导出,转文档工具

    5. CYQ_DBImport_DBDocument.html:这可能是工具的帮助文档或使用指南,详细解释了如何操作和配置工具。 6. System.Data.SQLite_64.rar:这可能是SQLite数据库驱动程序的64位版本,用于支持64位系统的数据库操作。 7...

    像import java类一样 import js类

    1. `SWClassTest.html` - 这可能是一个HTML文件,用于测试SWClass.js模块。它可能包含了`&lt;script&gt;`标签来引入JS文件,并展示如何在浏览器环境中使用import机制。 2. `SWClass.js` - 这很可能是博文中的核心模块,...

    01 - Import WordPress HTML.mp4_import_php_

    标题中的“01 - Import WordPress HTML.mp4_import_php_”暗示了一个关于WordPress导入HTML到PHP环境的教程视频。描述中的“PHP import tut video 01”进一步确认了这是一个系列教程的第一部分,专注于如何使用PHP来...

    python 正文内容提取

    from lxml import html import requests url = 'http://example.com' response = requests.get(url) tree = html.fromstring(response.content) # 使用XPath表达式提取内容 main_content = tree.xpath('//div[@...

    JAVA 程序 源代码 import java.applet.*;import java.awt.*

    标题中的"JAVA 程序 源代码 import java.applet.*;import java.awt.*"表明这段源代码涉及了Java编程语言,特别是与Applet和图形用户界面(GUI)相关的部分。`import`语句是Java中用于引入库或包的机制,以便能够使用...

    vite vue3 import.meta.glob动态路由

    `public`目录则通常用于存放静态资源,如HTML文件、图片等。其他配置文件如`vite.config.js`用于配置Vite,`package.json`用于管理项目依赖和脚本,而`.gitignore`、`jsconfig.json`、`README.md`和`.vscode`则是...

    lxml(python操作xml文件的库)

    from lxml.html import fromstring html_doc = '&lt;html&gt;&lt;body&gt;&lt;h1&gt;My First Heading&lt;/h1&gt;&lt;/body&gt;&lt;/html&gt;' parsed_html = fromstring(html_doc) heading = parsed_html.find('h1') print(heading.text_content()...

    Atom-import-js,简化导入js模块的工具。对Galooshi/Import的贡献.zip

    Atom是一个由GitHub开发的开源文本编辑器,它利用Web技术(如HTML、CSS和JavaScript)构建,因此可以轻松地扩展和自定义。Atom-import-js作为Atom的一个插件,无缝集成到编辑器中,提供了一种直观的界面和快捷方式,...

    xlsx2html:使用保持单元格格式从xlsx格式简单导出到html表

    from xlsx2html import xlsx2html out_stream = xlsx2html ( 'path/to/example.xlsx' ) out_stream . seek ( 0 ) print ( out_stream . read ()) 或传递文件路径 from xlsx2html import xlsx2html xlsx2html ( '...

    前端开源库-babel-plugin-transform-html-import-to-string

    **前端开源库-babel-plugin-transform-html-import-to-string** 在前端开发中,我们经常需要处理HTML模板,例如引入外部HTML文件来动态渲染页面。`babel-plugin-transform-html-import-to-string` 是一个非常实用的...

Global site tag (gtag.js) - Google Analytics