Tworzę skrypt, który działa na każdej stronie internetowej (za pomocą Tampermonkey). Na skrócie wstrzykiwać formularz na stronę. Więc jeśli jestem w stackoverflow, naciskam cmd + esc i osadzam lokalną stronę Vuejs

Krok 1: Wtrysk IFrame na (powiedzmy) stos przepełnienia i wyślij wiadomość do wbudowanej witryny **

var iframe = document.createElement("iframe");
  iframe.type="text/html"
  iframe.src="http://localhost:8080/webhighlights"
  iframe.id="localFrame"
var data = {title: document.title,   url: window.location,}
  iframe.onload= function(){
      var t = document.getElementById('localFrame'); 
    t.contentWindow.postMessage({
        data
    }, 'http://localhost:8080/webhighlights');
  }

Krok 2: Uzyskaj wiadomość z witryny, która mnie osadzona:

mounted: function () {
/* eslint-disable */
    window.top.addEventListener('message',receiveMessage, false);
      function receiveMessage (event) {
        console.log('event data: ', event)
      }
}

Wiadomość nie przechodzi. Błąd, który dostaję w konsoli, jest Failed to execute 'postMessage' on 'Window': Location object could not be cloned. at HTMLIFrameElement.iframe.onload

0
relidon 26 październik 2020, 07:05

1 odpowiedź

Najlepsza odpowiedź

Wysyłasz wiadomość do kontekstu twojego IFRAME, więc z tej iframe nie chcesz słuchać wiadomości top, ale tylko dla tego IFrame's window.

Zmiana

window.top.addEventListener('message',...

Do

window.addEventListener('message',...

Jeśli chcesz lepiej zrozumieć, jak działa przesyłanie wiadomości, zapraszam do przeczytania Ta odpowiedź kopalni
Baiscally z iframe, jeden port znajduje się w głównym kontekście, pod HTMLIframeElement.contentWindow, a drugi jest w kontekście IFRame, pod window. Aby komunikować się między obiema kontekstami, każdy kontekst powinien słuchać i rozmawiać we własnym porcie.


Gdy jest to naprawione, będziesz stawić czoła nowym wydaniu, że {{x0 }} Obiekt nie może być klonowany. Ponieważ najwyraźniej chcesz wysłać aktualny adres URL głównej strony, a następnie wyślij to tylko:

var data = {title: document.title,   url: window.location.href };
0
Kaiido 26 październik 2020, 04:43