今天我可真是被这个contentWindow折腾一天，不过好歹是搞明白，现在就来跟大家分享一下我的实践过程。
遇到的问题
我想通过iframe获取到内嵌页面的window对象，然后操作里面的DOM。听起来很简单对？结果发现事情没那么简单。
我一开始用的是contentDocument，发现这玩意儿在Firefox和IE8以上的IE浏览器里能用，但在其他浏览器里就不行。然后我又试contentWindow，这个倒是兼容性好些，但有时候会返回null，把我给整懵。
解决过程
我开始各种尝试，查资料，看文档，就差没把键盘给敲烂。后来发现，问题主要出在几个地方：
- 浏览器兼容性问题：不同的浏览器对contentDocument和contentWindow的支持程度不一样，有些支持的有些就差强人意。
- contentWindow可能为空：有时候iframe还没加载完，或者因为跨域问题，contentWindow会返回null。
- 安全限制: 浏览器的同源策略，导致跨域的情况下，访问contentWindow会受到限制。
我一开始想直接给*添加addEventListener，结果发现不行，据说是谷歌浏览器更新后搞的鬼。
后来我尝试一个叫“类型保护”的方法，就是先检查一下frame是不是IFRAME元素，然后再去访问它的contentWindow。这样可以避免一些错误。
光这样还不够，因为contentWindow还可能为空，所以还得再加一层判断，确保contentWindow存在，再去操作它。
对于跨域的问题，我发现如果iframe和父页面在同一个域下，可以通过设置*来解决。但如果完全跨域，那就得用postMessage来进行通信。
最终的实现
我是这么干的：
- 先用 获取到iframe元素。
- 然后用 instanceof 操作符检查一下它是不是HTMLIFrameElement类型。
- 如果上一步检查通过，再去访问它的contentWindow属性。
- 继续检查contentWindow是不是存在。
- 如果存在，就可以安全地使用contentWindow，并用postMessage发送消息给iframe。
这么一套组合拳下来，总算是把这个问题给解决，真是累死我。不过通过这回实践，我对iframe和contentWindow的理解也更深，下次再遇到类似的问题，相信我就能轻松应对。希望我的分享能帮到大家!
免责声明：由于无法甄别是否为投稿用户创作以及文章的准确性,本站尊重并保护知识产权，根据《信息网络传播权保护条例》，如我们转载的作品侵犯了您的权利,请您通知我们，请将本侵权页面网址发送邮件到qingge@88.com，深感抱歉，我们会做删除处理。