How to access iFrame parent page using jquery?

When using jQuery to access the parent page of an iframe, the common approach is to utilize jQuery's parent() or contents() methods. Here is a step-by-step guide on how to implement this:

Step 1: Verify Same-Origin Policy

First, ensure that the iframe and the parent page comply with the Same-Origin Policy (i.e., the protocol, domain, and port are identical). If this policy is not satisfied, the browser blocks cross-origin access, meaning you cannot access the parent page's DOM from within the iframe.

Step 2: Access the Parent Page's DOM Using jQuery

You can use jQuery's parent() or contents() methods to interact with the parent page. Below are two common usage scenarios:

Scenario 1: Accessing Elements within the iframe from the Parent Page

If you need to access elements inside the iframe from the parent page, use the contents() method to retrieve the iframe's content.

javascript
$(document).ready(function() {
    var iframeBody = $('#myIframe').contents().find('body');
    // Now you can manipulate the iframe's body, for example:
    iframeBody.append('<p>Hello from Parent!</p>');
});

Here, #myIframe is the ID of the iframe.

Scenario 2: Accessing Parent Page Elements from within the iframe

If you need to access the parent page from within the iframe's script, use the parent() method.

javascript
$(document).ready(function() {
    var parentDiv = $(window.parent.document).find('#parentDiv');
    // Now you can manipulate the parent page's #parentDiv element, for example:
    parentDiv.append('<p>Updated from Iframe!</p>');
});

Here, #parentDiv is the ID of an element on the parent page.

Considerations

• Security: When using these methods, ensure your pages are secure to prevent potential Cross-Site Scripting (XSS) attacks.
• Performance Considerations: Accessing the DOM of other frames may cause performance issues, especially in complex pages or multi-frame applications.

This covers the methods for accessing the parent page or iframe content across different scenarios using jQuery.