HTML的iframe标签妙用 - 在线执行前端代码的网站原理是什么？

在我自己的日常前端开发中，其实iframe标签出现的次数并不是很多。作为一个很古老（浏览器兼容性非常好）的标签，有必要去了解一下它的典型应用场景。

 

（图片说明：所有浏览器都支持iframe，无论什么版本）

 

在什么情况下使用iframe呢？其实iframe有很多奇技淫巧的用法，但是最重要的一个特点是：<iframe>提供了一个和浏览器当前窗口相隔离的沙箱环境，相当于网页内部新开的另一个窗口。<iframe>外部的css/javascript，不会影响到<iframe>里面的样式或DOM。同时，<iframe>内部的css/javascript也不会影响<iframe>外部的样式和DOM。因此，iframe可以用于引用站外的网页。常用于CMS系统，富文本编辑器等场景。

 

我们常用的在线执行前端代码的网站，例如 http://jsfiddle.net/ , 以及新手常用的 http://www.w3school.com.cn/ 里面的“亲自试一试”功能，其实都是使用了<iframe>标签来实现。接下来就以w3school来举个例子。

 

我们在左边编辑页面，点击提交代码之后，就可以在右侧查看到效果了。试想一下，右边“查看结果”区域就是一个iframe，提供了一个隔离于当前网页的环境。否则的话，我们在左侧设置了<p>标签背景为红色，如果没有iframe，那么整个网页上的p元素可能都会变成红色。

 

我们查看该网页的源代码其实可以看出这个页面的工作原理。我去掉了一些多余的代码和html标签，最核心的部分如下：

执行的流程如下：

1. 用户点击了提交按钮，执行submitTryIt函数

2. 在submitTryIt函数中，先获取到编辑html区域（即用户自己编辑的区域）的值，并赋值给隐藏的中转区域

3. submitTryIt中执行表单提交操作（即submit函数），将隐藏的中转区域里面的内容（即用户自己编辑的区域内容）传到了后台接口v.asp

4. 表单提交到v.asp这个链接之后，返回了什么呢？其实，并没有做任何处理，原封不动的返回了。如下图：

5. 这个时候你一定奇怪，原封不动返回的内容，为什么会在“查看结果”区域（即iframe里面）执行出效果来？重点来了，请注意<form>标签上有个属性target="i"，而<iframe>标签上也有一个属性叫做name="i"，他们两个属性都叫做字母“i”，可不是作者瞎写的。这个的意思是说，将form表单提交，返回的结果提交到以target的值为name的窗口中。关于form表单的target值，可以参考这里：http://www.w3school.com.cn/tags/att_form_target.asp 。这就解释了为什么返回的内容可以在iframe里面展示出来了。由于iframe的隔离性，你不管提交什么代码，都只能影响到iframe里面的区域，不会影响到页面上其他部分。

 

本文的最后，顺便提一个问题，既然iframe有这么好的隔离性，如果我真的要和iframe里面的内容做通信或其他交互，应该怎么办呢？有兴趣的话大家调研一下吧～postmessage