How Can I Access Computed Styles (e.g., Height and Width) of a Cross-Domain IFrame Element?

Accessing Computed Styles Cross-Domain

In web development, obtaining computed styles from cross-domain elements can pose a challenge. In this instance, you aim to retrieve the height and width computed styles of an element within an iframe from a different domain.

Approach

To access computed styles in this scenario, consider the following approaches:

• window.getComputedStyle() for WebKit Browsers:

  1. WebKit browsers (such as Safari and Chrome) provide the window.getComputedStyle() method.

  2. You can use it as follows:

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

  3. This returns the computed style value (e.g., "1196px").

• element.currentStyle for IE:

  1. Internet Explorer uses the element.currentStyle property to access computed styles.

  2. Example usage:

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

  3. Note that element.currentStyle only reflects styles explicitly set on the element, not computed values.

• Navigating into iFrame's DOM:

  1. If you need to access the computed styles of the iframe's content (e.g., the HTML element), you can navigate into the iFrame's DOM.
  2. Use iframeObject.contentDocument.documentElement to access the root element of the iFrame's document.
  3. You can then apply window.getComputedStyle() or element.currentStyle to the appropriate elements within the iframe's DOM.

Example

Using the code you provided, here's an example of how to retrieve the height computed style of the HTML element within the iframe using window.getComputedStyle():

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

Additional Notes

• Ensure that the iframe has an id attribute to facilitate element selection.
• The specified height and width values in your screenshot appear to be in pixels, but it's essential to verify their units in your actual scenario.

The above is the detailed content of How Can I Access Computed Styles (e.g., Height and Width) of a Cross-Domain IFrame Element?. For more information, please follow other related articles on the PHP Chinese website!