iframe基本知识及iframe版本Tab切换
时间:2022-05-04
本文章向大家介绍iframe基本知识及iframe版本Tab切换,主要内容包括iframe是什么,为何使用iframe?、如何在当前网页中调用iframe中的标签和内容?——contentWindow、contentDocument、如何在iframe中调用当前网页中的内容?——window.parent、window.top、检测iframe的内容是否加载完成、防止别人使用自己的网站钓鱼、利用iframe实现Tab切换、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
HTML5学堂:本文当中,会依次为大家介绍iframe是什么,为何使用iframe;如何在当前网页中调用iframe中的标签和内容;如何在iframe中调用当前网页中的内容;检测iframe内容是否加载完成;利用iframe防止钓鱼;如何让iframe中加载的内容决定外层iframe的宽高。最后还会书写Tab切换的实例。
iframe是什么,为何使用iframe?
iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站的内容。示例:
<body>
<div class='btn' >
<input id='btn' type="button" value='加载第1个html文件'/>
<input type="button" value='加载第2个html文件'/>
</div>
<iframe src='model1.html' class='con' id='frameBox'></iframe>
</body>
如何在当前网页中调用iframe中的标签和内容?——contentWindow、contentDocument
直接看代码示例:
<script>
var frameBox = document.getElementById('frameBox');
var btn = document.getElementById('btn');
btn.onclick = function(){
var frameTit = frameBox.contentWindow.document.getElementsByTagName('h1');
console.log(frameTit[0].innerHTML);
}
</script>
注意由于JS有执行顺序问题,因此不要书写成如下样子:
<script>
var frameBox = document.getElementById('frameBox');
var frameTit = frameBox.contentWindow.document.getElementsByTagName('h1');
console.log(frameTit[0].innerHTML);
</script>
另外,var frameTit = frameBox.contentWindow.document.getElementsByTagName('h1');等价于var frameTit = frameBox.contentDocument.getElementsByTagName('h1');但是,contentDocument不兼容IE6和7
如何在iframe中调用当前网页中的内容?——window.parent、window.top
window.parent.document.getElementsByTagName('div');
window.top.document.getElementsByTagName('div');
检测iframe的内容是否加载完成
<script>
var newFrame = document.createElement('iframe');
newFrame.src = 'model1.html';
document.body.appendChild(newFrame);
newFrame.onload = function(){
alert('已经加载完成iframe框架');
}
</script>
需要注意:IE下的iframe的onload事件我们需要使用绑定的方式,不然不能够生效。也就是把onload的书写方式调整为attachEvent的书写方式:
newFrame.attachEvent('onload', function(){
alert('已经加载完成iframe框架');
});
防止别人使用自己的网站钓鱼
为被调用的iframe文件(自己的网站),添加如下代码:
if (window!=window.top) {
window.top.location.href = window.location.href;
};
利用iframe实现Tab切换
基本文件:iframe-tab.html model1.html model2.html model3.html
相关关系:iframe-tab.html中加载三个文件,model1到3分别是三个tab对应的内容
核心代码:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe-tab-HTML5学堂</title>
<style>
html,body,div,span,iframe{
margin: 0;
padding: 0;
font: "微软雅黑";
}
.tit{
width: 300px;
height: 40px;
text-align: center;
}
.tit span{
float: left;
width: 100px;
height: 40px;
line-height: 40px;
background: #cfc;
cursor: hand;
cursor: pointer;
}
.tit .select{
background: #9f9;
}
.con{
width: 300px;
}
</style>
</head>
<body>
<div class='tit' id="tabTit">
<span class='select'>标题1</span>
<span>标题2</span>
<span>标题3</span>
</div>
<iframe class='con' src="model1.html" frameborder="0" id="tabCon"></iframe>
</body>
<script>
var btns = document.getElementById('tabTit').getElementsByTagName('span');
var tabCon = document.getElementById('tabCon');
for (var i = 0; i < btns.length; i++) {
btns[i].index = i;
btns[i].onclick = function(){
for (var i = 0; i < btns.length; i++) {
btns[i].className = '';
};
this.className = 'select';
tabCon.src = 'model'+(this.index+1)+'.html';
// 进行高度控制和处理
setTimeout(function(){
tabCon.style.height = tabCon.contentWindow.document.body.offsetHeight+'px';
console.log(tabCon.contentWindow.document.body.offsetHeight);
},100);
}
};
</script>
</html>
model1.html、model2.html、model3.html文件类似,在此只放置model2.html文件
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂</title>
<style>
html,body,div,h1,p{
margin: 0;
padding: 0;
}
h1{
font-weight: normal;
font-size: 24px;
}
.con{
width: 300px;
}
.con h1{
height: 50px;
line-height: 50px;
}
.con p{
line-height: 30px;
}
</style>
</head>
<body>
<div class='con'>
<h1>内部书写的是模块2的标题</h1>
<p>HTML5学堂 http://www.h5course.com</p>
</div>
</body>
</html>
- 这次真的忽略了一些ActiveMQ内心的娇艳
- 多线程编程:阻塞、并发队列的使用总结
- 多线程编程:多线程并发制单的开发记录【一】
- 如何使用线程锁来提高多线程并发效率
- 如何在分布式环境中同步solr索引库和缓存信息
- 如何在分布式环境中同步solr索引库和缓存信息
- Info模式下的隐形杀手(SpringMVC同时使用<mvc:resources.../>和FormattingConversionServiceFactoryBean时出现的问题)
- 关于web.xml3.0启动报错
- [机器学习]-[数据预处理]-中心化 缩放 KNN(一)
- 信息安全不可或缺应用交付 还需安全交付
- 一张图带你看懂区块链项目生态
- python环境的安装
- python爬虫抓取网易云音乐歌词
- 区块链学堂——“遇见”拜占庭将军
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JDK1.8HashMap源码学习-put操作以及扩容(一)
- 数据科学家极力推荐核心计算工具-Numpy的前世今生(上)
- 什么是运维眼中可部署的软件架构
- 2020-09-03:裸写算法:回形矩阵遍历。
- Java并发编程系列34 | 深入理解线程池(下)
- MySQL 8.0新特性 — 密码管理
- 聊聊claudb的NotificationManager
- windows下安装Postman
- 【Pytorch 】笔记七:优化器源码解析和学习率调整策略
- 【Pytorch 】笔记六:初始化与 18 种损失函数的源码解析
- logstash index 生成时间晚 8 小时
- top 命令查看cpu利用率超过500%
- 【Pytorch 】笔记四:Module 与 Containers 的源码解析
- 控制pod内container执行顺序的几种姿势
- 本地部署istio多集群(共享控制面)