iframe元素获取document中的对象为空

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

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元素，通过id的方式获取到该对象

const feedbackIframe = document.querySelector('#feedbackIframe')

获取window以及document

let iframeWindow = feedbackIframe.contentWindow
let iframeDocument = feedbackIframe.contentDocument

console.log("html", iframeDocument.documentElement); //获取iframe的html
console.log("head", iframeDocument.head);  //获取head
console.log("body", iframeDocument.body);  //获取body

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

<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
   <p>Your browser does not support iframes.</p>
</iframe>

<script type="text/javascript">
    console.log(window.frames['ifr1'].window);
    console.dir(document.getElementById("ifr1").contentWindow);
</script>

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

let app = iframeWindow.document.geElementById('#app')

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

只能获得空的head以及body

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

解决方法：在onload中进行。

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

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

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

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

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

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

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

if(window != window.top){
    window.top.location.href = correctURL;
}

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

if (top.location.host != window.location.host) {
　　top.location.href = window.location.href;
}

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

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

 try{
　　top.location.hostname;  //检测是否出错
　　//如果没有出错，则降级处理
　　if (top.location.hostname != window.location.hostname) { 
　　　　top.location.href =window.location.href;
　　}
}
catch(e){
　　top.location.href = window.location.href;
}

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

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

X-Frame-Options: DENY             拒绝任何iframe的嵌套请求
X-Frame-Options: SAMEORIGIN       只允许同源请求，例如网页为 foo.com/123.php，則 foo.com 底下的所有网页可以嵌入此网页，但是 foo.com 以外的网页不能嵌入
X-Frame-Options: ALLOW-FROM http://s3131212.com    只允许指定网页的iframe请求，不过兼容性较差Chrome不支持

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

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