How to Retrieve Computed Style Values from Cross-Domain Iframes?

Retrieving Computed Style Values of Cross-Domain Elements

When working with iframes from different domains, accessing computed style information can be challenging. To obtain the calculated styles, follow the comprehensive solution provided below.

WebKit Browsers

For WebKit-based browsers, use the following code snippet:

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

Alternatively, you can access the computed value as CSS text:

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

Internet Explorer

For Internet Explorer, employ the 'currentStyle' property:

document.getElementById("frameId").contentDocument.body.currentStyle.height

Iframe Contents

However, to obtain the computed style of the iframe's contents, you'll need to navigate deeper into the DOM using the following steps:

1. Get the reference to the iframe document:

   var iframeDoc = document.getElementById("frameId").contentDocument;

2. Perform the appropriate code based on the browser type as described above.

Example

Once you have the computed style, you can access it as follows:

iframeDoc.getElementById("brshtml").style.height

Note that the "brshtml" id may need to be adjusted if it is not present in the target document.

The above is the detailed content of How to Retrieve Computed Style Values from Cross-Domain Iframes?. For more information, please follow other related articles on the PHP Chinese website!