在我自己的日常前端开发中,其实iframe标签出现的次数并不是很多。作为一个很古老(浏览器兼容性非常好)的标签,有必要去了解一下它的典型应用场景。
(图片说明:所有浏览器都支持iframe,无论什么版本)
在什么情况下使用iframe呢?其实iframe有很多奇技淫巧的用法,但是最重要的一个特点是:。因此,iframe可以用于引用站外的网页。常用于CMS系统,富文本编辑器等场景。
我们常用的在线执行前端代码的网站,例如 http://jsfiddle.net/ , 以及新手常用的 http://www.w3school.com.cn/ 里面的“亲自试一试”功能,其实都是使用了
我们在左边编辑页面,点击提交代码之后,就可以在右侧查看到效果了。试想一下,右边“查看结果”区域就是一个iframe,提供了一个隔离于当前网页的环境。否则的话,我们在左侧设置了
标签背景为红色,如果没有iframe,那么整个网页上的p元素可能都会变成红色。
我们查看该网页的源代码其实可以看出这个页面的工作原理。我去掉了一些多余的代码和html标签,最核心的部分如下:
执行的流程如下:
1. 用户点击了提交按钮,执行submitTryIt函数
2. 在submitTryIt函数中,先获取到编辑html区域(即用户自己编辑的区域)的值,并赋值给隐藏的中转区域
3. submitTryIt中执行表单提交操作(即submit函数),将隐藏的中转区域里面的内容(即用户自己编辑的区域内容)传到了后台接口v.asp
4. 表单提交到v.asp这个链接之后,返回了什么呢?其实,并没有做任何处理,原封不动的返回了。如下图:
5. 这个时候你一定奇怪,原封不动返回的内容,为什么会在“查看结果”区域(即iframe里面)执行出效果来?重点来了,请注意