Блог

Как передать переменную через postMessage. Я могу вызвать родительскую функцию следующим образом:

 function parent_goTopPage() {
  window.parent.postMessage({"func": "goTopPage"}, "*");
}
  

Но не нашел способа передать переменную в функции. Например, переменная myvar в родительской функции checkVar:

 function checkVar(myvar) {
  alert(myvar);
}
  

Следующий javascript не работает:

 function parent_checkVar(myvar) {
  window.parent.postMessage({"func": "checkVar("   myvar   "}, "*");
}
  

Редактировать

Я, наконец, понял, что у меня уже была такая возможность с опцией «сообщение» window[data.func].call(null, data.message);

В родительском окне:

 function checkVar(myvar) {
  alert(myvar);
}

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

function onMessage(event) {
  // Check sender origin to be trusted
  if (event.origin !== "https://example.com") {
     alert("Error Cross-origin onMessage.");
     return;
  };
   var data = event.data;
   if (typeof(window[data.func]) == "function") {
     window[data.func].call(null, data.message);
  }
}
  

Внутри iframe:

 function parent_checkVar(myvar) {
   window.parent.postMessage({"func": "checkVar", "message":myvar}, "*");
}
parent_checkVar(3);
  

Выбор «сообщения» был мне не очень понятен, я изменил его на var1 только в (родительских окнах):

 window[data.func].call(null, data.var1);
  

И далее (iframe):

 window.parent.postMessage({"func": "checkVar", "var1":myvar}, "*");
  

С выбором «сообщение» произошло недоразумение с этой строкой (родительское окно) window.addEventListener("message", onMessage, false); . "message" должно оставаться с этим именем.

Во-первых, опубликованный вами JavaScript содержит искаженный объект. Это должно быть {"func": "checkVar(" myvar ")"}

Во-вторых, хотя вы и не опубликовали его, я почти уверен, что вы хотите использовать eval() for checkVar(myVar) . Вместо этого вы можете создать объект и назначить функцию с ключевым именем «checkVar». Когда вы сделаете это, вы можете передать переменную checkVar отдельно и вызвать функцию, используя объект. Вы можете увидеть пример ниже:

Передайте дополнительный ключ / значение с вашим объектом. Я добавил "thisvar":myvar .

 window.parent.postMessage({"func": "checkVar", "thisvar":myvar}, "*");
  

На вашем слушателе вы создаете объект с вашей функцией внутри него.

 var postFunctions = {
  'checkVar': function(myvar) {window.alert(myvar);}
}
window.addEventListener('message', function(event) {
  // checks if the function "checkVar" exists inside the "postFunctions" object
  if (postFunctions[event.data.func]) {
    // if it does exist, call that function and pass the variable as an argument
    postFunctions[event.data.func](event.data.thisvar);
  }
});