15

I have an iframe being created on a page, and the page's domain is being explicitly set to 'xyz.com' but the iframe's domain is defaulting to 'dev.xyz.com', which is the actual domain i'm developing for.

The problem is, when I try to access that iframe via iframe.contentWindow.document, it fails due to the difference in domain.

I've tried setting the iframe's src to a file with document.domain = 'xyz.com' but that doesn't seem to be doing the trick...

Any ideas?

6
  • I believe you need to set both the iframe's document.domain and the main page's document.domain to the same thing. (more info here)
    – Alconja
    Dec 22, 2009 at 23:25
  • As a follow up, here is the code that is creating the iframe, and attempting to access it: jQuery("body").prepend('<iframe id="jQuery_history" style="display: none;"'+' src="javascript:false;"></iframe>'); var ihistory = jQuery("#jQuery_history")[0]; var iframe = ihistory.contentWindow.document;
    – Chris
    Dec 23, 2009 at 0:07
  • Since you have access to both parent and iframe, I'd recommend the following read: onlineaspect.com/2010/01/15/backwards-compatible-postmessage Nov 23, 2010 at 0:32
  • Ben Alman has an awesome jquery plug-in that can be used to solve this problem. benalman.com/projects/jquery-postmessage-plugin
    – Justin
    Apr 6, 2011 at 13:46
  • 1
    This library supports HTML5 postMessage and legacy browsers with resize+hash github.com/ternarylabs/porthole (Ben Alman's jQuery Plugin hasn't been touched in 3 years)
    – jpillora
    Feb 27, 2013 at 14:43

3 Answers 3

12

Page inside iframe:

<script>
document.domain = document.domain;
</script>

It looks silly, but it works. See "What does document.domain = document.domain do?".

1
  • 1
    This dirty hack will interfere, when you'll be having Access-Control-Allow-Origin requests, alike CDNs in AJAX loads from JS. Be careful in using it.
    – Farside
    Mar 21, 2016 at 18:45
8

After some research, I found this jQuery plugin that makes postMessage backwards-compatible with older browsers using various tricks.

Here is a quick example showing how to send the height of the iframe's body to the parent window:

On the host (parent) page:

    // executes when a message is received from the iframe, to adjust 
    // the iframe's height
    $.receiveMessage(
        function( event ){
            $( 'my_iframe' ).css({
                height: event.data
            });
    });
   // Please note this function could also verify event.origin and other security-related checks.

On the iframe page:

$(function(){

    // Sends a message to the parent window to tell it the height of the 
    // iframe's body        
    var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);

    $.postMessage(
        $('body').outerHeight( true ) + 'px',
        '*',
        target
    );

});

I've tested this on Chrome 13+, Firefox 3.6+, IE7, 8 and 9 on XP and W7, safari on OSX and W7. ;)

0

As a addition to the reference to the Ben Alman plug in I thought I would post this working example. It ]rRelies on an iframe which has a source page containing jquery authentication & data query script which then passes the result to {other domain} parent window using the message plugin.

NB message plugin will break if using JQ v9 as JQV9 does not use "browser" referenced in the plugin

1st step: Add the plugin code to both sending and receiving docs:

http://benalman.com/projects/jquery-postmessage-plugin/

2nd step: Add this to sending doc:

   $.postMessage(
$(X).html(),    
'http://DOMAIN [PORT]/FOLDER/SUBFOLDER/RECIEVINGDOCNAME.XXX'   
 )  ;      

Where X can be a local var containing preformatted json array or other stuff, and the http url here is the address of the receiving document.

3rd step: Add this to receiving doc:

    $.receiveMessage(
    function(event){
        alert("event.data: "+event.data);
                $("#testresults").append('<h1>'+event.data+'<h1>');

    },          
    'http://DOMAIN.COM OR SOMETHING'

);

Where the http url is the DOMAIN of the sending document. Good in IE 8, 9, FF16, safari Windows (windows wait x V9 not tested yet), safari x mac thing.

The result is any item you want out of another domain page (that you have access to..).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.