iframe之谜

最新推荐文章于 2023-10-30 15:23:21 发布

朗朗向前冲

最新推荐文章于 2023-10-30 15:23:21 发布

阅读量381

点赞数 1

分类专栏：前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_41429333/article/details/123311325

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

iframe篇

背景
最近在做项目中使用了iframe,然后心血来潮对iframe起了歹念。这不结合自己使用的场景配上网上冲浪收集到的一些资料。就开始咣咣一顿炒作
iframe基本使用和常用属性
2.1.frameborder:是否显示边框，1(yes),0(no)
2.2,height:框架作为一个普通元素的高度，建议在使用css设置
2.3. width:框架作为一个普通元素的宽度，建议使用css设置
2.4.name:框架的名称，window.frames[name]时专用的属性
2.5.scrolling:框架的是否滚动。yes,no,auto
2.6.src：内框架的地址，可以使页面地址，也可以是图片的地址
使用：
获取iframe中的内容(获取子级元素)
第一种方式：主要的两个API就是contentWindow,和contentDocument
iframe.contentWindow, 获取iframe的window对象
iframe.contentDocument, 获取iframe的document对象

输出：

第二种方式：用name 属性来获取 window.ifames[name] 返回的是window对象
```
<iframe id="iframeA" name="iframeA" src="./image1.png" frameborder="0"></iframe>
```
输出：
子界面获取父级的元素
当然这是针对父子同源的情况
window.parent 获取上一级的window对象，如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象，即，就是你打开页面的文档
window.self 返回自身window的引用

通信
4.1.同域的通信

	4.1.1.子页面调用父页面方法和变量
	
	//调用父页面方法和变量
	
	window.parent.func(); //调用方法
	
	window.parent.value； //调用变量
	
	4.1.2.父页面调用子页面方法和变量
	
	//调用子页面方法和变量
	
	window.frames[iframe序号].func(); //调用方法
	
	window.frames[iframe序号].value； //调用变量

4.2.不同域的通信

	 发送消息: 使用postmessage方法 			接受消息: 监听message事件

在这里插入图片描述

iframe 常使用的业务场景—嵌入式广告自适应
网页为了赚钱，引入广告是很正常的事了。通常的做法就是使用iframe，引入广告地址就可以了，然后根据广告内容设置相应的显示框。但是，为什么是使用iframe来进行设置，而不是在某个div下嵌套就行了呢？
要知道，广告是与原文无关的，这样硬编码进去，会造成网页布局的紊乱,而且,这样势必需要引入额外的css和js文件，极大的降低了网页的安全性。这些所有的弊端，都可以使用iframe进行解决。
我们通常可以将iframe理解为一个沙盒，里面的内容能够被top window 完全控制，而且，主页的css样式是不会入侵iframe里面的样式，这些都给iframe的广告命运埋下伏笔。可以看一下各大站点是否都在某处放了些广告，以维持生计比如:W3School
但，默认情况下，iframe是不适合做展示信息的，所以我们需要对其进行decorate.
如何防止自己的界面被嵌套
6.1.前端：
```
try{
　　top.location.hostname;  //检测是否出错
　　//如果没有出错，则降级处理
　　if (top.location.hostname != window.location.hostname) { 
　　　　top.location.href =window.location.href;
　　}
}
catch(e){
　　top.location.href = window.location.href;
}
```
6.2.服务端：或者在服务器上面设置X-Frame-Options响应头。
X-Frame-Options是一个相应头，主要是描述服务器的网页资源的iframe权限。目前的支持度是IE8+
有三个选项：
DENY：当前页面不能被嵌套iframe里，即便是在相同域名的页面中嵌套也不允许,也不允许网页中有嵌套iframe
SAMEORIGIN：iframe页面的地址只能为同源域名下的页面
ALLOW-FROM：可以在指定的origin url的iframe中加载
X-Frame-Options: DENY
拒绝任何iframe的嵌套请求
X-Frame-Options: SAMEORIGIN
只允许同源请求，例如网页为 foo.com/123.php，則 foo.com 底下的所有网页可以嵌入此网页，但是 foo.com 以外的网页不能嵌入
X-Frame-Options: ALLOW-FROM http://s3131212.com
只允许指定网页的iframe请求，不过兼容性较差Chrome不支持
X-Frame-Options其实就是将前端js对iframe的把控交给服务器来进行处理。