7

I'm sure it's just a problem with my syntax but I am trying to send a variable to an iframe (for colorbox to use). For the time being I am accepting any domains on both ends (just to get it to work). Here is the js for the sending page:

$(document).ready(function() {
 if(window.location.hash) {
  var urlimage = window.location.hash.substring(1);
  targetiframe = document.getElementById('wbgallery').contentWindow;
  targetiframe.postMessage(urlimage, "*");
  console.log(urlimage);
 }
});

And here is the receiving page:

$(document).ready(function() {    
 window.addEventListener('message',receiveMessage);
 console.log(event);
 function receiveMessage(event) {
   if (origin !== "*")
   return;
   inbound = event.data;
   console.log(inbound);
 }
});

I see the console log for urlimage and can see an event but nothing for inbound. I'm using Mozilla's explanation to try and work it all out.

Daniel
  • 782
  • 2
  • 6
  • 24
  • 1
    `receiveMessage` is using the variable `origin` that has never been set. So it returns. – Barmar Nov 07 '16 at 09:07
  • You also have `console.log(event)` outside the function with the `event` parameter. What's that supposed to do? – Barmar Nov 07 '16 at 09:07
  • I guess `origin` should be `event.origin`, but why are you even bothering with that? It can never be `*`, it's always a URL. – Barmar Nov 07 '16 at 09:09
  • @Barmar I'm pretty shaky outside of jQuery and I have been trying different combos of syntax for about an hour or two. I even had removed the if statement with the idea that receiving the message would just fire the console log - but no luck. Then I thought that maybe origin was required so put it back in. I can't seem to get anything to "happen" in the recieveMessage function, what should I put? The `console.log(event)` was just to see if anything showed up. Saw someone else do it on a SE question and thought I'd try it. – Daniel Nov 07 '16 at 09:14
  • You're sending the message before the page in the iframe has loaded and added the `message` event listener. I used `setTimeout` to delay the sending code by 1 second and it worked. – Barmar Nov 07 '16 at 09:30
  • @barmar Whoo hoo! That was it! So it seems I did have all the syntax right but it's just the timing... which is another challenge to get over but I think it's a bit more workable. Thanks. If you want to add that as an answer I'm happy to mark it as such. – Daniel Nov 07 '16 at 10:16

1 Answers1

13

You're sending the message before the page in the iframe has loaded, so the message listener hasn't been established yet.

You can have the iframe send a message to the parent when it's ready, and then send the message after this.

Parent code:

$(document).ready(function() {
  if (window.location.hash) {
    var urlimage = window.location.hash.substring(1);
    var targetiframe = document.getElementById('wbgallery').contentWindow;
    $(window).on("message", function(e) {
      targetiframe.postMessage(urlimage, "*");
      console.log(urlimage);
    });
  }
});

Iframe code:

$(document).ready(function() {
  $(window).on('message', function(event) {
    inbound = event.data;
    console.log(inbound);
  });
  window.parent.postMessage("ready", "*");
});
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Hi, just quick question. I'm getting "Uncaught SyntaxError: missing ) after argument list" error and indicating it's somewhere at `receiveMessage(event)`... I don't get it as it all looks fine according to jQuery's .on() docs. Any ideas? – Daniel Nov 08 '16 at 02:49
  • Sorry, that was an editing mistake, it should be `function(event)` – Barmar Nov 08 '16 at 02:57
  • Thanks, that's working now. However, do you know why the event.data would be returning 'undefined'? The variable is correct on the sending page but doesn't seem to be passed on correctly? – Daniel Nov 08 '16 at 03:37
  • If I revert it back to the non-jQuery way though it works, ie, removing .on() and reverting back to addEventListener(). – Daniel Nov 08 '16 at 04:23
  • I'm not sure. When I was doing my testing I used `addEventListener`, I thought I could just replace it with `on` and it would be equivalent and shorter. Now I'm having trouble reconstructing my original version. – Barmar Nov 08 '16 at 17:26
  • Yes it's strange, I would have thought they were equivalent. Well, after much wrangling I finally have an image gallery from another server which is in an iframe communicating with its parent. http://www.abc.net.au/btn/topic/welcomebook-gallery.htm – Daniel Nov 09 '16 at 05:21