Не вдалося виконати "postMessage" у "DOMWindow": 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. Я підозрюю , що це тому , що ваш 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).

Однак повідомлення про помилку припускає, що проблемою було імпортування https iframe на http-сайт, що в цьому випадку не було.

Видалення попереднього вибору DNS вирішить цю проблему.

Якщо ви використовуєте WordPress, додайте цей рядок у function.php своєї теми

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>

ref: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Тут може бути будь-яке з наступних, але всі вони призводять до DOM, не завантаженого до того, як до нього звертається JavaScript.

Отже, ось що ви повинні переконатися перед тим, як насправді викликати JS-код: * Переконайтеся, що контейнер завантажився перед тим, як викликати будь-який JavaScript * Переконайтеся, що цільова URL-адреса завантажена в будь-який контейнер.

Я натрапив на подібну проблему, але в моїй локальній програмі, коли я намагаюся запустити Javascript задовго до onLoad головної сторінки, що викликає повідомлення про помилку. Я виправив це, просто чекаючи завантаження цілої сторінки, а потім викликав необхідну функцію.

Ви можете просто зробити це, додавши функцію тайм-ауту, коли сторінка завантажується, і зателефонувати вашій події завантаження, наприклад:

window.onload = нова функція () {setTimeout (функція () {// деяка подія завантаження}, 10); }

це забезпечить те, що ви намагаєтеся виконати добре після запуску onLoad.

Ви також отримуєте це повідомлення, коли не вказуєте targetOrigin у викликах до window.postMessage().

У цьому прикладі ми розміщуємо повідомлення до першого iFrame та використовуємо *як цільове, що повинно дозволяти спілкування з будь-яким targetOrigin.

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

У моєму випадку, принаймні, це здається нешкідливим «не готовим» умовою, що API повторюється, поки це не вдасться.

Я отримую десь від двох до дев'яти таких (на моєму найгіршому тестері, FossilBook 2009 року з 20 вкладками, відкритими через мобільну точку доступу) .... але тоді відео працює належним чином. Після того, як він виконує мої дзвінки на основі постмесажу, щоб шукати, щоб точно працювати, не перевіряв інших.

У деяких випадках (як згадував один коментатор) це може бути спричинене, якщо ви переміщуєте програвача в 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, і вона працювала без помилок на консолі.