How Can I Access an IFrame's Content Using JavaScript?

How to Access the Content of an Iframe in JavaScript

To retrieve the content of the body element within an iframe using pure JavaScript, there are several steps to follow:

1. Obtain the Iframe Object:

const iframe = document.getElementById('id_description_iframe');

2. Access the Iframe's Content Document:
According to the jQuery source code, the following code provides a cross-browser solution:

const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

3. Select Elements in the Iframe:
To select elements within the iframe's content document, use:

const iframeContent = iframeDocument.getElementById('frameBody');

4. Call Functions within the Iframe:
To access global functions or variables within the iframe, obtain the iframe window object:

const iframeWindow = iframe.contentWindow;

Example:

iframeContent = iframeWindow.jQuery('#frameBody'); // if jQuery is loaded within the iframe

Considerations:

• Ensure that the iframe and its content adhere to the same-origin policy.
• This solution remains short and readable while providing cross-browser compatibility.

The above is the detailed content of How Can I Access an IFrame's Content Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!