Невозможно вызвать функцию в дочернем iframe родителем через postMessage() - перекрестное происхождение

Question

Я не могу получить это обходное решение CORS для работы в Chrome 52.0. Моя iframe и родительская страница находятся на разных поддоменах.

слушатель события моего Iframe в:

window.onload = function() { 
    window.addEventListener("message", function(event) { 
     //doesn't log it 
     console.log('message'); 
     if(event.data === "invokeChildFunction()") { 
      childFunction(); 
     } 
    }); 
    function childFunction() { 
     alert('Parent frame just invoked my function') 
    } 
} 

Родитель рама:

var iframeWindow = $('iframe').contentWindow; 
var invokeChildFunction = function() { 
    iframeWindow.postMessage("invokeChildFunction()", "https://mansion-assessment-sdimoff.c9users.io/CORS/index.html"); 
} 

invokeChildFunction() ничего не войти на странице Iframe в

Answer 1

Вы должны попробовать использовать

В исходный код:

var iframe = $('iframe')[0]; 
iframe.contentWindow.postMessage('invokeChildFunction', iframe.contentWindow.location); 

В детстве/IFRAME:

window.addEventListener('message', function (event) { 
    if (event.data === 'invokeChildFunction') { 
    // do whatever you want to 
    } 
}) 

То, что вы сделали неправильно было выбора элементов с тегом-имени, по выбору элементов с именем тега вы получаете массив элементов, так что вы должны ссылаться на них как массив ,

Также используйте некоторую валидацию для проверки источника событий.