获取iframe内容相关记录_获取iframe的html-优快云博客

本文链接：https://blog.youkuaiyun.com/lx1996082566/article/details/88926899

前提：公司一组件可通过id获取富文本内容添加到一个iframe内展现。但是添加后iframe的高度需要自己去获取然后添加，之前的开发者使用iframeDom.contentDocument.scrollingElement.scrollHeight获取iframe内容高度，但是却不稳定，测试多次成功率低，总是拿到0，还未深究，先初步了解了下。不多说上代码：

一、HTMLIFrameElement.contenDocument（只读）

返回<iframe>元素document对象，ie8以上兼容

var iframeDocument = document.getElementsByTagName("iframe")[0].contentDocument;
iframeDocument.body
// ==> #document
iframeDocument.body.scrollHeight  // 拿高度
// ==> 我拿到为0
iframeDocument.scrollingElement
// ==> #document
iframeDocument.scrollingElement.scrollHeight // 拿高度
// ==> 我拿到为0

由此可看到，我们调用可获取相关的操作属性，这里没有扩展，可以自己尝试在console打印看看，肯定能找到需要的。

二、HTMLIFrameElement.contentWindow（只读）

返回<iframe>元素window对象，几乎无兼容问题

var iframeWindow = document.getElementsByTagName("iframe")[0].contentWindow;

三、jquery：$('iframe').contents().find('body')

我的问题重点解决方案吧，也刚好公司项目用jq，很方便的就可以获取

$('iframe').contents().find('body').height(); // 拿到高度
//  ==> 我拿到根据body下内容的获取到的高度

contents() 返回所有直接子元素，包括被选元素的文本和注释节点；

类似children()返回所有子元素，但是contents()包括了文本和注释节点，且contents()可以访问到iframe 的 HTML，这也是用contents()的原因。
find() 返回被选元素的后代元素；
height() 方法设置或返回被选元素的高度；

最后：解决无法拿到iframe高度问题，今日大概记录下，更多详细多了解再补充。