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

How to Retrieve Computed Styles from Cross-Domain Content

Problem:

Accessing the computed height and width values of an element from a cross-domain iframe can be challenging, particularly if you're not able to access the iframe's content directly.

Solution:

Using Browser-Specific Functions:

• Firefox, Opera, Safari: window.getComputedStyle(element)
• IE: element.currentStyle

Applying to Cross-Domain Content:

To retrieve computed styles from cross-domain content, you can use window.getComputedStyle in modern browsers or element.currentStyle in IE. However, these functions only work on elements within the current document, so you need to navigate into the iframe's DOM before using them.

Example (WebKit):

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

Native jQuery Function:

Alternatively, you can use jQuery's .height() function, which simplifies the process:

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

Additional Notes:

• It's important to note that window.getComputedStyle returns an immutable object with the computed styles, while element.currentStyle returns a live object that can change as the element's style changes.
• You may need to add an ID to the head element within the iframe to make it easier to select later on.

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