hirokonaBlog

ググる→忘れそう→即時メモ 京都のWebデザイナーの備忘録

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を読み込む

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


投稿日

カテゴリー:

,

投稿者:

コメント

“Youtubeで Failed to execute ‘postMessage’ on ‘DOMWindow’: が止まらない” への2件のフィードバック

  1. higaのアバター
    higa

    私もこのエラーが気になって調べておりたどり着いたのですがstack overflowの内容で治りますか?
    http://jsfiddle.net/8tkgW/
    をみてもエラーがでているので、どうされると治るのかと気になりまして。

    1. hihihiのアバター
      hihihi

      コメントありがとうございます!
      かなり時間立ってしまいすみません。
      ざっと確認しましたが、私が書いているのがYoutubeのプレイヤーをiframeを直接埋め込まずhtmlの特定のエリアを指定してJavascriptIframeApi経由で動的に埋め込みを呼び出す実装方法ですので、残念ながらちょっと前提が違ってしまっているのかな〜と思います。
      そしてご指摘の「この方法でいけますか??」の「この方法」は、Stack Overflowの現在上から二個目に出てくる回答を指して言っているのかな?と思います。
      私が引用している部分は現在上から一個目に出てくる回答のところでして、
      こちらもJS経由の埋め込みが前提の解決方法となります。お役に立てずにすみません〜。

      ちなみに言及いただいた方のjsFiddleのソースは確かに、iframe直接読み込んでいるし、JS動いてないっぽいし、何をやっているのかよくわかりませんね。。
      www有無で挙動が変わるYoutubeのJSは糞だ!って書いてますが、
      www有で呼び出しているiframeを残してJS全部消したらエラーは吐かれなくなったけどこれが言いたかったのかな。。。
      以上、とりいそぎざっと見てわかったところまでご返信まで。
      またiframe埋め込みでわかることあればポストしますね。
      埋め込み周り、いろいろとややこしくてげー吐きそうですがお互い頑張りましょう・・・!

コメントを残す

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

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