Youtubeで Failed to execute ‘postMessage’ on ‘DOMWindow’: が止まらない

なんじゃこりゃ

Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://www.youtube.com’) does not match the recipient window’s origin (‘http://sample.com’).

去年は普通に動いていたはずのサイトで、上記のエラーが出ているので調べた。

結局今の所、1)放置2)気持ち悪いけど対処する、の2択

<script src="https://www.youtube.com/iframe_api"></script>

をサイトに読み込ませればいいが、JavascriptIframeApiでも同じ領域を読み込ませるようにしているので、最終的なソースでは二重に呼び出すこととなり、気持ち悪い。。。というわけで、今の所、放置するか、気持ち悪いけど上記スクリプトを読ませるかの二択。

以下経緯

http領域でhttps領域を参照しているから出るという記事がいっぱい。でも治らん。

まず検索すると、

Youtube貼り付けでJSエラー – サイコロン

originを指定すればよいという記事が上位に出てくる、確かに、おれ、こっちから来たこういうもんだからって宣言すれば治りそう。でも治らん。このエラーが出るよ〜って言ってるヒト、大体httpsじゃなくてhttp領域でテストしてる人らなんよな。
プロトコルがちゃうからあかんなら
https://www.youtube.com///www.youtube.com/にしたらええんちゃう?という記事もたくさんあったが、治らん。

よくよくコンソールを見てみると、どうやら、iframe_api読み込んだときに追記される別のスクリプトがエラー吐いてる


<script src="https://s.ytimg.com/yts/jsbin/www-widgetapi-*****/www-widgetapi.js"></script>

エラーの内容だけじゃなくて、ちゃんとコンソールを見てみると、上記のJSが、読み込み時に吐いているエラーらしい。
そら、youtube本体のURLのプロトコル指定なしにあかんわ。こっちそれに関係なくhttpsなんやもん。
というわけでもう無理かな〜と思ったら。

このエラー、先にiframe_apiのスクリプト読み込んでおけば治るってよ。

javascript – Youtube iframe API fails to post message – Stack Overflow
https://stackoverflow.com/questions/16050024/youtube-iframe-api-fails-to-post-message

下の方のコメント意訳:「この投稿からもう三年も経ったけど、これ読んだら治るよ〜」

え〜〜え〜〜

治ったw

でも最初にかいたけど、サンプルコード通りに書くとiframe_apiを二回書くことになるので、若干気持ち悪いような。。
Youtubeさん準備のコードが吐くエラーですしと無視する
気持ち悪いと思いながらクライアント様をなだめるために二度iframe_apiを読み込む

場合によって使い分けてね★

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください