页面中如何引用外部的HTML(四种方法)

一、总结

一句话总结:a、iframe标签        b、ajax引入代码片段        c、link import的方法导入        d、requirejs

1、引入外部文件的四种方法?

a、iframe标签

b、ajax引入代码片段

c、link import的方法导入

d、requirejs

二、如何在页面引用外部的HTML?

转载 https://segmentfault.com/a/1190000010943143
在页面内部应用外部的html片段,是一个很常见的用法,那么有哪些方法可以实现呢?

根据情况使用不同的方法。

iframe

如果是一个完整的外部页面(有完整的html,head,body),可以考虑用iframe。

<iframe src="test.html"></iframe>

ajax

如果仅仅是一个代码片段,也可以用ajax

$.get('test.html',function(html){
//
});
$.when(
$.get('test1.html'),
$.get('test2.html'),
).then(function(html1,html2){
console.log(html1[0]);
console.log(html2[0]);
});

link import的方法导入

<link rel="import" href="test.html">

if (typeof document.querySelector("link[rel = 'import']").import == 'object') {
var html = document.querySelector("link[rel = 'import']").import.head.innerHTML;
} else {
$.get('test.html', function(html) {
});
}

requirejs

最后,也可以使用requirejs…(比ajax方便)

 

页面中如何引用外部的HTML(四种方法)的更多相关文章

  1. Java中取小数点后两位(四种方法)

    摘自http://irobot.iteye.com/blog/285537 Java中取小数点后两位(四种方法)   一 Long是长整型,怎么有小数,是double吧     java.text.D ...

  2. android中退出当前应用程序的四种方法

    android中退出当前应用程序的四种方法 [IT168 技术]Android程序有很多Activity,比如说主窗口A,调用了子窗口B,如果在B中直接finish(), 接下里显示的是A.在B中如何 ...

  3. JAVA中获取文件MD5值的四种方法

    JAVA中获取文件MD5值的四种方法其实都很类似,因为核心都是通过JAVA自带的MessageDigest类来实现.获取文件MD5值主要分为三个步骤,第一步获取文件的byte信息,第二步通过Messa ...

  4. python QQTableView中嵌入复选框CheckBox四种方法

    搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...

  5. 【Java必修课】通过Value获取Map中的键值Key的四种方法

    1 简介 我们都知道Map是存放键值对<Key,Value>的容器,知道了Key值,使用方法Map.get(key)能快速获取Value值.然而,有的时候我们需要反过来获取,知道Value ...

  6. 通过Value获取Map中的键值Key的四种方法

    1 简介 我们都知道Map是存放键值对<Key,Value>的容器,知道了Key值,使用方法Map.get(key)能快速获取Value值.然而,有的时候我们需要反过来获取,知道Value ...

  7. Jsp页面中使用fckeditor控件的两种方法 [转]

    fckeditor控件请到官方网站下载http://www.fckeditor.net,本例主要用到FCKeditor_2.6.3.zip.fckeditor-java-demo-2.4.1.zip. ...

  8. web页面中快速找到html对应元素两种方法

    一.第一种方法(通过先进入开发模式然后再去选择网页元素) 1.打开IE.Chrome.FireFox等,按 F12 键进入开发模式 2.在打开的控制窗口左上角有个  箭头 按钮,点击它之后,此时将鼠标 ...

  9. Python:字符串中引用外部变量的3种方法

    方法一: username=input('username:') age=input('age:') job=input('job:') salary=input('salary') info1='' ...

随机推荐

  1. C++ 补课(二)

    1,如果遇到派生类成员和基类成员的名称冲突的情况,程序会采用派生类成员执行相应的操作.如果需要使用基类中的同名成员,则必须在程序中使用全局分辨符“::” 虚基类 —— 派生类在继承基类时加入“virt ...

  2. 51Nod 圆与三角形

    给出圆的圆心和半径,以及三角形的三个顶点,问圆同三角形是否相交.相交输出"Yes",否则输出"No".(三角形的面积大于0).   Input 第1行:一个数T ...

  3. vue 遇到的报错

    [Vue warn]: Invalid default value for prop "dataParams": Props with type Object/Array must ...

  4. 请求头header里的contentType为application/json和capplition/x-www-form-urlencoded

    application/x-www-form-urlencoded 最常见的 POST 提交数据的方式了.浏览器的原生 <form> 表单,如果不设置 enctype 属性,那么最终就会以 ...

  5. diff---比较文件不同

    diff命令在最简单的情况下,比较给定的两个文件的不同.如果使用“-”代替“文件”参数,则要比较的内容将来自标准输入.diff命令是以逐行的方式,比较文本文件的异同处.如果该命令指定进行目录的比较,则 ...

  6. UVALive 5583 Dividing coins

    Dividing coins Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. Ori ...

  7. [Unit testing] data-test attr FTW

    Most of time, we get used to use class name as a selector in the test. But one problem for this is c ...

  8. 数据结构(C实现)------- 单链表

    在单链表中,每个结点包括两部分:存放每个数据元素本身信息的数据域和存放其直接后继存储位置的指针域. 单链表结点的类型描写叙述: typedef int ElemType; typedef struct ...

  9. hive学习笔记-高级查询

    聚合函数 count计数 count(*):不全都是NULL.就加1:count(1):当仅仅要有一列是NULL就不会加1:count(col):当col列不为空就会加1 sum求和 sum(可转成数 ...

  10. 轻松学习Linux之用户账户管理及实例

    Linux用户管理基础 (下载清晰视频:http://down.51cto.com/data/158699) 轻松学习Linux之用户账户管理的实例-跨硬盘移动数据 (此处视频不清楚下按下面地址下载清 ...