Канал обмена сообщениями на HTML 5 с Javascript

Question

У меня проблема с каналом обмена сообщениями в HTML 5. С одной стороны у меня есть код:

<iframe id="ifr" src="receive.html" onLoad="initMessaging()" ></iframe>
<button onClick="postMsg()">Wyslij</button>

<script type="text/javascript">
 var channel = new MessageChannel();

channel.port1.onmessage = function (evt) {
    alert(evt.origin + ": " + evt.data);
 };

 function initMessaging() {
     var child = document.getElementById("ifr");
     child.contentWindow.postMessage('hello', 'http://localhost:85', [channel.port2]);
 }

 function postMsg() {
     channel.port1.postMessage('Message sent from ' + location.host);
 }

И на втором сайте:

     <input type="button" value="Post Message"  onClick="postMsg();" />


<script type="text/javascript">
var port = null;
window.addEventListener("message", function (e) {
    port = e.ports[0];
    port.onmessage = function (e){
    port.addEventListener("message", function (evt) {alert("Received message \"" + evt.data + "\" from domain: " + evt.origin);
     }, false);
 }
}, false);


 function postMsg() {
 if(port) {
     port.postMessage("Data sent from " + location.host);
 }

Почему это не работает?Что я делаю не так?

Большое спасибо за помощь!

Answer 1

HTML5 интерфейс postMessage не очень хорош. Я предлагаю интуитивно понятный. Вы можете скачать его с моего сайта: http://www.jackiszhp.info/tech/postMSG.html

window.MSG.post (msgname, msgdata, arrayOfDomainTarget, arrayOfWindowIDTarget)

это «окно» может быть опущено, не похожее на указанное в HTML5 там вам нужен объект окна. Здесь нет. это «окно» просто указывает, что MSG находится в глобальном пространстве.

msgname - имя категории сообщений. msgdata - это объект JSON. он будет зачеркнут перед постом arrayOfDomainTarget, arrayOfWindowIDTarget Я использую логическое И. изначально это было ИЛИ позже я изменил его на И. более подходящий. Похоже. и я позволю "*" быть подстановочным знаком для всех windowID.

информация о вызывающем абоненте вообще отсутствует в параметре так как браузер знает всю информацию. поэтому мы видим, что этот метод не позволяет отправителю обмануть получателя.

отправитель просто позвонит следующим образом.

window.name="myWindowID";
MSG.post("cmd",{what:'do thing abc',parameter:'the value of a parameter'},["jackiszhp.info"],[*]);

для приемника, 2 вещи.

//#1 define the message handler
function messageHandler(e){
var obj=JSON.parse(e.detail);
obj.name is the msgname = 'cmd'
obj.data is the msgdata = {what:'fuck',who:'not to tell'};
obj.source  is the sender
obj.source.href  is the sender's window.location.href
obj.source.WID  is the sender's window.name="myWindowID";
obj.target  is the target of this event
obj.target.domains  is the target domains of this event
obj.target.WIDs  is the target WIDs of this event
....
}
//#2 register the message handler
window.addEventListener(msgname, messageHandler,false);
or
document.addEventListener(msgname, messageHandler,false);

//to respond, 
window.name="hereMywindowID";
MSG.post("cmd",{what:'do thing def',parameter:'the value of a parameter'},["jackiszhp.info"],['myWindowID']);

//clearly, we can see that this response only the original sender can receive it.
//unless in the target domain, accidently, there are two windows with same ID "myWindowID".

Дополнительное примечание:

A. окно может быть однозначно идентифицировано. но здесь я им не пользовался. Вместо этого я использую window.name. Об идентификаторе окна вы можете посмотреть по этой ссылке: https://developer.mozilla.org/en-US/docs/Code_snippets/Windows#Uniquely_identifying_DOM_windows

B. Я надеюсь, что Mozilla сможет взять мой интерфейс и включить его в Firefox.

Answer 2

Я думаю, вам нужно использовать форму для вызова функции postMessage и отправки сообщения. Вот учебник , который показывает более простой способ сделать это.