Gagal menjalankan 'postMessage' di 'DOMWindow': https://www.youtube.com! == http: // localhost: 9000

Ini adalah pesan kesalahan yang saya dapatkan:

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

Saya telah melihat masalah serupa lainnya di mana asal target http://www.youtube.comdan asal penerima https://www.youtube.com, tetapi tidak ada yang seperti tambang di mana target berada https://www.youtube.comdan asal http://localhost:9000.

1. Saya tidak mendapatkan masalah. Apa masalahnya?
2. Bagaimana saya bisa memperbaikinya?

Saya percaya ini adalah masalah dengan asal target https. Saya menduga itu karena url iFrame Anda yang digunakan httpalih-alih https. Coba ubah url file yang ingin Anda sematkan https.

Misalnya:

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

menjadi:

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

Cukup tambahkan parameter "origin"dengan URL situs Anda di paramVarsatribut pemain, seperti ini:

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

Pengaturan ini sepertinya memperbaikinya:

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

Anda dapat menyimpan JavaScript ke file lokal:

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

Ke dalam file pertama, player_apimasukkan kode ini:

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

Ke dalam file kedua, cari kode: this.a.contentWindow.postMessage(a,b[c]);

dan ganti dengan:

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

Tentu saja, Anda dapat menggabungkan menjadi satu file - akan lebih efisien. Ini bukan solusi yang sempurna, tetapi berhasil!

Sumber saya: yt_api-concat

Pastikan Anda memuat dari URL seperti:

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

Perhatikan komponen "asal", serta "enablejsapi = 1". Asal harus cocok dengan apa domain Anda, dan kemudian akan masuk daftar putih dan berfungsi.

Coba gunakan window.location.hrefuntuk url agar sesuai dengan asal jendela.

Saya mendapat kesalahan yang sama. Kesalahan saya adalah bahwa enablejsapi=1parameter tidak ada di iframesrc.

Saya pikir deskripsi kesalahan itu menyesatkan dan awalnya berkaitan dengan penggunaan objek pemain yang salah.

Saya memiliki masalah yang sama ketika beralih ke Video baru di Slider.

Ketika hanya menggunakan player.destroy()fungsi yang dijelaskan di sini masalahnya hilang.

Saya memiliki masalah yang sama dan ternyata itu karena saya menjalankan ekstensi Chrome "HTTPS Everywhere". Menonaktifkan ekstensi memecahkan masalah saya.

Kesalahan persis ini terkait dengan blok konten oleh Youtube ketika "diputar di situs atau aplikasi tertentu". Lebih khusus lagi oleh WMG (Warner Music Group).

Namun pesan kesalahan tidak menyarankan bahwa https iframe mengimpor ke situs http adalah masalah, yang tidak ada dalam kasus ini.

Hapus Prefetch DNS akan mengatasi masalah ini.

Jika Anda menggunakan WordPress, tambahkan baris ini di functions.php tema Anda

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

Anda dapat mengubah iframe Anda menjadi seperti ini dan menambahkan asal menjadi situs web Anda saat ini. Ini mengatasi kesalahan pada browser saya.

<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

Mungkin ada yang berikut ini, tetapi semuanya mengarah ke DOM yang tidak dimuat sebelum diakses oleh javascript.

Jadi di sini adalah apa yang Anda harus memastikan sebelum benar-benar memanggil kode JS: * Pastikan wadah telah dimuat sebelum javascript disebut * Pastikan URL target dimuat dalam wadah apa pun yang harus

Saya menemukan masalah serupa tetapi pada lokal saya ketika saya mencoba untuk menjalankan Javascript saya dengan baik sebelum onLoad dari halaman utama yang menyebabkan pesan kesalahan. Saya telah memperbaikinya dengan hanya menunggu seluruh halaman dimuat dan kemudian memanggil fungsi yang diperlukan.

Anda bisa melakukan ini dengan menambahkan fungsi batas waktu ketika halaman telah dimuat dan memanggil acara onload Anda seperti:

window.onload = fungsi baru () {setTimeout (function () {// some onload event}, 10); }

yang akan memastikan apa yang Anda coba akan dijalankan dengan baik setelah onLoad dipicu.

Anda juga mendapatkan pesan ini ketika Anda tidak menentukan targetOrigin dalam panggilan ke window.postMessage().

Dalam contoh ini kami memposting pesan ke iFrame pertama dan menggunakan *sebagai target, yang seharusnya memungkinkan komunikasi ke targetOrigin apa pun.

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

Dalam contoh saya setidaknya ini tampaknya menjadi kondisi "tidak siap" yang tidak berbahaya yang API coba lagi sampai berhasil.

Saya mendapatkan dari dua hingga sembilan ini (pada case-tester terburuk saya, FossilBook 2009 dengan 20 tab terbuka melalui hotspot seluler) .... tapi kemudian videonya berfungsi dengan baik. Setelah menjalankan panggilan berbasis postMessage saya untuk seekTo pasti berfungsi, belum menguji orang lain.

Dalam beberapa kasus (seperti yang disebutkan salah satu komentator) ini mungkin disebabkan jika Anda memindahkan pemain dalam DOM, seperti appendatau dll.

Anda dapat mencoba :

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

Saya juga menghadapi masalah yang sama kemudian saya mengunjungi Youtube Iframe Api resmi di mana saya menemukan ini:

Browser pengguna harus mendukung fitur postMessage HTML5. Sebagian besar browser modern mendukung postMessage

dan berkeliaran untuk melihat bahwa halaman resmi juga menghadapi masalah ini. Cukup Kunjungi Youtube Iframe Api resmi dan lihat log konsol. Versi Chrome saya adalah 79.0.3945.88.

punyaku adalah:

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

Saya baru saja menghapus baris dengan playerVars, dan itu bekerja tanpa kesalahan di konsol.