Falha ao executar 'postMessage' no 'DOMWindow': https://www.youtube.com! == http: // localhost: 9000

165

Esta é a mensagem de erro que recebo:

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á vi outros problemas semelhantes onde a origem de destino está http://www.youtube.come a origem do destinatário https://www.youtube.com, mas nenhum como o meu onde o destino está https://www.youtube.come a origem está http://localhost:9000.

  1. Eu não entendi o problema. Qual é o problema?
  2. Como posso corrigir isso?
Adam Zerner
fonte
4
Eu tive o mesmo problema, e a correção abaixo do @ChrisFranklin o corrigiu para mim; mas o mais estranho é que, com o meu problema, eu só recebia o erro cerca da metade do tempo e, mesmo assim, o vídeo ainda carregava (embora outras coisas quebrassem).
dgo 6/04/16
1
@dgo mesmo problema, foi aleatório no carregamento da página. Acontece que eu acho que isso se deve ao fato de o conteúdo real do iframe não estar totalmente pronto no momento em que outra coisa está tentando fazer um postMessage. Portanto, é uma condição de corrida. E se o postMessage acontecer posteriormente (ação do usuário), ele funcionará bem sem erros.
IncredibleHat
até o Google tem esse erro - abra o console e reproduza o vídeo aqui: developers.google.com/youtube/iframe_api_reference
T.Todua

Respostas:

92

Acredito que este seja um problema com a origem de destino https. Eu suspeito que é porque seu URL do iFrame está usando em httpvez de https. Tente alterar o URL do arquivo que você está tentando incorporar https.

Por exemplo:

'//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
fonte
2
Isso parece ter funcionado. Obrigado! Então o problema é httpvs. https? Não importa que os domínios sejam diferentes (youtube vs. localhost)? E o que exatamente é a origem de destino versus a origem do destinatário? Como fazer o que você disse mudou a origem do destinatário (meu URL ainda é localhost: 9000)?
Adam Zerner
30
O erro é um pouco enganador. Na verdade, não tem nada a ver com você estar localhost:9000. O problema estava na maneira como você estava usando o youtube-api. Quando você declara a API como tag.src = "https://www.youtube.com/iframe_api";no seu código, diz ao youtube que deseja usar o SSL. Então, a alteração que sugeri mudou para você usando ssl para solicitar os vídeos. O erro estava apenas dizendo que você estava misturando chamadas SSL e NÃO SSL.
Chris Franklin
9
Me deparei com esse problema quando tentei mover o iframe no Dom. playerEl = document.querySelector('iframe#ytplayer'); anotherEl.appendChild(playerEl); // yt complains on subsequent api calls
posit labs
1
e se eu estiver usando javascript para carregar o player do YouTube?
N3R4ZZuRR0
5
alterado para https: // para o youtube e meu domínio é https: // ainda não resolveu meu problema. Falha ao executar 'postMessage' em 'DOMWindow': a origem de destino fornecida (' youtube.com ') não corresponde à origem da janela do destinatário (' test.dev ').
vee
23

Basta adicionar o parâmetro "origin"com o URL do seu site no paramVarsatributo do player, assim:

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
fonte
7
origem: window.location, nas propriedades para cobrir o desenvolvimento e a produção #
James Bailey
3
@JamesBailey window.location.origin.. window.locationé um objeto.
precisa saber é o seguinte
Como o documento da API diz, o playerVar de origem é usado apenas com a implementação pura de iframe. Não é uma API JS.
Damien C
1
Todas essas 'correções' não funcionam para nós aqui em 2020. Além disso, seu carregamento aleatório por página é carregado quando o erro é exibido. É uma condição de corrida entre o nosso site e o youtube.
IncredibleHat
window.location.host
LeeGee 14/06
19

Definir isso parece corrigi-lo:

  this$1.player = new YouTube.Player(this$1.elementId, {
    videoId: videoId,
    host: 'https://www.youtube.com',
M.Ali El-Sayed
fonte
3
fazê-lo http (em vez de https) resolveu meu problema.
T.Todua
5
Isso corrigiu para mim também. Também pode fazer: host: `${window.location.protocol}//www.youtube.com`,
Joel Worsham
2
Todas essas 'correções' não funcionam para nós aqui em 2020. Além disso, seu carregamento aleatório por página é carregado quando o erro é exibido. É uma condição de corrida entre o nosso site e o youtube.
IncredibleHat
8

Você pode salvar o JavaScript em arquivos locais:

No primeiro arquivo, player_apicoloque 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])}}());

No segundo arquivo, encontre o código: this.a.contentWindow.postMessage(a,b[c]);

e substitua-o por:

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

Obviamente, você pode concatenar em um arquivo - será mais eficiente. Esta não é uma solução perfeita, mas funciona!

Minha fonte: yt_api-concat

Artur
fonte
Corrigido para mim. Tinha os arquivos localmente de qualquer maneira, então se encaixavam no meu caso de uso.
frequente
Isso funcionou para mim também, mas não sei por que. Você pode explicar por que isso corrige?
precisa saber é
1
obrigado, respondeu minha pergunta na segunda chamada do ajax: stackoverflow.com/questions/58232081/…
Diogo Almeida
Do meu ponto de vista, o uso de arquivo local para biblioteca, em particular para biblioteca de serviços de terceiros, é uma maneira muito ruim de codificar. Não ?
Damien C
@ DamienC É menos que o ideal, com certeza. Mas, com base em todas as outras "correções" nesse segmento, não estou surpreso (nem julgo realmente) outros desenvolvedores alterando o código da API manualmente.
Erutan409 7/07
3

Tente usar window.location.hrefo URL para corresponder à origem da janela.

Chaitanya Shah
fonte
Bom, tentei todas as outras respostas e isso funcionou para mim!
precisa saber é o seguinte
3

Eu recebi o mesmo erro. Meu erro foi que o enablejsapi=1parâmetro não estava presente no iframesrc.

ave
fonte
0

Eu acho que a descrição do erro é enganosa e originalmente tem a ver com o uso incorreto do objeto player.

Eu tive o mesmo problema ao mudar para novos vídeos em um Slider.

Ao usar simplesmente a player.destroy()função descrita aqui, o problema desaparece.

denns
fonte
Você pode ver se entende o que estou experimentando no YouTube aqui e se está relacionado? stackoverflow.com/q/57649870/470749 Talvez você tenha uma resposta. Obrigado!
Ryan
0

Eu tive esse mesmo problema e, ao que parece, era porque eu estava executando a extensão "HTTPS Everywhere" do Chrome. Desativar a extensão resolveu meu problema.

Gavin
fonte
0

Este erro exato estava relacionado a um bloco de conteúdo do YouTube quando "reproduzido em determinados sites ou aplicativos". Mais especificamente por WMG (Warner Music Group).

No entanto, a mensagem de erro sugeria que a importação de iframe https para um site http era o problema, o que não ocorria nesse caso.

TomSjogren
fonte
0

Remover a Pré-busca DNS resolverá esse problema.

Se você estiver usando o WordPress, adicione esta linha nas funções do seu tema.php

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

Você pode alterar o iframe para ficar assim e adicionar a origem ao site atual. Ele resolve o erro no meu 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
fonte
0

Pode haver um dos seguintes, mas todos eles levam ao DOM não carregado antes de ser acessado pelo javascript.

Então, aqui está o que você deve garantir antes de realmente chamar o código JS: * Verifique se o contêiner foi carregado antes que qualquer javascript seja chamado * Verifique se o URL de destino está carregado em qualquer contêiner que ele precise

Me deparei com o problema semelhante, mas no meu local quando estou tentando executar o Javascript bem antes do onLoad da página principal que causa a mensagem de erro. Corrigi-o simplesmente aguardando o carregamento da página inteira e, em seguida, chamo a função necessária.

Você pode simplesmente fazer isso adicionando uma função de tempo limite quando a página for carregada e chamar seu evento onload como:

window.onload = nova função () {setTimeout (function () {// algum evento onload}, 10); }

isso garantirá que o que você está tentando executará bem depois que o onLoad for acionado.

KMX
fonte
Colocar tudo dentro document.addEventListener("DOMContentLoaded", function () {infelizmente não ajudou.
Ryan
0

Você também recebe essa mensagem quando não especifica um targetOrigin nas chamadas para window.postMessage().

Neste exemplo, postamos uma mensagem no primeiro iFrame e usamos *como destino, o que deve permitir a comunicação com qualquer targetOrigin.

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

Na minha instância, pelo menos, isso parece ser uma condição inofensiva "não pronta", que a API tenta novamente até que seja bem-sucedida.

Recebo de dois a nove deles (no meu pior caso, um FossilBook de 2009 com 20 abas abertas via hotspot de celular) ... mas o vídeo funciona corretamente. Depois de executar minhas chamadas pós-baseadas em Message to seekTo definitivamente funcionar, não testei outras.

Roger Krueger
fonte
0

Em alguns casos (como um comentarista mencionou), isso pode ser causado se você estiver movendo o player dentro do DOM, como appendou etc.

T.Todua
fonte
-1

Podes tentar :

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

Eu também estava enfrentando o mesmo problema, então visito o oficial Iframe Api do Youtube, onde encontrei isso:

O navegador do usuário deve oferecer suporte ao recurso post5 de HTML5. Os navegadores mais modernos oferecem suporte ao postMessage

e passear ao ver que a página oficial também estava enfrentando esse problema. Basta visitar a oficial Iframe Api do YouTube e ver os registros do console. Minha versão do Chrome é 79.0.3945.88.

Shahbaz Shoukat
fonte
-2

o meu era:

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

Acabei de remover a linha com o playerVars, e funcionou sem erros no console.

Gabriel Alcântara
fonte