'DOMWindow'에서 'postMessage'를 실행하지 못했습니다 : https://www.youtube.com! == http : // localhost : 9000

이것은 내가 얻는 오류 메시지입니다.

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

대상 원점 http://www.youtube.com과 수신자 원점이 다른 유사한 문제를 보았지만 대상이 있고 원점이 https://www.youtube.com어디 https://www.youtube.com인지는 없습니다 http://localhost:9000.

1. 문제가 없습니다. 무엇이 문제입니까?
2. 어떻게 고칠 수 있습니까?

나는 이것이 목표 원점 인 문제라고 생각합니다 https. iFrame URL http대신을 사용하고 있기 때문 입니다 https. 포함시키려는 파일의 URL을로 변경하십시오 https.

예를 들어 :

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

되려고:

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

다음 과 같이 플레이어 속성에 "origin"사이트의 URL과 매개 변수 를 추가하십시오 paramVars.

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

이것을 설정하면 해결되는 것 같습니다.

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

JavaScript를 로컬 파일로 저장할 수 있습니다 :

• https://www.youtube.com/player_api
• https://s.ytimg.com/yts/jsbin/www-widgetapi-vfluxKqfs/www-widgetapi.js

첫 번째 파일 player_api에 다음 코드를 입력하십시오.

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

두 번째 파일에서 코드를 찾으십시오. this.a.contentWindow.postMessage(a,b[c]);

그것을 다음으로 대체하십시오 :

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

물론 하나의 파일로 연결할 수 있습니다-더 효율적입니다. 이것은 완벽한 솔루션은 아니지만 작동합니다!

내 출처 : yt_api-concat

다음과 같은 URL에서로드 중인지 확인하십시오.

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

"origin"구성 요소 및 "enablejsapi = 1"에 유의하십시오. 원본은 도메인과 일치해야하며 허용 목록에 표시되어 작동합니다.

window.location.href창의 원점과 일치하도록 URL을 사용해보십시오 .

같은 오류가 발생했습니다. 내 실수는 enablejsapi=1매개 변수가 iframesrc 에 없다는 것 입니다.

나는 그 오류에 대한 설명이 오해의 소지가 있으며 원래 플레이어 객체의 잘못된 사용법과 관련이 있다고 생각합니다.

슬라이더에서 새 비디오로 전환 할 때도 같은 문제가있었습니다.

여기 에 설명 된 player.destroy()기능을 사용하면 문제가 사라집니다.

동일한 문제가 발생했으며 Chrome 확장 프로그램 'HTTPS Everywhere'가 실행 중이었기 때문입니다. 확장 기능을 비활성화하면 문제가 해결되었습니다.

이 정확한 오류는 "특정 사이트 나 응용 프로그램에서 재생 될 때"Youtube의 콘텐츠 블록과 관련이 있습니다. 더 구체적으로 WMG (Warner Music Group).

그러나 오류 메시지는 http 사이트로의 https iframe 가져 오기가이 문제가 아니라고 제안했습니다.

DNS 프리 페치를 제거하면이 문제가 해결됩니다.

WordPress를 사용하는 경우 테마의 함수에이 줄을 추가하십시오.

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

iframe을 이와 같이 변경하고 출처를 현재 웹 사이트로 추가 할 수 있습니다. 브라우저의 오류를 해결합니다.

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

심판 : https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

다음 중 하나가있을 수 있지만 모두 자바 스크립트가 액세스하기 전에 DOM으로로드되지 않습니다.

실제로 JS 코드를 호출하기 전에 확인해야 할 사항은 다음과 같습니다. * 자바 스크립트를 호출하기 전에 컨테이너가로드되었는지 확인하십시오.

비슷한 문제가 발생했지만 메인 페이지의 onLoad 전에 Javascript를 제대로 실행하려고하면 로컬에서 오류 메시지가 발생했습니다. 전체 페이지가로드 될 때까지 기다린 다음 필요한 함수를 호출하여 문제를 해결했습니다.

페이지가로드 될 때 타임 아웃 기능을 추가하고 다음과 같이 onload 이벤트를 호출하면됩니다.

window.onload = new function () {setTimeout (function () {// 일부 onload 이벤트}, 10); }

onLoad가 트리거 된 후에 시도중인 것이 잘 실행될 것입니다.

에 대한 호출에서 targetOrigin 을 지정하지 않으면이 메시지가 표시됩니다 window.postMessage().

이 예제에서는 첫 번째 iFrame에 메시지를 게시하고 *targetOrigin과의 통신을 허용하는 대상으로 사용 합니다.

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

필자의 경우 적어도 이것은 API가 성공할 때까지 재 시도하는 무해한 "준비되지 않은"상태 인 것 같습니다.

나는 이것들 중 2에서 9까지 (내 최악의 경우 테스터, 셀룰러 핫스팟을 통해 열린 20 개의 탭이있는 2009 FossilBook) ....하지만 비디오가 올바르게 작동합니다. 그것이 내가 제대로 작동하기 위해 postMessage 기반 호출을 실행하면 다른 사람을 테스트하지 않았습니다.

경우에 따라 (한 의견자가 언급 한 것처럼) 플레이어를 DOM 등에서 플레이어 내에서 이동하는 경우이 문제가 발생할 수 있습니다 append.

당신은 시도 할 수 있습니다 :

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

나는 또한 같은 문제에 직면했다 . 나는 이것을 발견 한 공식 Youtube Iframe Api를 방문 한다.

사용자의 브라우저는 HTML5 postMessage 기능을 지원해야합니다. 대부분의 최신 브라우저는 postMessage를 지원합니다

공식 페이지에서도이 문제가 발생했음을 확인하십시오. 공식 Youtube Iframe Api를 방문 하여 콘솔 로그를 확인하십시오. 내 Chrome 버전은 79.0.3945.88입니다.

광산은 :

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

나는 playerVars로 라인을 제거했으며 콘솔에서 오류없이 작동했습니다.