Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    sending data from iframe to iframe (cross domain

    Hi there everybody,
    I've got this problem which I can't solve myself...

    I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe.

    Unfortunally I can't get this to work... Will somebody please help me?

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    If you can add scripts to both domains then you could use postMessage to communicate between them in modern browsers. See http://javascriptexample.net/bom14.php for more info. Without access to add scripts to both pages it can't be done for security reasons.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Both domains are accesible by me so that's no problem, I understand that i should use postMessage but I do not know how to use this to send a value from the textbox on the right (iframed) to a different textbox (iframed)...

    So if you have or can make a small example I should be able to implement this in my site.

    Thanks in advance!

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    the first part, sending the message from the iframe page, is easy: top.postMessage("mydata", "*")...

    the 2nd part is tougher. you have to add an event handler to the top page, watching for the "message" event on window. addEvent(window, "message", fnMyHandler)...

    fnMyHandler needs to be custom per project. basicall inside that function, arguments[0].data is the message passed, "mydata" in this example.
    you should consider verifying the origin of the sending frame, but based on what you described, i don't think security is much of an issue for this project...

    https://developer.mozilla.org/en/DOM/window.postMessage
    in action: http://html5demos.com/postmessage2
    Last edited by rnd me; 05-18-2012 at 08:08 PM.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #5
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks,

    I've got that working but now comes the harder part...
    I've got 5 textboxes in my Iframe on the right and I would like to send those 5 values to the 5 textboxes in the middle...

    I can now send just one value (e.data) but how do I combine those 5 values and then take apart those 5 values and put them back in a textbox?

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by pulletje View Post
    Thanks,

    I can now send just one value (e.data) but how do I combine those 5 values and then take apart those 5 values and put them back in a textbox?

    you make an object with all 5, and send the json version of that object as e.data...

    Code:
    ex:
    
    var boxes=[
     ta1.value,
     ta2.value,
     ta3.value,
     ta4.value,
     ta5.value
    ];
    
    var asString=JSON.stringify(boxes);
    //send asString.
    
    
    
    //on receiving end, 
    
    var boxes=JSON.parse(e.data);
    
    ta1.value = boxes[0];
    ta2.value = boxes[1];
    ta3.value = boxes[2];
    ta4.value = boxes[3];
    ta5.value = boxes[4];
    of course, you need to sub ta1 for a reference to your first textarea, and so on, but this is the idea...
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •