如何从跨域 iframe 获取计算样式？

如何从跨域内容检索计算样式

问题：

访问计算的高度和宽度值跨域 iframe 中的元素可能具有挑战性，特别是当您无法访问 iframe 的内容时

解决方案：

使用浏览器特定功能：

• Firefox、Opera、野生动物园： window.getCompulatedStyle(element)
• IE: element.currentStyle

应用于跨域内容：

要从跨域内容检索计算样式，您可以在现代浏览器中使用 window.getCompulatedStyle 或IE 中的 element.currentStyle。但是，这些函数仅适用于当前文档中的元素，因此您需要在使用它们之前导航到 iframe 的 DOM。

示例 (WebKit):

window.getComputedStyle(document.getElementById("frameId"), null).getPropertyValue("height")

原生 jQuery 函数：

或者，您可以使用 jQuery 的 .height() 函数，这简化了过程：

$('#frameId').height();

附加说明：

• 需要注意的是 window.getCompulatedStyle 返回一个具有计算样式的不可变对象，而 element.currentStyle 返回一个可以随元素样式更改的活动对象更改。
• 您可能需要向 iframe 内的 head 元素添加 ID，以便以后更容易选择。

以上是如何从跨域 iframe 获取计算样式？的详细内容。更多信息请关注PHP中文网其他相关文章！