window.postMessage communication

[Matej]

Hola , im trying to communicate with two windows (both local html files) using window.postMessage() , here are my scripts :

first site

 function kolko(){ var x=window.open("torek.html");             //this opens new windowx.postMessage("hello","torek.html");}  <button onclick="kolko()">click</button>  

second site

var g;window.addEventListener("message",function(){if(event.origin==="fasd.html"){g=event.data;alert(g);}},false)  

The second one doesnt work , it didnt even thrown error in consoleany solutions ?

Edited January 8, 2015 by Matej

[justsomeguy]

Have you verified that the event is firing, and what the data is for it?

[Matej]

Right , i tried to do simply

window.addEventListener("message",function(){alert("working")},false)

and nothing happens = event aint firing at all , why is that?

 

//

but now , it did throw error on parent site

:Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin 'torek.html' in a call to 'postMessage'.: it says invalid target origin , whats with that? Both of thise sites are in the same foled and window.postMessage works on local files

Edited January 8, 2015 by Matej

[justsomeguy]

If I do a search for that error message, and check the documentation for postMessage, I find that the second parameter is not simply a filename. The second parameter is the target origin.

[Matej]

Im quite confused now , so what should be "target origin"? , it didnt work with " * " either ,

[Ingolme]

Here's the documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

 

The targetOrigin property contains information about the website that's meant to receive the information. It can be "*" or a URI which has the scheme (http: or https:) and the domain name of the site that's receiving the message.

 

It's probable that some browsers won't allow this to work in the local filesystem for security reasons, I find it happens with a lot of features.

[justsomeguy]

If at the time the event is scheduled to be dispatched the scheme, hostname, or port of otherWindow's document does not match that provided in targetOrigin, the event will not be dispatched

What do you suppose the scheme, hostname, and port are for a file you just double-click on?

[Matej]

Thanks for answers , yes thought too it would be problem that my "sites" are just local html files , but i found on stackoverflow that it works with local files (maybe the persons were wrong)

[Ingolme]

If they say on StackOverflow that it can be done on the filesystem then it probably is true. I assume that if it can work on the local filesystem at all it probably only does with "*" as the target origin.

 

When you pass "*" to the function, what error message do you get?

[Matej]

If they say on StackOverflow that it can be done on the filesystem then it probably is true. I assume that if it can work on the local filesystem at all it probably only does with "*" as the target origin.

 

When you pass "*" to the function, what error message do you get?

Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin ' * ' in a call to 'postMessage'. also when i use "*" it says nothing (i used " * " )

[justsomeguy]

It's a problem if you put spaces around that.

[Matej]

Thanks, wasnt sure about that , thats why i tried to use both , with but "*" didnt work nor throw error

[Ingolme]

Show the code you have on both of your pages.

[Matej]

Show the code you have on both of your pages.

var x;function kolko(){ x=window.open("torek.html");x.postMessage("Hello world!","*");}

window.addEventListener("message",function(){alert("success");alert(event.data);},false);

Edited January 9, 2015 by Matej

[Ingolme]

Try this:

x=window.open("torek.html");x.onload = function() {    x.postMessage("Hello world!","*");}

In the second window, be sure you create the event variable:

window.addEventListener("message",function(event){

 

The theory behind it is that the moment you open the new window, the Javascript inside it has not yet started running, so it's not there to listen to the message you sent to it.

[Matej]

Try this:

x=window.open("torek.html");x.onload = function() {    x.postMessage("Hello world!","*");}

In the second window, be sure you create the event variable:

window.addEventListener("message",function(event){

 

The theory behind it is that the moment you open the new window, the Javascript inside it has not yet started running, so it's not there to listen to the message you sent to it.

Still not working :/ and still without error , also i tried to simple

 

x.onload=function(){alert("loaded");}

which didnt work either

Edited January 9, 2015 by Matej

[Ingolme]

It's working for me in Firefox, but Chrome doesn't fire the onload event because the window seems to already be considered loaded by the time I assigned the event listener.

 

As a test to confirm this, I substituted the onload event with a setTimeout call that waits one second before sending the message and it works, that's an unstable solution.

 

I'm currently trying to figure out a way to detect when the script is ready in Chrome, but it's not behaving properly. document.readyState is set to "complete" when I check it from the parent window even when the page isn't fully loaded.

[Matej]

I found only this.

 

The targetOrigin argument for a message sent to a window located at a chrome: URL is currently misinterpreted such that the only value which will result in a message being sent is "*". Since this value is unsafe when the target window can be navigated elsewhere by a malicious site, it is recommended that postMessage not be used to communicate with chrome: pages for now; use a different method (such as a query string when the window is opened) to communicate with chrome windows. Lastly, posting a message to a page at a file: URL currently requires that the targetOrigin argument be "*". cannot be used as a security restriction; this restriction may be modified in the future.

 

Which means it should works with local html files but target.origin has to be "*" , dunno why it aint workin

Edited January 9, 2015 by Matej

[Ingolme]

It's not about the targetOrigin parameter, the postMessage function works fine. The problem is that you're sending the message before the receiving document is listening for it.

 

It looks like Chrome doesn't let you set the onload function because it's being executed in the local filesystem and security features prevent functions from being executed between local files.

 

This works fine on a server environment.

page1.html

var target = window.open("page2.html");target.onload = function() {    target.postMessage("Hello, World!", "*");};

page2.html

window.addEventListener("message",function(e){    alert(e.data);},false);

This works on the desktop but is not a reliable solution:

page1.html

var target = window.open("page2.html");setTimeout(function() {    target.postMessage("Hello, World!", "*");}, 1000);

[Matej]

Seems like problem is "solved" , thanks for effort