Échec de l'exécution de «postMessage» sur «DOMWindow»: https://www.youtube.com! == http: // localhost: 9000


168

Voici le message d'erreur que j'obtiens:

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').

J'ai vu d'autres problèmes similaires concernant l'origine de la cible http://www.youtube.comet l'origine du destinataire https://www.youtube.com, mais aucun ne ressemble au mien où se trouve la cible https://www.youtube.comet l'origine http://localhost:9000.

  1. Je ne comprends pas le problème. Quel est le problème?
  2. Comment puis-je y remédier?


4
J'ai eu le même problème, et le correctif ci-dessous par @ChrisFranklin l'a corrigé pour moi; mais ce qui est étrange, c'est qu'avec mon problème, je n'obtiendrais l'erreur que la moitié du temps, et même dans ce cas, la vidéo se chargerait toujours (bien que d'autres choses se cassent).
dgo

1
@dgo même problème, c'était aléatoire lors du chargement de la page. Il s'avère (je pense) que c'est dû au fait que le contenu de l'iframe n'est pas complètement prêt au moment où quelque chose d'autre tente de faire un postMessage. C'est donc une condition de course. Et si le postMessage se produit plus tard (action de l'utilisateur), cela fonctionne correctement sans erreur.
IncredibleHat

même Google a cette erreur lui - même - ouvrez la console et lisez la vidéo ici: développeurs.google.com
youtube

Réponses:


92

Je crois que c'est un problème avec l'origine de la cible https. Je soupçonne que c'est parce que votre URL iFrame utilise à la httpplace de https. Essayez de changer l'URL du fichier que vous essayez d'intégrerhttps .

Par exemple:

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

être:

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

2
Cela semble avoir fonctionné. Merci! Le problème est donc httpvs. https? Peu importe que les domaines diffèrent (youtube vs localhost)? Et quelle est exactement l'origine de la cible par rapport à l'origine du destinataire? Comment ce que vous avez dit a-t-il changé l'origine du destinataire (mon URL est toujours localhost: 9000)?
Adam Zerner

30
L'erreur est un peu trompeuse. Cela n'a en fait rien à voir avec votre présence localhost:9000. Le problème venait en fait de la façon dont vous utilisiez l'api youtube. Lorsque vous déclarez l'API comme tag.src = "https://www.youtube.com/iframe_api";dans votre code, vous indiquez à YouTube que vous souhaitez utiliser ssl. Ainsi, le changement que j'ai suggéré vous a amené à utiliser SSL pour demander les vidéos. L'erreur disait simplement que vous mélangiez des appels ssl et non ssl.
Chris Franklin

9
Je suis tombé sur ce problème lorsque j'ai essayé de déplacer l'iframe dans le dom. playerEl = document.querySelector('iframe#ytplayer'); anotherEl.appendChild(playerEl); // yt complains on subsequent api calls
posit labs

1
et si j'utilise javascript pour charger le lecteur YouTube?
N3R4ZZuRR0

5
changé en https: // pour youtube et mon domaine est https: // toujours pas résoudre mon problème. Échec de l'exécution de «postMessage» sur «DOMWindow»: l'origine cible fournie (« youtube.com ») ne correspond pas à l'origine de la fenêtre du destinataire (« test.dev »).
vee le

24

Ajoutez simplement le paramètre "origin"avec l'URL de votre site dans l' paramVarsattribut du player, comme ceci:

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' },
}

7
origin: window.location, dans les propriétés pour couvrir le développement et la production
James Bailey

3
@JamesBailey window.location.origin.. window.locationest un objet.
Acidic9

Comme l'indique la documentation de l'API, origin playerVar n'est utilisé qu'avec une implémentation iframe pure. Pas JS API one.
Damien C

1
Tous ces «correctifs» ne fonctionnent pas pour nous ici en 2020. Aussi pour ajouter, son chargement aléatoire par page lorsque l'erreur apparaît. C'est une condition de concurrence entre notre site et YouTube.
IncredibleHat

window.location.host
LeeGee

19

Ce réglage semble résoudre le problème:

  this$1.player = new YouTube.Player(this$1.elementId, {
    videoId: videoId,
    host: 'https://www.youtube.com',

3
le faire http (au lieu de https) a résolu mon problème.
T.Todua

5
Cela a aussi résolu le problème pour moi. Peut aussi faire: host: `${window.location.protocol}//www.youtube.com`,
Joel Worsham

2
Tous ces «correctifs» ne fonctionnent pas pour nous ici en 2020. Aussi pour ajouter, son chargement aléatoire par page lorsque l'erreur apparaît. C'est une condition de concurrence entre notre site et YouTube.
IncredibleHat

8

Vous pouvez enregistrer le JavaScript dans des fichiers locaux:

Dans le premier fichier, player_apimettez ce code:

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])}}());

Dans le deuxième fichier, recherchez le code: this.a.contentWindow.postMessage(a,b[c]);

et remplacez-le par:

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

Bien sûr, vous pouvez concaténer en un seul fichier - ce sera plus efficace. Ce n'est pas une solution parfaite, mais ça marche!

Ma source: yt_api-concat


Corrigé pour moi. Avait les fichiers localement de toute façon, donc correspond à mon cas d'utilisation.
fréquent

Cela a fonctionné pour moi aussi, mais je ne sais pas pourquoi. Pouvez-vous expliquer pourquoi cela résout le problème?
jchavannes

1
merci, a répondu à ma question sur le deuxième appel ajax: stackoverflow.com/questions/58232081/…
Diogo Almeida

De mon point de vue, utiliser un fichier local pour la bibliothèque, en particulier pour la bibliothèque de services tiers, est une très mauvaise façon de coder. Non ?
Damien C

@DamienC C'est certainement loin d'être idéal. Mais, sur la base de tous les autres «correctifs» sur ce fil, je ne suis pas surpris (et je ne juge pas vraiment) que d'autres développeurs modifient le code API manuellement.
Erutan409


3

Essayez d'utiliser window.location.hrefpour que l'URL corresponde à l'origine de la fenêtre.


Bien, j'ai essayé toutes les autres réponses et cela a fonctionné pour moi!
Kloshar4o

3

J'ai eu la même erreur. Mon erreur était que le enablejsapi=1paramètre n'était pas présent dans le iframesrc.


0

Je pense que la description de l'erreur est trompeuse et a à l'origine à voir avec une mauvaise utilisation de l'objet joueur.

J'ai eu le même problème lors du passage à de nouvelles vidéos dans un curseur.

En utilisant simplement la player.destroy()fonction décrite ici, le problème est résolu.


Pourriez-vous voir si vous comprenez ce que je vis sur YouTube ici et si c'est lié? stackoverflow.com/q/57649870/470749 Vous aurez peut-être une réponse. Merci!
Ryan

0

J'ai eu ce même problème et il s'avère que c'était parce que j'avais l'extension Chrome "HTTPS Everywhere" en cours d'exécution. La désactivation de l'extension a résolu mon problème.


0

Cette erreur exacte était liée à un blocage de contenu par Youtube lors de la «lecture sur certains sites ou applications». Plus précisément par WMG (Warner Music Group).

Le message d'erreur suggérait cependant qu'une importation iframe https vers un site http était le problème, ce qui n'était pas le cas dans ce cas.


0

Supprimer DNS Prefetch résoudra ce problème.

Si vous utilisez WordPress, ajoutez cette ligne dans le functions.php de votre thème

remove_action( 'wp_head', 'wp_resource_hints', 2 );


0

Il pourrait y avoir l'un des éléments suivants, mais tous mènent à DOM non chargé avant son accès par le javascript.

Voici donc ce que vous devez vous assurer avant d'appeler le code JS: * Assurez-vous que le conteneur a été chargé avant tout appel javascript * Assurez-vous que l'URL cible est chargée dans le conteneur qu'elle doit

Je suis tombé sur le même problème, mais sur mon site local lorsque j'essaie de faire fonctionner mon Javascript bien avant le chargement de la page principale qui provoque le message d'erreur. Je l'ai corrigé en attendant simplement que la page entière se charge, puis en appelant la fonction requise.

Vous pouvez simplement le faire en ajoutant une fonction de délai d'expiration lorsque la page est chargée et en appelant votre événement onload comme:

window.onload = new function () {setTimeout (function () {// un événement onload}, 10); }

Cela garantira que ce que vous essayez s'exécutera bien après le déclenchement de onLoad.


Mettre tout à l'intérieur document.addEventListener("DOMContentLoaded", function () {n'a malheureusement pas aidé.
Ryan

0

Vous obtenez également ce message lorsque vous ne spécifiez pas de targetOrigin dans les appels àwindow.postMessage() .

Dans cet exemple, nous publions un message sur le premier iFrame et l'utilisons *comme cible, ce qui devrait permettre la communication avec n'importe quel targetOrigin.

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

0

Dans mon cas au moins, cela semble être une condition inoffensive "pas prêt" que l'API réessaye jusqu'à ce qu'elle réussisse.

J'obtiens entre deux et neuf d'entre eux (sur mon pire testeur, un FossilBook 2009 avec 20 onglets ouverts via un hotspot cellulaire) .... mais alors la vidéo fonctionne correctement. Une fois qu'il exécute mes appels basés sur postMessage pour seekTo définitivement, je n'en ai pas testé d'autres.


0

Dans certains cas (comme un commentateur l'a mentionné), cela peut être dû si vous déplacez le lecteur dans DOM, comme appendou etc.


-1

Tu peux essayer :

document.getElementById('your_id_iframe').contentWindow.postMessage('your_message', 'your_domain_iframe')

-1

J'étais également confronté au même problème, puis je visite l' API Iframe officielle de Youtube où j'ai trouvé ceci:

Le navigateur de l'utilisateur doit prendre en charge la fonctionnalité HTML5 postMessage. La plupart des navigateurs modernes prennent en charge postMessage

et errer pour voir que la page officielle était également confrontée à ce problème. Visitez simplement l' API Iframe officielle de Youtube et consultez les journaux de la console. Ma version Chrome est 79.0.3945.88.


-2

Le mien était:

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

Je viens de supprimer la ligne avec playerVars, et cela a fonctionné sans erreur sur la console.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.