如何获取页面iframe元素内容的高、宽？

Posted 2023-04-15

如何获取页面iframe元素内容的高、宽？
我用contentDocument获取到iframe内容的对象，按照w3school上面说，就可以用任何操作DOM的方法操作iframe内容了，但是我安装搜索到的方法根本就获取不到内容的高和宽，返回的都是0

参考技术A 这种方法是对的，不过前提是：你必须有足够权限访问 iframe Docuemnt —— 同域

例如，index.html 和 my_frame.html 都在同一域名下，或都在桌面，这样可以

但如果你把 iframe 的 src 换为百度网址，就会出现类似下面的错误

Permission denied to access property 'getElementById'
无权访问 'getElementById' 属性

如果你的情况是后者，那就没有解决办法。如果是前者，可能你的代码中有错误。追问

我目前是同域的，没有报权限错误，我弹出来获取到的高度都是0。怎么搞？

追答

你可以用下面这两个文件测试

【index.html】

window.onload = function()
var frm = document.getElementById("f");
var frmDoc = frm.contentDocument;
var sample = frmDoc.getElementById("sample");
// 输出高度：200px
alert(sample.style.height);
;

【frame.html】

frame

sample text

追问

我不是要获取某个元素的高、宽，我是要获取整个文档的高、宽。

追答

var frm = document.getElementById("f");
var frmDoc = frm.contentDocument;
alert(frmDoc.body.clientHeight);

追问

我之前就试过了这个，返回0，还有办法吗？

追答

contentDocument 不是兼容的写法，应该是 frm.contentWindow.document

var frm = document.getElementById("f");
var frmDoc = frm.contentWindow;
alert(frmDoc.document.body.clientHeight);

追问

结果还是0，用contentWindow得到的是window的对象，用contentDocument得到的是HTML Document对象，结果都是得到的是0，咋办？

追答

我在 IE6-9，FF，Chrome 都测试了，没有问题

contentWindow.document = contentDocument

把你代码贴出来看看吧，或者私信

追问

和你的一模一样，我的firefox20.0
window.onload = function()
var ifm = document.getElementsByTagName("iframe")[0];
var con = ifm.contentWindow;
alert(con.document.body.clientHeight);

本回答被提问者采纳

jquery如何在html页面取得iframe的元素

a.html页面里面有一个name="iframe_form"的iframe，iframe里面有个.send，如何选中它

如果这个iframe的页面跟a.html是同域名下的，就可以可以来取：

获取iframe的页面内容：

var $doc = jQuery('iframe').contents();

这里的contents()方法就可以iframe页面内任何对象。

使用选择器获取你想要的对象：

var $send = $doc.find('.send');

链式写法：var $send = jQuery('iframe').contents().find('.send');

$send就是你要的jQuery对象了。

当然，如果iframe的页面跟a.html是不同域的话，受浏览器的安全访问限制，就没有办法获取你要的对象了。

参考技术A 利用jquery取得iframe的元素有如下几种方法：
1、利用元素ID取得：$("#ID");
2、利用CSS样式取得：$(".CSS名"); 参考技术B $('iframe[name="iframe_form"] .send')