iframe标签的使用

1、什么是iframe
2、iframe的元素属性
3、iframe操作
4、iframe 对象及属性
5、创建iframe元素
6、iframe之间的通信
- 6.1、什么是主域名，什么是子域名(拓展)
- 6.2、iframe之间的通信
7、其他
- 7.1、iframe自适应
- 7.2、防嵌套网页
- - 7.2.1、浏览器端
  - 7.2.2、服务器端
- 7.3、iframe使用场景

1、什么是iframe

iframe是HTML元素，用于在网页中内嵌另一个网页。
iframe默认有一个宽高，存在边界。
iframe是一个行内块级元素，可以通过display修改。
所有浏览器都支持 iframe 标签。不过版本支持情况不同。
可以把需要的文本放置在
window.onload = function () {
setTimeout(() => {
window.top.postMessage(‘handsome’, ‘*’)
}, 0)
}
```
（2）、窗口2
```
```
    
    
    Document


    窗口2
    
        top.addEventListener('message',(e)=>{console.log(e)},false)
    
```
```
（3）、运行结果：
```
7、其他

7.1、iframe自适应
1. iframe默认会自带滚动条，不会全屏。所以要想自适应的话首先去掉滚动条即在iframe标签上添加 scrolling=“no”。
2. 设置iframe的高为body的高。
```
 var iwindow = iframe.contentWindow;
 var idoc = iwindow.document;
 iframe.height = idoc.body.offsetHeight;
```
3. 还可以添加其它的装饰属性。
4. 示例：
```
// 可以直接写在内联里面，也可以在css里面定义，不过对于广告iframe来说，样式写在属性中，是最好的。
 
```
7.2、防嵌套网页
- iframe的使用会出现出现安全性，一共两个方面：一个是你的网页被别人iframe，另一个是你iframe别人的网页。
- 最出名的clickhacking就是使用iframe来拦截click事件。因为iframe享有着click的最优先权，当有人在伪造的主页中进行点击的话，如果点在iframe上，则会默认是在操作iframe的页面。所以，钓鱼网站就是使用这个技术，通过诱导用户进行点击。
7.2.1、浏览器端
- 前端可以使用window.top来防止你的网页被iframe。
- 限定你的网页不能嵌套在任意网页内。如果想要引用同域的框架的话，可以判断域名。
```
if(window != window.top){
  window.top.location.href = correctURL;
}
// 判断域名
if(top.location.host != window.location.host) {
  top.location.href = window.location.href;
}
// 如果你网页不同域名的话，上述就会报错。可以使用try...catch...进行错误捕获。如果发生错误，则说明不同域，表示你的页面被盗用了。可能有些浏览器这样写是不会报错，所以需要降级处理再进行跳转即可。
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;
}
```
7.2.2、服务器端
1. X-Frame-Options
  - X-Frame-Options是一个相应头，主要是描述服务器的网页资源的iframe权限。目前的支持度是IE8+。有3个选项：
    1. X-Frame-Options: DENY。拒绝任何iframe的嵌套请求。
    2. X-Frame-Options: SAMEORIGIN。只允许同源请求。例如网页为 lgg.com/123.html，則 lgg.com 底下的所有网页可以嵌入此网页，但是 lgg.com 以外的网页不能嵌入
    3. X-Frame-Options: ALLOW-FROM。只允许指定网页的iframe请求，不过兼容性较差Chrome不支持
  - X-Frame-Options其实就是将前端js对iframe的把控交给服务器来进行处理。
```
// 等价于X-Frame-Options: DENY
if(window != window.top){
  window.top.location.href = window.location.href;
}
// 等价于X-Frame-Options: SAMEORIGIN
if(top.location.hostname != window.location.hostname) {
  top.location.href =window.location.href;
}
```
  - 该属性是对页面的iframe进行一个主要限制。另外还有一个Content Security Policy，同样也可以对iframe进行限制，而且，他应该是以后网页安全防护的主流。
2. sandbox
  - sandbox是h5的一个新属性（IE10+支持），就是用来给指定iframe设置一个沙盒模型限制iframe的更多权限。
  - 启用方式：添加sandbox属性。
  - 会对iframe页面进行一系列的限制：
    1. script脚本不能执行。
    2. 不能发送ajax请求。
    3. 不能使用本地存储，即localStorage,cookie等。
    4. 不能创建新的弹窗和window。
    5. 不能发送表单。
    6. 不能加载额外插件比如flash等。
  - 可以在sandbox里面进行一些设置：
7.3、iframe使用场景
1. PDF文档预览。
2. 插入广告等。
本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/efaae17ba1.html

iframe标签的使用

iframe标签的使用

1、什么是iframe

7、其他

7.1、iframe自适应

7.2、防嵌套网页

7.2.1、浏览器端

7.2.2、服务器端

7.3、iframe使用场景

相关推荐