iframe以及与之相关的frameset,frame
iframe以及与之相关的frameset,frame 都是早期HTML版本的产物,frame 是必须嵌套在frameset里面用的,可以将它们理解为在一个页面大框架里面,定义了几个不同的框架,组成的一个框架集。每个框架可以加载一个页面。而iframe本质上就是一个frame,只不过是inner-frame(内联框架),也就是说这种框架是不需要有框架集的,可以自成一体,随意嵌套在页面的任意地方。
【备注】嵌入式框架iframe在HTML的后续版本(例如HTML 5)中还是支持的,但固定框架集frameset和frame 已经明确地要告别历史舞台了。
iframe可以用来做什么呢?
它使得在一个网页中嵌入另外一个网页变得可能。
嵌入式框架代码:
<iframe src="http://www.divcss5.com/" width="400" height="200" scrolling="yes" />
Src值为被嵌入网页地址
Scrolling 是否有滚动条,yes有,no无,auto 根据被显示html自动显示或隐藏
Width宽度
Height高度
高度宽度可以为百分比,可以为具体高宽数值,不需要跟单位。
通常需要设置高度、宽度具体数值。
注:在 HTML 5 中,仅仅支持 src 属性
特别说明如果要想隐藏iframe出现的滚动条,可以使用Scrolling=no隐藏滚动条,当然也可以使用CSS样式隐藏滚动条。也可以设置合适高宽达到不显示滚动条。
为了避免这些嵌入的网页对我们自己的网页产生不利的影响,iframe实现了一个安全沙箱(Security Sandbox)。使用iframe可以实现并行的脚本下载。因为在框架里面是一个独立的运行环境,它里面的资源可以和主页面的资源并行下载。
目前新浪微博提供的“微博秀”还是用iframe来实现的。
iframe 可能的问题?
安全问题:像上面提到的那样,虽然有安全沙箱,但其实还是有安全风险的。因为iframe引用的是别人做的网页。
兼容性问题:并非所有浏览器都能很好地支持iframe。
性能问题:iframe会导致页面加载变慢。
其他问题:iframe的宽度和高度不能自动适应内容大小。
iframe替代方案
如果不用iframe,那么如何在页面中嵌入其他网站的内容呢?绝大部分时候,脚本可以实现iframe的功能。【备注】使用脚本的方式,前提是你完全信任这些脚本。而iframe唯一的好处在于它可以对外部页面的行为做限制(通过安全沙箱)