barba.jsを導入したブログでGistの埋め込みが表示されない件。document.writeを含む外部スクリプトの処理

pjaxでシームレスな画面遷移を実現できる「barba.js」さん。

アニメーションをかませると、超クールで爆速で素敵だけど、外部スクリプトの読み込みを、newPageReadyのファンクションの中でやらなきゃいかんのです。

しかも外部スクリプト側で「document.write」が書かれているやつは、jsで読み込み指示するとエラーになっちゃうらしい。(セキュリティ的によろしくないものね)

document.write

HTML上(正しくはDOM上)に書き込むってことです。JSで書き込みできちゃうので、アタックされたときとか悪い人がページを自由に書き換えできちゃうと怖いですね。[リファレンス]document.write – Web API インターフェイス | MDN

そして私が埋め込んでいる「Gist」がまさにそれだった。

どうしたらいいんや。

一応、コードはまだきったないけど解決しました。

iframeで同期的に読み込んで親フレームのコールバック関数を呼ぶ

barba.jsにかかわらず、外部スクリプトで「document.write」を含むファイルが読み込めない問題で悩んでいる人はいるようで、見つけました。

こちら。
素晴らしいやりとり。

読み込み先のjsファイルにdocument.writeがある場合は、iframeで同期的に読み込んで親フレームのコールバック関数を呼ぶ方法でいけるそうです。

・・・。

iframeで同期的に読み込んで親フレームのコールバック関数を呼ぶってどういうこと?

  1. iframeタグをDOM上に作成
  2. iframe内でjsを走らせる(document.write実行)
  3. (iframe内に)HTMLを出力
  4. 出力したHTMLを返り値に入れる
  5. コールバックで受け取る
  6. appendとかで出力できる!!

ということだそうですね。素晴らしいです。世の中、天才だらけですね。

作成したコード(barba-custom.js内に記述)

※最初、forEachのところをforで書いてたんですけど、それだとインデックスの変数が正しく伝わらず出力位置がおかしくなったので直しました。

生JSとjQUeryがごっちゃになっててツギハギで気持ち悪いのは、昨日の今日なので許してください。こちとら2ヶ月前にプログラミング教室卒業したばっかりなのです。(言い訳です。)

やってることはこんな感じです。

getWritten(fileName, callback)関数を下の方に作成。

(getWritten関数は、JavaScript – 外部ドメイン上のスクリプトのdocument.write処理の代替案について。(19331)|teratailを参照)

DOM上の再読み込みさせたいscriptタグを、querySelecorAllで取得。

scriptタグのとこを選択するってことですね。

scriptのソースを関数の返り値(fileNameの方)にのせる。

sucriptのsrcのとこを関数の返り値にのせるとiframe内で、指定したjsファイルを開くようになってます。

callback関数のなかで、divタグ(class名 inrjs)を作り、その中にiframeの方から受け取ったHTMLを出力

選択したスクリプトの下に、classが「inrjs」とついたdivタグを作り、そのなかに出力したかったHTMLを吐き出し完了です。
「inrjs」のクラス名は適当です。

divタグは消してもいいです。
私は他の操作で使いそうだったので残しているだけです。

ページ遷移時のJS読み込み系はよく把握しないといけない

私はbarba.jsを、Wordpressブログで導入しているのですが、プラグインとか広告とか、JSまわり色々あるので把握して正常に動作させるのがけっこう手間で大変ですね..。

悩ましい。

とはいえ、シームレスな画面遷移のインタラクションはやっぱり魅力的!

今、しばらく様子を見てみようと思います。

記事中のコードは動作を保証するものではありません。コードを利用したことで起きた一切の負債について当方は責任を負いません。必ず自己責任にてご利用くださいませ。

記事をシェアする

barba.jsを導入したブログでGistの埋め込みが表示されない件。document.writeを含む外部スクリプトの処理