web-dev-qa-db-fra.com

Impossible d'exécuter 'postMessage' sur 'DOMWindow': https://www.youtube.com! == http: // localhost: 9000

Voici le message d'erreur que je reçois:

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 rencontré d'autres problèmes similaires dans lesquels l'origine de la cible est http://www.youtube.com et l'origine du destinataire est https://www.youtube.com, mais pas la mienne où la cible est https://www.youtube.com et l'origine est http://localhost:9000.

  1. Je ne comprends pas le problème. Quel est le problème?
  2. Comment puis-je le réparer?
javascriptangularjsyoutubeyoutube-apiyoutube-iframe-api
111
Adam Zerner

Je pense que c'est un problème avec l'origine cible étant https. J'imagine que c'est parce que votre URL iFrame utilise http au lieu de https. Essayez de changer l'URL du fichier que vous essayez d'intégrer pour qu'il soit https.

Par exemple:

var id = getId(url);
  return '//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&Origin=http://localhost:9000';
}

être:

var id = getId(url);
  return 'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&Origin=http://localhost:9000';
}
73
Chris Franklin

Cela semble résoudre le problème:

  this$1.player = new YouTube.Player(this$1.elementId, {
    videoId: videoId,
    Host: 'https://www.youtube.com',
10
M.Ali El-Sayed

Ajoutez simplement le paramètre "Origin" avec l'URL de votre site dans l'attribut paramVars du lecteur, 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
Flávio

Vous pouvez enregistrer dans des fichiers locaux:

Dans le premier fichier, player_api a mis 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])}}());

En second lieu, trouvez-les comme: this.a.contentWindow.postMessage (a, b [c]); 

et passer à:

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

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

Ma source: yt_api-concat

PS: Désolé, l'anglais n'est pas ma première langue.

3
Artur

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

2
Chaitanya Shah

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

1
ave

Je pense que la description de l'erreur est trompeuse et concerne à l'origine l'utilisation incorrecte de l'objet player.

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

Lorsque vous utilisez simplement la fonction player.destroy()décrite ici le problème a disparu.

0
denns

Assurez-vous de charger depuis une URL telle que:

https://www.youtube.com/embed/HIbAz29L-FA?modestbranding=1&playsinline=0&showinfo=0&enablejsapi=1&Origin=https%3A%2F%2Fintercoin.org&widgetid=1

Notez le composant "Origine", ainsi que "enablejsapi = 1". L'origine doit correspondre à votre domaine. Il sera ensuite ajouté à la liste blanche et fonctionnera.

0
Gregory Magarshak

J'ai eu le même problème et il s'est avéré que l'extension Chrome "HTTPS Everywhere" était active. Désactiver l'extension a résolu mon problème.

0
Gavin

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
Terry Lin

Vous pouvez modifier votre iframe pour qu'il soit ainsi et ajouter Origin pour être votre site Web actuel. Cela résout l'erreur sur mon navigateur.

<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

0
nhật tài nguyễn

Cette erreur exacte était liée à un bloc de contenu créé par Youtube lorsqu’il était "lu sur certains sites ou applications". Plus spécifiquement par WMG (Warner Music Group).

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

0
TomSjogren

Il peut y avoir n'importe lequel des éléments suivants, mais tous mènent dans un DOM non chargé avant son accès par le javascript.

Voici donc ce que vous devez vous assurer avant d'appeler du code JS: * Assurez-vous que le conteneur a été chargé avant de nommer du javascript * Assurez-vous que l'URL cible est chargée dans le conteneur de votre choix

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

Pour ce faire, vous pouvez simplement ajouter une fonction de délai d’expiration lorsque la page est chargée et appeler votre événement onload comme suit:

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

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

0
KMX