页面中如何引用外部的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. Strtus2学习

    Struts 2 体系结构 : 1.Web浏览器请求一个资源. 2.过滤器Dispatcher查找方法,确定适当的Action. 3.拦截器自动对请求应用通用功能,如验证和文件上传操作. 4.Acti ...

  2. Kinect 开发 —— 用户交互设计的若干思考

    Metro 风格 windows 8 Kinect Hub 手势原型设计 悬停选择     翻页控制 关节点重叠的处理方法 将箭靶设置在画面的边缘,这样玩家持弓的角度与屏幕保持一个大约45度的锐角,这 ...

  3. 2017国家集训队作业[agc006f]Blackout

    2017国家集训队作业[agc006f]Blackout 题意: 有一个\(N*N\)的网格,一开始有\(M\)个格子被涂黑,给出这\(M\)个格子,和染色操作:如果有坐标为\((x,y),(y,z) ...

  4. MD基本语法介绍

    Markdown基本语法介绍 前言 文本编辑器一般用的有富文本编辑器(也就是Word)和md了,但是wold太过于花里胡哨很多功能都用不上,所以就选择md了,简单实用,一对于我来说一般就用标题和列表就 ...

  5. 使用spring-boot 国际化配置所碰到的乱码问题

    写好html静态页面 ,  也加上了编码格式 , 获取国际化展示在浏览器中还是存在乱码 , 开始以为是浏览器编码格式问题 , 做过处理后任没有得到解决 , 具体的处理方案如下: <meta ht ...

  6. 深入研究java.lang.ThreadLocal类 (转)

    深入研究java.lang.ThreadLocal类     一.概述   ThreadLocal是什么呢?其实ThreadLocal并非是一个线程的本地实现版本,它并不是一个Thread,而是thr ...

  7. hdu 1863 畅通project kruskal || prim

    简单最小生成树,畅通project.这三道题目都是练习最小生成树的. 注意一下推断是否有通路时,kruskal能够推断每一个点的祖先是否同样.prim能够推断每一个点是否都加进集合里面了,也就是说是否 ...

  8. hdoj-1289-A Bug&#39;s Life【种类并查集】

    A Bug's Life Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...

  9. JAVASE学习笔记:第十章 SWing经常使用控件类(二)

    7.JComboBox 下拉列表         /*   * 初始化下拉列表   */  public void addcomb(){   String[] area = {"山西省&qu ...

  10. GPU-Z:显卡体质、显卡各传感器实时状态的查看

    1. TechPowerUp GPU-Z:查看显卡体质 下载地址:Download TechPowerUp GPU-Z | techPowerUp 点击 bus interface 后的?进行显卡的体 ...