Error al ejecutar 'postMessage' en 'DOMWindow': https://www.youtube.com! == http: // localhost: 9000

165

Este es el mensaje de error que recibo:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided
('https://www.youtube.com') does not match the recipient window's origin 
('http://localhost:9000').

He visto otros problemas similares donde está el origen del destino http://www.youtube.comy el origen del destinatario https://www.youtube.com, pero ninguno como el mío donde está el destino https://www.youtube.comy el origen http://localhost:9000.

  1. No entiendo el problema. ¿Cuál es el problema?
  2. ¿Cómo puedo arreglarlo?
Adam Zerner
fuente
44
Tuve el mismo problema, y ​​la solución a continuación de @ChrisFranklin me lo solucionó; pero lo extraño es que con mi problema, solo obtendría el error aproximadamente la mitad del tiempo, e incluso entonces el video aún se cargaría (aunque otras cosas se romperían).
dgo
1
@dgo mismo problema, fue aleatorio en la carga de la página. Resulta (creo) que se debe a que el contenido real del iframe no está completamente listo cuando otra cosa intenta hacer un mensaje posterior. Entonces es una condición de carrera. Y si el postMessage ocurre más tarde (acción del usuario), funciona bien sin error.
IncredibleHat
incluso Google tiene ese error : abre la consola y reproduce el video aquí: developers.google.com/youtube/iframe_api_reference
T.Todua

Respuestas:

92

Creo que este es un problema con el origen del destino https. Sospecho que es porque su URL de iFrame está usando en httplugar de https. Intenta cambiar la url del archivo que intentas insertar para que sea https.

Por ejemplo:

'//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';

ser - estar:

'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
Chris Franklin
fuente
2
Eso parece haber funcionado. ¡Gracias! Así que el problema es httpcontra https? ¿No importa que los dominios difieran (youtube vs. localhost)? ¿Y qué es exactamente el origen objetivo frente al origen receptor? ¿Cómo hizo lo que dijo que cambió el origen del destinatario (mi url sigue siendo localhost: 9000)?
Adam Zerner
30
El error es un poco engañoso. En realidad, no tiene nada que ver con que estés encendido localhost:9000. El problema estaba realmente en la forma en que usabas la youtube-api. Cuando declaras la API como tag.src = "https://www.youtube.com/iframe_api";en tu código, le estás diciendo a YouTube que quieres usar SSL. Entonces, el cambio que sugerí lo cambió a usar ssl para solicitar los videos. El error solo decía que estaba mezclando llamadas ssl y no ssl.
Chris Franklin
9
Me encontré con este problema cuando intenté mover el iframe en el dom. playerEl = document.querySelector('iframe#ytplayer'); anotherEl.appendChild(playerEl); // yt complains on subsequent api calls
laboratorios
1
¿Qué pasa si estoy usando JavaScript para cargar el reproductor de YouTube?
N3R4ZZuRR0
55
cambiado a https: // para youtube y mi dominio es https: // todavía no resuelve mi problema. Error al ejecutar 'postMessage' en 'DOMWindow': el origen de destino proporcionado (' youtube.com ') no coincide con el origen de la ventana del destinatario (' test.dev ').
vee
23

Simplemente agregue el parámetro "origin"con la URL de su sitio en el paramVarsatributo del reproductor, así:

this.player = new window['YT'].Player('player', {
    videoId: this.mediaid,
    width:'100%',
    playerVars: { 'autoplay': 1, 'controls': 0,'autohide':1,'wmode':'opaque','origin':'http://localhost:8100' },
}
Flávio
fuente
77
origen: ventana.ubicación, en las propiedades para cubrir desarrollo y producción
James Bailey
3
@JamesBailey window.location.origin.. window.locationes un objeto.
Acidic9
Como dice API doc, origin playerVar solo se usa con implementación de iframe puro. No JS API uno.
Damien C
1
Todas estas 'soluciones' no funcionan para nosotros aquí en 2020. Además, es aleatorio por carga de página cuando aparece el error. Es una condición de carrera entre nuestro sitio y youtube.
IncredibleHat
window.location.host
LeeGee
19

Establecer esto parece solucionarlo:

  this$1.player = new YouTube.Player(this$1.elementId, {
    videoId: videoId,
    host: 'https://www.youtube.com',
M.Ali El-Sayed
fuente
3
hacerlo http (en lugar de https) resolvió mi problema.
T.Todua
55
Esto también me lo arregló. También se puede hacer: host: `${window.location.protocol}//www.youtube.com`,
Joel Worsham
2
Todas estas 'soluciones' no funcionan para nosotros aquí en 2020. Además, es aleatorio por carga de página cuando aparece el error. Es una condición de carrera entre nuestro sitio y youtube.
IncredibleHat
8

Puede guardar el JavaScript en archivos locales:

En el primer archivo, player_apiponga este código:

if(!window.YT)var YT={loading:0,loaded:0};if(!window.YTConfig)var YTConfig={host:"https://www.youtube.com"};YT.loading||(YT.loading=1,function(){var o=[];YT.ready=function(n){YT.loaded?n():o.push(n)},window.onYTReady=function(){YT.loaded=1;for(var n=0;n<o.length;n++)try{o[n]()}catch(i){}},YT.setConfig=function(o){for(var n in o)o.hasOwnProperty(n)&&(YTConfig[n]=o[n])}}());

En el segundo archivo, busque el código: this.a.contentWindow.postMessage(a,b[c]);

y reemplazarlo con:

if(this._skiped){
    this.a.contentWindow.postMessage(a,b[c]); 
}
this._skiped = true;

Por supuesto, puede concatenar en un archivo, será más eficiente. ¡Esta no es una solución perfecta, pero funciona!

Mi fuente: yt_api-concat

Artur
fuente
Me lo arregló. Tenía los archivos localmente de todos modos, así que se ajustan a mi caso de uso.
frecuente
Esto también funcionó para mí, pero no estoy seguro de por qué. ¿Puedes explicar por qué esto lo soluciona?
jchavannes
1
gracias, respondí mi pregunta en la segunda llamada ajax: stackoverflow.com/questions/58232081/…
Diogo Almeida
Desde mi punto de vista, usar un archivo local para la biblioteca, en particular para la biblioteca de servicios de terceros, es una muy mala forma de codificar. No ?
Damien C
@DamienC Es menos que ideal con seguridad. Pero, en base a todas las otras "correcciones" en este hilo, no estoy sorprendido (ni realmente juzgo) que otros desarrolladores cambien el código API manualmente.
Erutan409
3

Intente usar window.location.hrefla url para que coincida con el origen de la ventana.

Chaitanya Shah
fuente
Bien, probé todas las otras respuestas y esto funcionó para mí.
Kloshar4o
3

Tengo el mismo error. Mi error fue que el enablejsapi=1parámetro no estaba presente en el iframesrc.

Cra
fuente
0

Creo que la descripción del error es engañosa y originalmente tiene que ver con el uso incorrecto del objeto jugador.

Tuve el mismo problema al cambiar a nuevos videos en un control deslizante.

Cuando simplemente se usa la player.destroy()función descrita aquí, el problema desaparece.

denns
fuente
¿Podrías ver si entiendes lo que estoy experimentando en YouTube aquí y si está relacionado? stackoverflow.com/q/57649870/470749 Quizás tengas una respuesta. ¡Gracias!
Ryan
0

Tuve este mismo problema y resultó que era porque tenía la extensión de Chrome "HTTPS Everywhere" ejecutándose. Deshabilitar la extensión resolvió mi problema.

Gavin
fuente
0

Este error exacto estaba relacionado con un bloqueo de contenido de Youtube cuando se "reproducía en ciertos sitios o aplicaciones". Más específicamente por WMG (Warner Music Group).

Sin embargo, el mensaje de error sugirió que el problema era una importación de iframe https a un sitio http, lo que no fue en este caso.

TomSjogren
fuente
0

Eliminar DNS Prefetch resolverá este problema.

Si está utilizando WordPress, agregue esta línea en las funciones de su tema.php

remove_action( 'wp_head', 'wp_resource_hints', 2 );
Terry Lin
fuente
0

Puede cambiar su iframe para que sea así y agregar origen para que sea su sitio web actual. Resuelve el error en mi navegador.

<iframe class="test-testimonials-youtube-group"  type="text/html" width="100%" height="100%"
  src="http://www.youtube.com/embed/HiIsKeXN7qg?enablejsapi=1&origin=http://localhost:8000"
  frameborder="0">
</div>

ref: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

nhật tài nguyễn
fuente
0

Podría haber cualquiera de los siguientes, pero todos ellos conducen a DOM no cargado antes de que javascript acceda a él.

Así que esto es lo que debe asegurarse antes de llamar realmente al código JS: * Asegúrese de que el contenedor se haya cargado antes de que se llame a javascript * Asegúrese de que la URL de destino esté cargada en cualquier contenedor que tenga que

Me encontré con un problema similar, pero en mi local cuando intento que mi Javascript se ejecute mucho antes en la carga de la página principal que causa el mensaje de error. Lo arreglé simplemente esperando que se cargue toda la página y luego llame a la función requerida.

Simplemente puede hacer esto agregando una función de tiempo de espera cuando la página se haya cargado y llame a su evento de carga como:

window.onload = nueva función () {setTimeout (function () {// algún evento de carga}, 10); }

eso asegurará que lo que está intentando se ejecutará bien después de que onLoad se active.

KMX
fuente
Poner todo dentro document.addEventListener("DOMContentLoaded", function () {desafortunadamente no ayudó.
Ryan
0

También recibe este mensaje cuando no especifica un targetOrigin en las llamadas a window.postMessage().

En este ejemplo, publicamos un mensaje en el primer iFrame y lo usamos *como objetivo, lo que debería permitir la comunicación con cualquier targetOrigin.

window.frames[0].postMessage({
                    message : "Hi there",
                    command :"hi-there-command",
                    data : "Some Data"
                }, '*')
LukeSolar
fuente
0

En mi caso, al menos esto parece ser una condición inofensiva "no lista" que la API vuelve a intentar hasta que tiene éxito.

Obtengo entre dos y nueve de estos (en mi peor de los casos, un FossilBook 2009 con 20 pestañas abiertas a través de un punto de acceso celular) ... pero luego el video funciona correctamente. Una vez que se está ejecutando, mis llamadas basadas en postMessage para seekTo definitivamente funcionan, no he probado otras.

Roger Krueger
fuente
0

En algunos casos (como mencionó un comentarista) esto podría ser causado si está moviendo el reproductor dentro de DOM, como appendo etc.

T.Todua
fuente
-1

Puedes probar :

document.getElementById('your_id_iframe').contentWindow.postMessage('your_message', 'your_domain_iframe')
HoaTruong
fuente
-1

También estaba enfrentando el mismo problema y luego visito la API oficial de Iframe de YouTube donde encontré esto:

El navegador del usuario debe ser compatible con la función HTML5 postMessage. La mayoría de los navegadores modernos admiten postMessage

y pasear para ver que la página oficial también enfrenta este problema. Simplemente visite la API oficial de Iframe de Youtube y vea los registros de la consola. Mi versión de Chrome es 79.0.3945.88.

Shahbaz Shoukat
fuente
-2

la mía fue:

<youtube-player
  [videoId]="'paxSz8UblDs'"
  [playerVars]="playerVars"
  [width]="291"
  [height]="194">
</youtube-player>

Acabo de eliminar la línea con playerVars, y funcionó sin errores en la consola.

Gabriel Alcântara
fuente