1、iframe的基本属性、获取iframe的内容（同域）

在页面中添加iframe元素，通过id的方式获取到该对象

获取window以及document

也可结合Name属性，通过window提供的frames获取

2、获取iframe中的元素时出现的问题

通过上述iframeWindow.document输出可获得

只能获得空的head以及body

原因：这是因为iframe加载是需要时间的，还没加载完就在js中直接获取对象了，所以获取为空。

解决方法：在onload中进行。

报错：主要是跨域的原因，同源策略阻止脚本访问来源不同的站点的内容。

我们通常使用iframe最基本的特性，就是能自由操作iframe和父框架的内容(DOM). 但前提条件是同域. 如果跨域顶多只能实现页面跳转window.location.href.

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

4、iframe的安全性 iframe出现安全性有两个方面，一个是你的网页被别人iframe,一个是你iframe别人的网页。

最出名的clickhacking就是使用iframe来拦截click事件。因为iframe享有着click的最优先权，当有人在伪造的主页中进行点击的话，如果点在iframe上，则会默认是在操作iframe的页面。 所以，钓鱼网站就是使用这个技术，通过诱导用户进行点击，比如，设计一个吸引你的网页，诱导用户点击，但实际结果，你点击的不是你希望看到的,而是被恶意微博吸粉。

（1）使用window.top来防止你的网页被iframe.

这段代码的主要用途是限定你的网页不能嵌套在任意网页内。如果你想引用同域的框架的话，可以判断域名。

注意：如果你在一个框架内： window 指的是当前帧。 parent 指的是当前帧的父级。 top 指最外框。如果你不在任何框架内，这些都只是对当前 window的引用。如果你只在一个框架内，parent并且top两者都是对同一事物的引用。

当然，如果你网页不同域名的话，上述就会报错。所以，这里可以使用try...catch...进行错误捕获。如果发生错误，则说明不同域，表示你的页面被盗用了。可能有些浏览器这样写是不会报错，所以需要降级处理。这时候再进行跳转即可。

（2）X-Frame-Options 响应头:

X-Frame-Options HTTP 响应头是用来给浏览器指示允许一个页面可否在 frame , iframe 或者 object 中展现的标记。网站可以使用此功能，来确保自己网站的内容没有被嵌到别人的网站中去，也从而避免了点击劫持(clickjacking) 的攻击。 X-Frame-Options其实就是将前端js对iframe的把控交给服务器来进行处理。

该属性是对页面的iframe进行一个主要限制，不过，涉及iframe的header可不止这一个，另外还有一个Content Security Policy, 他同样也可以对iframe进行限制，而且，他应该是以后网页安全防护的主流。

更多参考：Web前端之iframe详解_StriveFarrell的博客-CSDN博客_iframe 前端