如何访问跨域 IFrame 元素的计算样式（例如高度和宽度）？

跨域访问计算样式

在 Web 开发中，从跨域元素获取计算样式可能会带来挑战。在本例中，您的目标是从不同的域检索 iframe 中元素的高度和宽度计算样式。

方法

要访问此中的计算样式场景，请考虑以下方法：

• window.getCompulatedStyle() for WebKit 浏览器：

  1. WebKit 浏览器（例如 Safari 和 Chrome）提供了 window.getCompulatedStyle() 方法。

  2. 您可以按如下方式使用它：

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

  3. 这将返回计算出的样式值（例如， "1196px")。

• IE 的 element.currentStyle：

  1. Internet Explorer 使用 element.currentStyle 属性来访问计算样式。

  2. 示例用法：

     document.getElementById("frameId").currentStyle.height;

  3. 请注意，element.currentStyle 仅反映在元素上显式设置的样式，而不反映计算值。

• 导航到 iFrame 的 DOM：

  1. 如果您需要访问 iframe 内容的计算样式（例如 HTML 元素），您可以导航到 iFrame 的 DOM。
  2. 使用 iframeObject.contentDocument.documentElement 访问 iFrame 文档的根元素。
  3. 然后您可以将 window.getCompulatedStyle() 或 element.currentStyle 应用于 iframe 中的适当元素DOM.

示例

使用您提供的代码，以下是如何检索 HTML 的高度计算样式的示例iframe 中的元素使用window.getCompulatedStyle():

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

补充说明

• 确保iframe有id属性，方便元素选择
• 屏幕截图中指定的高度和宽度值似乎以像素为单位，但必须在实际中验证它们的单位场景。

以上是如何访问跨域 IFrame 元素的计算样式（例如高度和宽度）？的详细内容。更多信息请关注PHP中文网其他相关文章！