html标iframe详解

html标详解

我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。src可以是网址，图片，HTML，但是使用时请注意跨域问题。

<iframe src="https://www.baidu.com/" name="baidu" frameborder="0"></iframe>

常用属性

1.frameborder:是否显示边框，1(yes),0(no)
2.height:框架作为一个普通元素的高度，建议在使用css设置。
3.width:框架作为一个普通元素的宽度，建议使用css设置。
4.name:框架的名称，window.frames[name]时专用的属性。
5.scrolling:框架的是否滚动。yes,no,auto。
6.src：内框架的地址，可以使页面地址，也可以是图片的地址。
7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
8.sandbox: 对iframe进行一些列限制，IE10+支持

获取iframe里的内容

主要的两个API就是contentWindow,和contentDocument
iframe.contentWindow, 获取iframe的window对象
iframe.contentDocument, 获取iframe的document对象
这两个API只是DOM节点提供的方式(即getELement系列对象)

另外更简单的方式是，结合Name属性，通过window提供的frames获取.
window.frames[‘name’] , 此处获取的就是window对象 window.frames[‘name’] === window
我们可以在这里拿到iframe页面里window下的所有东西。

在同域下iframe中获取父级内容

在同域下，父页面可以获取子iframe的内容，那么子iframe同样也能操作父页面内容。在iframe中，可以通过在window上挂载的几个API进行获取.

window.parent 获取上一级的window对象，如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象，即，就是你打开页面的文档
window.self 返回自身window的引用。可以理解 window===window.self

防嵌套网页

网站为防止被恶意使用，我们需做一些处理，因为iframe享有着click的最优先权，当有人在伪造的主页中进行点击的话，如果点在iframe上，则会默认是在操作iframe的页面。 所以，钓鱼网站就是使用这个技术，通过诱导用户进行点击，比如别人设置了一个视频网站，你点进去看，但实际进入的可能是别人的恶意吸粉网站。

if(window != window.top){
    window.top.location.href = correctURL;
}
//这里限定你的网页不能嵌套在任意网页内。如果你想引用同域的框架的话，可以判断域名。
if (top.location.host != window.location.host) {
　　top.location.href = window.location.href;
}