Не удается отправить данные в iframe из родительского окна с помощью postMessage в Chrome Extension

Question

Я разрабатываю расширение Google Chrome, которое внедряет скрипт на веб-страницу, собирает некоторые данные с веб-страницы, вызывается iframe и отправляет эти данные в IFrame. Поскольку этот процесс должен быть междоменным, postMessage - единственное, что я мог придумать для его реализации, однако я не могу получить эти данные в iframe.
(Btw, есть ли другой способ, с помощью которого я могу достичь такой же функциональности?)

Ниже приведен мой сценарий, который я вставляю на веб-страницу, когда пользователь нажимает на расширение.

jQuery('body').append('<div style="height: 100% !important; width: 100% !important; position: fixed !important; margin: 0% auto !important; background: rgba(17, 17, 17, 0.9) !important; left: 0 !important; right: 0 !important; z-index: 99999999 !important; top: 0% !important;" id="image-grabber-container"><iframe id="vwframe" src="https://example.com/abcd.php" frameborder="0" style="display: block !important; position: fixed !important; height: 100% !important; width: 100% !important; top: 0px !important; left: 0px !important; bottom: 0px !important; right: 0px !important; margin: 0px !important; clip: auto !important; z-index: 7147483657 !important;"></iframe></div>'); 

setTimeout(function(){ 
    var dTitle = document.title; 
    var receiver = document.getElementById('vwframe').contentWindow; 
    receiver.postMessage(dTitle, '*'); 
},1000); 

Я использовал setTimeout здесь как раз, чтобы убедиться, что IFrame доступен/загружен, когда я отправляю сообщение.

Теперь я называю сценарий в IFRAME, чтобы получить сообщение:

window.onload = function() { 
     function receiveMessage1(e) { 
      console.log('mSG'); 
      if (e.origin !== currentUrl) 
       return; 

      parentTitle = e.data; 
      console.log(parentTitle); 
     } 
     if (window.addEventListener){ 
      console.log('if'); 
      window.addEventListener("message", receiveMessage1, false); 
      console.log('if end'); 
     } else { 
      console.log('else'); 
      attachEvent("onmessage", receiveMessage1); 
      console.log('else end'); 
     } 
} 

Я не вижу никакой ошибки в консоли однако receiveMessage1 функция не работает. Какая может быть причина?

P.S. Я смог отправить сообщение из iframe в родительский, но не наоборот.

Answer 1

Старайтесь не использовать SetTimeout и window.onload, только вместо этого:

<script> 

    function receiveMessage1(e) { 
     console.log('mSG'); 
     if (e.origin !== currentUrl) 
      return; 

     parentTitle = e.data; 
     console.log(parentTitle); 
    } 
    if (window.addEventListener){ 
     console.log('if'); 
     window.addEventListener("message", receiveMessage1, false); 
     console.log('if end'); 
    } else { 
     console.log('else'); 
     attachEvent("onmessage", receiveMessage1); 
     console.log('else end'); 
    } 
</script> 

Answer 2

По-моему, использование метода postMessage() по-прежнему является более безопасным способом передачи сообщений по доменам.

Чтобы использовать этот метод, обратите внимание, что она принимает два параметра:

• message - строка или объект, который будет отправлен в принимающем окна.
• targetOrigin - URL-адрес окна, в котором отправляется сообщение . Протокол, порт и имя хоста целевого окна должны соответствовать этому параметру для отправляемого сообщения. Указание «*» будет соответствовать любому URL-адресу, однако это настоятельно не рекомендуется по соображениям безопасности.

И этот метод должен быть вызван в окне, на которое установлено сообщение. Ссылка на целевом окно может быть получена в ряде различных способов:

• При использовании window.open() ссылки на новое окно будет возвращено методом open().
• Для фреймов вы можете получить доступ к объекту contentWindow на нужном iframe.

  targetWindow.postMessage('Hello World!', 'http://example.com');

советы по использованию, больше информации о реализации и полное руководство приведены в этом блоге - Cross-Domain Messaging With postMessage, и я думаю, что это ТАК пост - Invoking JavaScript code in an iframe from the parent page будет полезно тоже.