页面中如何引用外部的HTML(四种方法)
页面中如何引用外部的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(四种方法)的更多相关文章
- Java中取小数点后两位(四种方法)
摘自http://irobot.iteye.com/blog/285537 Java中取小数点后两位(四种方法) 一 Long是长整型,怎么有小数,是double吧 java.text.D ...
- android中退出当前应用程序的四种方法
android中退出当前应用程序的四种方法 [IT168 技术]Android程序有很多Activity,比如说主窗口A,调用了子窗口B,如果在B中直接finish(), 接下里显示的是A.在B中如何 ...
- JAVA中获取文件MD5值的四种方法
JAVA中获取文件MD5值的四种方法其实都很类似,因为核心都是通过JAVA自带的MessageDigest类来实现.获取文件MD5值主要分为三个步骤,第一步获取文件的byte信息,第二步通过Messa ...
- python QQTableView中嵌入复选框CheckBox四种方法
搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...
- 【Java必修课】通过Value获取Map中的键值Key的四种方法
1 简介 我们都知道Map是存放键值对<Key,Value>的容器,知道了Key值,使用方法Map.get(key)能快速获取Value值.然而,有的时候我们需要反过来获取,知道Value ...
- 通过Value获取Map中的键值Key的四种方法
1 简介 我们都知道Map是存放键值对<Key,Value>的容器,知道了Key值,使用方法Map.get(key)能快速获取Value值.然而,有的时候我们需要反过来获取,知道Value ...
- Jsp页面中使用fckeditor控件的两种方法 [转]
fckeditor控件请到官方网站下载http://www.fckeditor.net,本例主要用到FCKeditor_2.6.3.zip.fckeditor-java-demo-2.4.1.zip. ...
- web页面中快速找到html对应元素两种方法
一.第一种方法(通过先进入开发模式然后再去选择网页元素) 1.打开IE.Chrome.FireFox等,按 F12 键进入开发模式 2.在打开的控制窗口左上角有个 箭头 按钮,点击它之后,此时将鼠标 ...
- Python:字符串中引用外部变量的3种方法
方法一: username=input('username:') age=input('age:') job=input('job:') salary=input('salary') info1='' ...
随机推荐
- Strtus2学习
Struts 2 体系结构 : 1.Web浏览器请求一个资源. 2.过滤器Dispatcher查找方法,确定适当的Action. 3.拦截器自动对请求应用通用功能,如验证和文件上传操作. 4.Acti ...
- Kinect 开发 —— 用户交互设计的若干思考
Metro 风格 windows 8 Kinect Hub 手势原型设计 悬停选择 翻页控制 关节点重叠的处理方法 将箭靶设置在画面的边缘,这样玩家持弓的角度与屏幕保持一个大约45度的锐角,这 ...
- 2017国家集训队作业[agc006f]Blackout
2017国家集训队作业[agc006f]Blackout 题意: 有一个\(N*N\)的网格,一开始有\(M\)个格子被涂黑,给出这\(M\)个格子,和染色操作:如果有坐标为\((x,y),(y,z) ...
- MD基本语法介绍
Markdown基本语法介绍 前言 文本编辑器一般用的有富文本编辑器(也就是Word)和md了,但是wold太过于花里胡哨很多功能都用不上,所以就选择md了,简单实用,一对于我来说一般就用标题和列表就 ...
- 使用spring-boot 国际化配置所碰到的乱码问题
写好html静态页面 , 也加上了编码格式 , 获取国际化展示在浏览器中还是存在乱码 , 开始以为是浏览器编码格式问题 , 做过处理后任没有得到解决 , 具体的处理方案如下: <meta ht ...
- 深入研究java.lang.ThreadLocal类 (转)
深入研究java.lang.ThreadLocal类 一.概述 ThreadLocal是什么呢?其实ThreadLocal并非是一个线程的本地实现版本,它并不是一个Thread,而是thr ...
- hdu 1863 畅通project kruskal || prim
简单最小生成树,畅通project.这三道题目都是练习最小生成树的. 注意一下推断是否有通路时,kruskal能够推断每一个点的祖先是否同样.prim能够推断每一个点是否都加进集合里面了,也就是说是否 ...
- hdoj-1289-A Bug's Life【种类并查集】
A Bug's Life Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- JAVASE学习笔记:第十章 SWing经常使用控件类(二)
7.JComboBox 下拉列表 /* * 初始化下拉列表 */ public void addcomb(){ String[] area = {"山西省&qu ...
- GPU-Z:显卡体质、显卡各传感器实时状态的查看
1. TechPowerUp GPU-Z:查看显卡体质 下载地址:Download TechPowerUp GPU-Z | techPowerUp 点击 bus interface 后的?进行显卡的体 ...