如何存取跨域 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中文網其他相關文章！