Không thể thực thi 'postMessage' trên 'DOMWindow': https://www.youtube.com! == http: // localhost: 9000

Đây là thông báo lỗi mà tôi nhận được:

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

Tôi đã thấy các vấn đề tương tự khác có nguồn gốc mục tiêu http://www.youtube.comvà nguồn gốc người nhận https://www.youtube.com, nhưng không có vấn đề nào giống như https://www.youtube.comnguồn gốc của mục tiêu và nguồn gốc của nó http://localhost:9000.

1. Tôi không nhận được vấn đề. Vấn đề là gì?
2. Làm thế nào tôi có thể sửa chữa nó?

Tôi tin rằng đây là một vấn đề với nguồn gốc mục tiêu https. Tôi nghi ngờ đó là vì url iFrame của bạn đang sử dụng httpthay vì https. Hãy thử thay đổi url của tệp bạn đang cố gắng nhúng https.

Ví dụ:

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

được:

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

Chỉ cần thêm tham số "origin"với URL của trang web của bạn trong paramVarsthuộc tính của trình phát, như thế này:

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

Đặt cái này có vẻ để sửa nó:

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

Bạn có thể lưu JavaScript vào các tệp cục bộ:

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

Vào tập tin đầu tiên, player_apiđặt mã này:

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

Vào tệp thứ hai, tìm mã: this.a.contentWindow.postMessage(a,b[c]);

và thay thế nó bằng:

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

Tất nhiên, bạn có thể ghép thành một tệp - sẽ hiệu quả hơn. Đây không phải là một giải pháp hoàn hảo, nhưng nó hoạt động!

Nguồn của tôi: yt_api-concat

Đảm bảo bạn đang tải từ một URL, chẳng hạn như:

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

Lưu ý thành phần "nguồn gốc", cũng như "enablejsapi = 1". Nguồn gốc phải phù hợp với tên miền của bạn là gì, và sau đó nó sẽ được đưa vào danh sách trắng và hoạt động.

Hãy thử sử dụng window.location.hrefcho url để khớp với nguồn gốc của cửa sổ.

Tôi đã nhận được cùng một lỗi. Lỗi của tôi là enablejsapi=1tham số không có trong iframesrc.

Tôi nghĩ rằng việc mô tả lỗi là sai lệch và ban đầu có liên quan đến việc sử dụng sai đối tượng người chơi.

Tôi gặp vấn đề tương tự khi chuyển sang Video mới trong Thanh trượt.

Khi chỉ cần sử dụng player.destroy()chức năng được mô tả ở đây , vấn đề đã biến mất.

Tôi gặp vấn đề tương tự và hóa ra là do tôi đã mở rộng Chrome "HTTPS Everywhere". Vô hiệu hóa phần mở rộng đã giải quyết vấn đề của tôi.

Lỗi chính xác này có liên quan đến khối nội dung của Youtube khi "phát lại trên các trang web hoặc ứng dụng nhất định". Cụ thể hơn bởi WMG (Warner Music Group).

Tuy nhiên, thông báo lỗi đã đề xuất rằng việc nhập iframe https vào trang web http là vấn đề, không có trong trường hợp này.

Xóa DNS Prefetch sẽ giải quyết vấn đề này.

Nếu bạn đang sử dụng WordPress, hãy thêm dòng này vào chức năng của chủ đề.

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

Bạn có thể thay đổi iframe của mình thành như thế này và thêm nguồn gốc làm trang web hiện tại của bạn. Nó giải quyết lỗi trên trình duyệt của tôi.

<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_Vference#Loading_a_Video_Player

Có thể có bất kỳ điều nào sau đây, nhưng tất cả chúng đều dẫn đến DOM không được tải trước khi javascript truy cập.

Vì vậy, đây là những gì bạn phải đảm bảo trước khi thực sự gọi mã JS: * Đảm bảo rằng container đã được tải trước khi bất kỳ javascript nào được gọi * Hãy chắc chắn rằng URL mục tiêu được tải trong bất kỳ vùng chứa nào mà nó phải

Tôi đã gặp vấn đề tương tự nhưng trên địa phương của tôi khi tôi đang cố gắng để Javascript của tôi chạy tốt trước khi onLoad của trang chính gây ra thông báo lỗi. Tôi đã sửa nó bằng cách đợi toàn bộ trang tải và sau đó gọi hàm yêu cầu.

Bạn chỉ có thể thực hiện việc này bằng cách thêm chức năng hết thời gian khi trang đã được tải và gọi sự kiện tải của bạn như:

window.onload = new function () {setTimeout (function () {// một số sự kiện onload}, 10); }

điều đó sẽ đảm bảo những gì bạn đang cố gắng sẽ thực hiện tốt sau khi onLoad được kích hoạt.

Bạn cũng nhận được thông báo này khi bạn không chỉ định đích Targetigin trong các cuộc gọi đến window.postMessage().

Trong ví dụ này, chúng tôi đăng một thông báo lên iFrame đầu tiên và sử dụng *làm mục tiêu, điều này sẽ cho phép liên lạc với bất kỳ mục tiêu nào.

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

Trong trường hợp của tôi, ít nhất đây có vẻ là một điều kiện "không sẵn sàng" vô hại mà API thử lại cho đến khi thành công.

Tôi nhận được bất cứ nơi nào từ hai đến chín trong số này (trên máy kiểm tra trường hợp xấu nhất của tôi, FossilBook 2009 với 20 tab mở qua điểm phát sóng di động) .... nhưng sau đó video hoạt động đúng. Khi nó chạy các cuộc gọi dựa trên postMessage của tôi để tìm kiếm Để chắc chắn hoạt động, chưa thử nghiệm người khác.

Trong một số trường hợp (như một người bình luận đã đề cập) điều này có thể xảy ra nếu bạn di chuyển trình phát trong DOM, như appendhoặc vv ..

Bạn co thể thử :

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

Tôi cũng gặp phải vấn đề tương tự sau đó tôi truy cập Youtube Iframe Api chính thức nơi tôi tìm thấy điều này:

Trình duyệt của người dùng phải hỗ trợ tính năng HTML5 postMessage. Hầu hết các trình duyệt hiện đại đều hỗ trợ postMessage

và đi lang thang để xem trang chính thức đó cũng phải đối mặt với vấn đề này. Chỉ cần truy cập Youtube Iframe Api chính thức và xem nhật ký bảng điều khiển. Phiên bản Chrome của tôi là 79.0,3945,88.

Tôi đã:

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

Tôi vừa xóa dòng với playerVars và nó hoạt động không có lỗi trên console.