Blog - wingsico

以前一直觉得这个iframe标签特别神秘,因为之前在解决设置title时使用document.title = "xxx"在ios上的微信端失效,就是使用了一段关于iframe的js代码完成的,应该是可以称为一种iframe hack吧~,代码如下:

setTimeout(function(){
    //利用iframe的onload事件刷新页面
    document.title = 'test';
    var iframe = document.createElement('iframe');
    iframe.style.visibility = 'hidden';
    iframe.style.width = '1px';
    iframe.style.height = '1px';
    iframe.src = "./favicon"; // 这里是必须的
    iframe.onload = function () {
        setTimeout(function () {
            document.body.removeChild(iframe);
        }, 0);
    };
    document.body.appendChild(iframe);
},0);

不过据考证资料,该iframe hack对最新内核已经失效,不过并不影响我学习iframe,毕竟我现在还没有在做微信,等以后再踩踩这些坑好了。

iframe——内联框架

引用一段www.thoughtco.com中的一段原文,描述了iframe。

Inline frames, commonly just referred to as “iframes”, are the only type of frame allowed in HTML5. These frames are essentially a section of your page that you “cut out”. In the space that you have cut out of the page, you can then feed in an external webpage. In essence, an iframe is another browser window set right inside your web page. You see iframes commonly used on websites that need to include external content like a Google map or a video from YouTube. Both of those popular websites use iframes in their embed code.

翻译过来用我的话来说就是: iframe是一个HTML5的框架元素,它允许你在一个网页内引入另一个浏览器窗口(仅作展示和使用),相当于在一个浏览器窗口内切出了另一个窗口去展现外部网站的内容,比如,在博客内引用codepen中的在线代码效果演示,就是使用的iframe,还有一些视频、音乐和地图之类的的引入也会使用iframe,总之,iframe在各大网站均有被使用。 iframe在HTML4.01和HTML5中均可使用,其共有四个基本属性:

  1. src = "url": 指定一条url,表示该框架所指向的外部页面的链接,比如说:

    <iframe src="http://www.baidu.com">您的浏览器不支持iframe</iframe>

    这是一个指向百度首页的iframe

  2. width = "" / height = "": 设置iframe的宽高,单位为px,举个例子:

    <iframe src="http://www.baidu.com" width="400" height="400">您的浏览器不支持iframe</iframe>
  3. name = "": 设置iframe的名称。 有三种用法:

    1. 作为javascript的引用元素

      <iframe src="https://www.baidu.com" name="iframe_a">您的浏览器不支持iframe</iframe>
      
      <script>
      var iframe_a = document.getElementsByName('iframe_a')[0]
      // 同等于
      var iframe_a = window.frames['iframe_a']
      var iWindow = iframe_a.contentWindow // 拿到iframe_a的window对象
      var idoc = iWindow.document // 获取iframe的document
      </script>
2.  作为a标签和form标签的target属性的值

        <iframe src="https://www.baidu.com" name="iframe_a">您的浏览器不支持iframe</iframe>

        <a href="https://www.ncuos.com" target="iframe_a">将iframe指向云家园</a>


3.  作为input和button的formtarget的值

        <iframe src="https://www.baidu.com" name="iframe_a" width="400" height="400">您的浏览器不支持iframe</iframe>
        <form action="form_action.asp" method="get">
          <button type="submit" formtarget="iframe_a">提交数据1</button>
          <input type="submit" formtarget="iframe_a">提交数据2</button>
        </form>



    点击这两个按钮不会有任何反应,因为formtarget的作用就是: **Specifies where to display the response that is received after submitting the form (for type="submit" and type="image")** 翻译过来的意思就是formtarget将请求后得到的response在formtarget的值中展现出来,在这里即是在iframe中展示出来。

在新增的HTML5中,iframe又多了3个新属性,分别是sandbox,seamless,srcdoc.

sandbox

首先,先说一下sandbox属性,sandbox <=> 沙箱,相信用过杀毒软件的人应该知道,360就有一个隔离沙箱,所以这个属性就是为了安全性考虑而设计的,用作隔离iframe和当前页面。 这个是来自菜鸟教程的一个介绍:

如果指定了空字符串(sandbox=””),该属性对呈现在iframe框架中的内容启用一些额外的限制条件。 sandbox 属性的值既可以是一个空字符串(将会启用所有的限制),也可以是用空格分隔的一系列指定的字符串。 HTML 5通过sandbox属性提升iFrame的安全性。sandbox属性可以防止不信任的Web页面执行某些操作。

具体用法如下:

<iframe src="https://www.baidu.com" sandbox="value">沙盒隔离</iframe>

既然称之为沙盒,那他可以做些什么来提高安全性呢?

  • 将内容视为来自独特来源
  • 不能发送ajax请求
  • 阻止脚本执行
  • 禁用API(不能使用本地存储等)
  • 阻止链接定位到其他浏览上下文
  • 防止内容使用插件(通过或其他)
  • 阻止内容导航其顶层浏览上下文
  • 阻止自动触发功能(如自动播放视频或自动对焦表单控件
  • 不能发送表单

具体如何限制iframe的操作呢? 首先,sandbox的值可以多值组合使用,如同class属性一样可以填写许多类名。其次,它的单值共有7个:

  • “” (no-value)
  • allow-same-origin
  • allow-top-navigation
  • allow-pointer-lock
  • allow-popups
  • allow-scripts
  • allow-forms

当为空值的时候,即sandbox=""sandbox 时,所有的限制都将启用; 当为allow-same-origin时,该嵌入的内容将会被当做同源来看待,当使用此属性时,适用于两种情况:

  1. 若同一站点的内容被沙盒禁用脚本,但通过设置该值可以允许Iframe访问沙盒内容的DOM
  2. 当嵌入的是一个第三方的站点,它可以阻止该站点打开弹窗,弹出广告等等,但不阻止该嵌入的页面回到其原始站点,或使用数据库API存储数据等等

当为allow-top-navigation时,允许该嵌入的内容导航到其顶层浏览的上下文处,这是什么意思呢?即是允许iframe主导window.top进行页面跳转,还不明白?何为window.top,就是顶层窗口,即是浏览器窗口,就是说iframe可以控制浏览器跳转至其他页面,也就是父级(顶级)页面被重定向至其他网页。大概就是这个么意思,还不明白我也木有办法了=。= 当含有allow-pointer-lock时,可以在iframe中锁定鼠标 当含有allow-popus时,允许iframe中弹出新窗口,比如 window.open.target="_blank" 当含有allow-scripts时,允许iframe执行脚本 当含有allow-forms时,允许提交表单的操作 当然,直接使用一个sandbox的空值的很少的情况,我们经常使用如下代码来开放一些特定的权限:

<iframe sandbox="allow-scripts allow-same-origin allow-scripts" src="...">您的游览器不支持iframe。</iframe>

srcdoc

srcdoc属性制定要在iframe内显示的页面的HTML内容 举个栗子:

<iframe src="https://www.baidu.com" width="200" height="200" sandbox="allow-scripts allow-forms allow-same-origin" srcdoc="<p>hello,srcdoc!</p>">您的浏览器不支持iframe</iframe>

效果如下: 您的浏览器不支持iframe


seamless

seamless属性属于逻辑属性。当设置了该属性后,它规定了iframe看上去像是包含文档的一部分(无边框或无滚动条) 举个栗子:

<iframe src="https://www.baidu.com" width="200" height="200" sandbox="allow-scripts allow-forms allow-same-origin">您的浏览器不支持iframe</iframe>
<iframe src="https://www.baidu.com" width="200" height="200" sandbox="allow-scripts allow-forms allow-same-origin" seamless>您的浏览器不支持iframe</iframe>

效果如下: 您的浏览器不支持iframe 您的浏览器不支持iframe !看起来没有效果,不对啊,Chrome浏览器不是支持该属性吗!不是很理解这个属性,标记一下!


内容略多,待跟进,由于iframe使用方面略少,以及还有一些安全性的问题的深究,暂且对我目前学习意义不大,待有时间可以学习一下iframe跨域以及轮询(感觉iframe真是一个很牛掰的东西),有时间再补充吧。

参考资料

(function(){ document.scrollTop = 0;})()