How to target an element outside an iframe with different protocol using Javascript postMessage

Question

I have a button in an iframe and I wish that, it triggers another button, which is found outside the iframe, when clicked.

Here is a piece of code that I have been trying to work out.

The HTML

<body>
 <iframe id="layer-frame" src="https://somepage.com">
  <a href="https://page2.com" target="_blank" id="js-gopage2" class="js-iframepostmsg" alt="CLICK HERE TO Edit your profile">Edit your profile</a>
 </iframe>
 <div>
  <a class="close" href="#">Close<span></span></a>
 </div>
</body>

in Parent html

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
 if(event.data == "click!") {
  $('a.close').trigger('click');
 }
}

in iframe

var targetOrigin = window.location.host;
top.window.postMessage("click!", targetOrigin);

Answer 1

targetOrigin = window.location.host is going to give you the hostname of the page you are posting from but:

targetOrigin
Specifies what the origin of otherWindow must be for the event to be dispatched

and

the scheme, hostname, or port of otherWindow's document does not match that provided in targetOrigin

so you need to provide a complete origin (such as http://example.com:234 ), not just the hostname.

If you don't care which origin is allowed to read the message, use "*" .

How to target an element outside an iframe with different protocol using Javascript postMessage

Question

1 answers

solution1
0 ACCPTED 2014-09-16 10:45:07

How to target an element outside an iframe with different protocol using Javascript postMessage

Question

1 answers

solution1 0 ACCPTED 2014-09-16 10:45:07

solution1
0 ACCPTED 2014-09-16 10:45:07