ไม่สามารถเรียกใช้ '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.comhttp://localhost:9000

1. ฉันไม่ได้รับปัญหา อะไรคือปัญหา?
2. ฉันจะแก้ไขได้อย่างไร

httpsผมเชื่อว่านี่เป็นปัญหากับความเป็นแหล่งกำเนิดเป้าหมาย ผมสงสัยว่ามันเป็นเพราะ URL iFrame ของคุณใช้แทน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

สังเกตส่วนประกอบ "ต้นทาง" รวมถึง "enablejsapi = 1" ที่มาจะต้องตรงกับโดเมนของคุณแล้วมันจะได้รับอนุญาตและทำงาน

ลองใช้window.location.hrefURL เพื่อให้ตรงกับที่มาของหน้าต่าง

ฉันได้รับข้อผิดพลาดเดียวกัน ความผิดพลาดของฉันคือenablejsapi=1พารามิเตอร์ไม่ได้อยู่ในiframesrc

ฉันคิดว่าคำอธิบายของข้อผิดพลาดนั้นทำให้เข้าใจผิดและในขั้นต้นนั้นเกี่ยวข้องกับการใช้งานวัตถุผู้เล่นผิด

ฉันมีปัญหาเดียวกันเมื่อเปลี่ยนเป็นวิดีโอใหม่ใน Slider

เมื่อใช้player.destroy()ฟังก์ชั่นที่อธิบายไว้ที่นี่ปัญหาก็จะหมดไป

ฉันมีปัญหาเดียวกันนี้และปรากฎว่าเป็นเพราะฉันมีส่วนขยาย Chrome "HTTPS ทุกที่" ทำงานอยู่ การปิดใช้งานส่วนขยายแก้ไขปัญหาของฉันได้

ข้อผิดพลาดที่แน่นอนนี้เกี่ยวข้องกับการบล็อกเนื้อหาโดย Youtube เมื่อ "เล่นในบางเว็บไซต์หรือแอปพลิเคชัน" เฉพาะเจาะจงมากขึ้นโดย WMG (กลุ่มเพลง Warner)

ข้อความแสดงข้อผิดพลาดได้แนะนำให้นำ https iframe ไปยังเว็บไซต์ http เป็นปัญหาซึ่งไม่ได้เกิดขึ้นในกรณีนี้

นำการดึงข้อมูล 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>

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

อาจมีข้อใดข้อหนึ่งต่อไปนี้ แต่ทั้งหมดนำไปสู่ ​​DOM ที่ไม่ได้โหลดก่อนที่จะเข้าถึงโดยจาวาสคริปต์

ดังนั้นนี่คือสิ่งที่คุณต้องตรวจสอบก่อนที่จะเรียกรหัส JS: * ตรวจสอบให้แน่ใจว่าโหลดคอนเทนเนอร์ก่อนเรียกใช้จาวาสคริปต์ใด ๆ * ตรวจสอบให้แน่ใจว่ามีการโหลด URL เป้าหมายในคอนเทนเนอร์ใด ๆ

ฉันเจอปัญหาที่คล้ายกัน แต่ในพื้นที่ของฉันเมื่อฉันพยายามให้ Javascript ทำงานได้ดีก่อนโหลดหน้าหลักซึ่งทำให้เกิดข้อความแสดงข้อผิดพลาด ฉันได้แก้ไขโดยเพียงแค่รอให้โหลดทั้งหน้าจากนั้นเรียกใช้ฟังก์ชันที่ต้องการ

คุณสามารถทำได้โดยเพิ่มฟังก์ชั่นไทม์เอาต์เมื่อหน้าโหลดและเรียกเหตุการณ์ onload ของคุณเช่น:

window.onload = ฟังก์ชั่นใหม่ () {setTimeout (ฟังก์ชั่น () {// บางเหตุการณ์ onload}, 10); }

ที่จะให้แน่ใจว่าสิ่งที่คุณพยายามจะทำงานได้ดีหลังจาก onLoad เป็นทริกเกอร์

คุณยังได้รับข้อความนี้เมื่อคุณไม่ได้ระบุtargetOriginwindow.postMessage()ในการโทรไปยัง

ในตัวอย่างนี้เราโพสต์ข้อความไปยัง iFrame แรกและใช้*เป็นเป้าหมายซึ่งควรอนุญาตการสื่อสารไปยัง targetOrigin ใด ๆ

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

ในอินสแตนซ์ของฉันอย่างน้อยนี่ดูเหมือนว่าจะเป็นเงื่อนไข "ไม่พร้อม" ที่ไม่เป็นอันตรายที่ API ลองใหม่จนกว่าจะประสบความสำเร็จ

ฉันได้ทุกที่จากสองถึงเก้าของเหล่านี้ (ในกรณีทดสอบที่เลวร้ายที่สุดของฉัน, 2009 FossilBook ที่มี 20 แท็บเปิดผ่านทางฮอตสปอตมือถือ) .... แต่แล้ววิดีโอทำงานได้อย่างถูกต้อง เมื่อมีการเรียกใช้การโพสต์ข้อความของฉันในการค้นหาเพื่อทำงานได้อย่างแน่นอนไม่ได้ทดสอบคนอื่น

ในบางกรณี (ตามที่ผู้วิจารณ์คนหนึ่งพูดถึง) อาจเกิดขึ้นได้หากคุณย้ายผู้เล่นภายใน DOM เช่นappendหรืออื่น ๆ

คุณสามารถลอง :

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

ฉันกำลังเผชิญปัญหาเดียวกันจากนั้นฉันไปที่Youtube Iframe Api อย่างเป็นทางการที่ฉันพบสิ่งนี้:

เบราว์เซอร์ของผู้ใช้จะต้องสนับสนุนคุณสมบัติ postMessage HTML5 เบราว์เซอร์ที่ทันสมัยส่วนใหญ่รองรับ postMessage

และเดินไปดูหน้าอย่างเป็นทางการก็ประสบปัญหานี้เช่นกัน เพียงเข้าไปที่Youtube Iframe Api อย่างเป็นทางการและดูบันทึกคอนโซล Chrome รุ่นของฉันคือ 79.0.3945.88

ของฉันคือ:

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

ฉันเพิ่งลบ line ด้วย playerVars และทำงานได้โดยไม่มีข้อผิดพลาดบนคอนโซล