Cross domain iframe issue Cross domain iframe issue jquery jquery

Cross domain iframe issue


If you don't have control over the framed site, you cannot circumvent the cross-domain policy.

If you have control over both sites, you can use the postMessage method to transfer data across different domains. A very basic example:

// framed.htm:window.onmessage = function(event) {    event.source.postMessage(document.body.innerHTML, event.origin);};// Main page:window.onmessage = function(event) {    alert(event.data);};// Trigger:// <iframe id="myframe" src="framed.htm"></iframe>document.getElementById('myframe').contentWindow.postMessage('','*');


In Internet Explorer 8, events passed as a parameter may be null, that is why you need to access the event in a different manner:

In frame.html:

window.onmessage = function(event) {   var evt = event || window.event;   evt.source.postMessage('Message from iFrame', evt.origin);};

On main.html:

window.onmessage = function(event) {   var evt = event || window.event;   alert(evt.data);};

The event is triggered the same way as Rob W has presented:

document.getElementById('frameId').contentWindow.postMessage('message','*');


iFrame does not allow to access contents from Cross Domain platform. You can only access if your iFrame is using the same domain.

This solution works same as iFrame. I have created a PHP script that can get all the contents from the other website, and most important part is you can easily apply your custom jQuery to that external content. Please refer to the following script that can get all the contents from the other website and then you can apply your cusom jQuery/JS as well. This content can be used anywhere, inside any element or any page.

<div id='myframe'>  <?php    /*     Use below function to display final HTML inside this div   */   //Display Frame   echo displayFrame();   ?></div><?php/*   Function to display frame from another domain */function displayFrame(){  $webUrl = 'http://[external-web-domain.com]/';  //Get HTML from the URL  $content = file_get_contents($webUrl);  //Add custom JS to returned HTML content  $customJS = "  <script>      /* Here I am writing a sample jQuery to hide the navigation menu         You can write your own jQuery for this content      */    //Hide Navigation bar    jQuery(\".navbar.navbar-default\").hide();  </script>";  //Append Custom JS with HTML  $html = $content . $customJS;  //Return customized HTML  return $html;}