'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.
- 나는 그 문제를 이해하지 못한다.뭐가 문제죠?
- 어떻게 하면 고칠 수 있죠?
이것은 타겟의 발신지가 다음과 같은 문제인 것 같습니다.https이 iFrame url을 사용하고 httphttps 을 .로 합니다.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',
자바스크립트를 로컬파일에 저장할 수 있습니다.
- 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에서 로드하고 있는지 확인합니다.
"enablejsapi=1"뿐만 아니라 "inablejsapi=1" 구성 요소를 기록합니다.오리진은 도메인과 일치해야 합니다. 그러면 화이트리스트에 추가되어 작동합니다.
iframe은 iframe이다. 속성 iframe 삭제loading="lazy"츠키노
저도 같은 오류가 발생했어요.은 ★★★★★★★★★★★★★★★★★★★.enablejsapi=1.iframesrc.
도 한번 써보세요.window.location.href을을을을을 URL 。
다음 중 하나가 있을 수 있지만 모두 Javascript에 의해 액세스되기 전에 로드되지 않은 DOM으로 연결됩니다.
JS 코드를 실제로 호출하기 전에 확인해야 할 사항은 다음과 같습니다.* Javascript를 호출하기 전에 컨테이너가 로드되었는지 확인하십시오.* 타겟 URL이 필요한 컨테이너에 로드되었는지 확인하십시오.
비슷한 문제가 발생했지만 로컬에서 Javascript를 실행하려고 할 때 에러메시지의 원인이 되는 메인 페이지의 onLoad를 실행하려고 했습니다.페이지 전체가 로드되기를 기다렸다가 필요한 기능을 호출하는 것만으로 수정했습니다.
페이지 로드 시 타임아웃 함수를 추가하여 다음과 같이 온로드 이벤트를 호출하면 됩니다.
window.onload = new function() {setTimeout(function() {// 일부 온로드 이벤트}, 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 Fossil Book)를 입수할 수 있지만, 비디오는 정상적으로 동작합니다.확실히 기능하기 위해 Post Message 기반 콜을 실행하면 다른 콜을 테스트하지 않습니다.
CORB를 사용하여 반복 요청을 차단하는 것은 Chrome 보안 시스템뿐인 것 같습니다.
https://www.chromestatus.com/feature/5629709824032768
나의 경우, 동영상 API 데이터 요청이 많고 페이로드가 높은 동일한 웹페이지에서 처음 로드된 후 유튜브가 액세스를 차단하고 있었습니다.
payload가 낮은 페이지의 경우 이 문제는 발생하지 않습니다.
Safari 및 Chronuim 기반 이외의 브라우저에서는 문제가 발생하지 않습니다.
새로운 브라우저에서 웹 페이지를 로드하면 문제가 발생하지 않고 같은 페이지를 새로고침하면 문제가 발생합니다.
DNS 프리페치를 삭제하면 이 문제가 해결됩니다.
WordPress를 사용하는 경우 테마의 기능에 이 줄을 추가하십시오.php
remove_action( 'wp_head', 'wp_resource_hints', 2 );
에러에 대한 설명은 오해의 소지가 있으며, 원래 플레이어 오브젝트의 잘못된 사용과 관련이 있다고 생각합니다.
슬라이더에 있는 새로운 비디오로 전환할 때도 같은 문제가 발생하였습니다.
" " " 를 하는 경우player.destroy()여기서 설명하는 함수는 문제가 없어졌습니다.
저도 같은 문제가 있었는데 알고 보니 Chrome 확장자 "HTTPS Everywhere"가 실행되고 있었기 때문입니다.내선번호를 무효로 했더니 문제가 해결되었다.
이 정확한 오류는 유튜브가 특정 사이트나 애플리케이션에서 재생했을 때 콘텐츠 차단과 관련이 있습니다.좀 더 구체적으로 말하면 WMG(Warner Music Group)입니다.
그러나 오류 메시지에서는 https iframe을 http 사이트로 Import하는 것이 문제임을 알 수 있었습니다.이 경우는 그렇지 않습니다.
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 내에서 플레이어를 이동할 때 발생할 수 있습니다.append기타 등등.
콘솔 오류를 피하기 위해 Artur의 이전 답변과 유사한 방법으로 다음 단계를 수행하여 이 문제를 해결했습니다.
- YouTube Iframe API 다운로드(https://www.youtube.com/iframe_api)에서 로컬 yt-api.filename 파일로).
- www-widgetapi.js 스크립트를 삽입한 코드를 삭제.
- www-bypapi.http://https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl7VfO1r/www-widgetapi.js) 에서 로컬 www-bypi.http://file 에 다운로드.
- 콘솔에서 오류가 발생한 postMessage 호출의 targetOrigin 인수를 "*"로 대체하십시오(기본 설정은 없습니다.https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) 참조).
- 수정된 www-widgetapi.js 스크립트를 yt-api.js 스크립트의 끝에 추가했습니다.
이것은 가장 뛰어난 솔루션(유지보수하기 위한 로컬스크립트 패치, 메시지 송신지 제어 기능 상실)은 아니지만 문제는 해결되었습니다.
이 솔루션을 사용하기 전에 여기서 설명한 targetOriginURI 삭제에 대한 보안 경고를 참조하십시오.
추가 중origin=${window.location.host} or "*"충분하지 않습니다.
더하다https://효과가 있을 거야
또, 삽입 가능한 URL 를 사용하고 있는 것을 확인합니다.비디오 ID 를 꺼내, YouTube 비디오 프리픽스와 비디오 ID + 삽입 정의를 가지는 문자열을 연결합니다.
이것이 도움이 되었습니다(Vue.js).
vue-youtube는 여기에 있습니다.
mounted() {
window.YTConfig = {
host: 'https://www.youtube.com/iframe_api'
}
const host = this.nocookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com'
this.player = player(this.$el, {
host,
width: this.width,
height: this.height,
videoId: this.videoId,
playerVars: this.playerVars
})
...
}
업데이트: 다음과 같은 매력으로 작업:
...
youtube(
video-id="your_video_code_here"
nocookie
)
...
data() {
return {
playerVars: {
origin: window.location.href,
},
};
},
YT의 send Message를 커스터마이즈할 수 있을 것 같습니다.플레이어
playerOptions.playerVars.origin = window.location.origin or your domain.
this.youtubePlayer = new YT.Player(element,playerOptions);
this.youtubePlayer.sendMessage = function (a) {
a.id = this.id, a.channel = "widget", a = JSON.stringify(a);
var url = new URL(this.h.src), origin = url.searchParams.get("origin");
if (origin && this.h.contentWindow) {
this.h.contentWindow.postMessage(a, origin)
}
}
이 기능을 사용하여 프로젝트를 해결했습니다.
나는 다음과 같이 했다.
<youtube-player
[videoId]="'paxSz8UblDs'"
[playerVars]="playerVars"
[width]="291"
[height]="194">
</youtube-player>
방금 playerVars 회선을 제거했는데 콘솔에서는 오류없이 동작했습니다.
다음 작업을 수행할 수 있습니다.
document.getElementById('your_id_iframe').contentWindow.postMessage('your_message', 'your_domain_iframe')
저도 같은 문제에 직면해 있었습니다만, 공식 Youtube Iframe API를 방문했습니다.여기서 이걸 찾았어요
사용자의 브라우저는 HTML5 postMessage 기능을 지원해야 합니다.대부분의 최신 브라우저는 post Message를 지원합니다.
공식 페이지도 이 문제에 직면해 있는 것을 확인했습니다.공식 Youtube Iframe API를 방문하면 콘솔 로그를 볼 수 있습니다.제 크롬 버전은 79.0.3945.88입니다.
언급URL : https://stackoverflow.com/questions/27573017/failed-to-execute-postmessage-on-domwindow-https-www-youtube-com-http
'programing' 카테고리의 다른 글
| 'isPresent' 체크 없이 'Optional.get()'을 클릭합니다. (0) | 2022.09.19 |
|---|---|
| Python MySQL이 새로 고쳐지지 않음 (0) | 2022.09.19 |
| 인덱스에도 불구하고 쿼리 성능이 느리다 (0) | 2022.09.12 |
| JDBC DatabaseMetaData#getTables()가 반환됨: ERROR 1463(42000):HAVING 절에 그룹화되지 않은 필드 'TABLE_TYPE'이 사용됩니다. (0) | 2022.09.12 |
| Jersey와 Jax-r의 차이점은 무엇입니까? (0) | 2022.09.12 |