How Can I Retrieve Computed Styles from a Cross-Domain Iframe?

Retrieve Computed Style from Cross-Domain Iframe

This article focuses on obtaining the computed style of an HTML element within an iframe located on a different domain. The goal is to retrieve specific CSS properties like height and width that browsers calculate and use.

To access the computed style, you can utilize the following:

Browsers Other Than IE

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

This script returns the computed height of the element. Alternatively, you can also use:

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

IE

element.currentStyle

This method returns the current style object for the specified element.

Cross-Domain Considerations

Since you cannot access the iframe directly due to cross-domain restrictions, you need to find another way to access the element you need. You can do this by manipulating the DOM of the iframe's document.

Selecting the Target Element

To select the desired element, you can use the following:

document.getElementById("frameId").contentDocument.getElementById("brshtml")

This assumes that the head element of the iframe's document has an id of "brshtml."

The above is the detailed content of How Can I Retrieve Computed Styles from a Cross-Domain Iframe?. For more information, please follow other related articles on the PHP Chinese website!