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

        1. iframe是HTML元素，用于在网页中内嵌另一个网页。
        2. iframe默认有一个宽高，存在边界。
        3. iframe是一个行内块级元素，可以通过display修改。
        4. 所有浏览器都支持 iframe 标签。不过版本支持情况不同。
        5. 可以把需要的文本放置在

           （2）、窗口2
           

           
           
           
               
               
               
           
           
               
           窗口2
               
           
           
           

           （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进行限制，而且，他应该是以后网页安全防护的主流。
                    • 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. 插入广告等。