barba.jsを導入したブログでGistの埋め込みが表示されない件。document.writeを含む外部スクリプトの処理
- 沖縄移住10年目。海でぼぉーっとオカヤドカリを見つめ、コーヒーとかビール飲んでれば幸福な人生です。最近、昆虫細密画を描くのにハマってます。
pjaxでシームレスな画面遷移を実現できる「barba.js」さん。
アニメーションをかませると、超クールで爆速で素敵だけど、外部スクリプトの読み込みを、newPageReadyのファンクションの中でやらなきゃいかんのです。
しかも外部スクリプト側で「document.write」が書かれているやつは、jsで読み込み指示するとエラーになっちゃうらしい。（セキュリティ的によろしくないものね）
document.write
HTML上（正しくはDOM上）に書き込むってことです。JSで書き込みできちゃうので、アタックされたときとか悪い人がページを自由に書き換えできちゃうと怖いですね。[リファレンス]document.write – Web API インターフェイス | MDN
そして私が埋め込んでいる「Gist」がまさにそれだった。
どうしたらいいんや。
barba.jsの外部スクリプト読み込みの処理
document.writeのあるgistの埋め込みはどうしたらいいのかわからなくてハマってる
— みなみのひげ (@minami_hige) 2018年7月26日
一応、コードはまだきったないけど解決しました。
- スポンサーリンク
iframeで同期的に読み込んで親フレームのコールバック関数を呼ぶ
barba.jsにかかわらず、外部スクリプトで「document.write」を含むファイルが読み込めない問題で悩んでいる人はいるようで、見つけました。
こちら。
素晴らしいやりとり。
読み込み先のjsファイルにdocument.writeがある場合は、iframeで同期的に読み込んで親フレームのコールバック関数を呼ぶ方法でいけるそうです。
…………
iframeで同期的に読み込んで親フレームのコールバック関数を呼ぶってどういうこと？
- iframeタグをDOM上に作成
- iframe内でjsを走らせる（document.write実行）
- （iframe内に）HTMLを出力
- 出力したHTMLを返り値に入れる
- コールバックで受け取る
- appendとかで出力できる！！
ということだそうですね。素晴らしいです。世の中、天才だらけですね。
作成したコード（barba-custom.js内に記述）
※最初、forEachのところをforで書いてたんですけど、それだとインデックスの変数が正しく伝わらず出力位置がおかしくなったので直しました。
生JSとjQUeryがごっちゃになっててツギハギで気持ち悪いのは、昨日の今日なので許してください。こちとら2ヶ月前にプログラミング教室卒業したばっかりなのです。（言い訳です。）
やってることはこんな感じです。
（getWritten関数は、JavaScript – 外部ドメイン上のスクリプトのdocument.write処理の代替案について。(19331)｜teratailを参照）
scriptタグのとこを選択するってことですね。
sucriptのsrcのとこを関数の返り値にのせるとiframe内で、指定したjsファイルを開くようになってます。
選択したスクリプトの下に、classが「inrjs」とついたdivタグを作り、そのなかに出力したかったHTMLを吐き出し完了です。
「inrjs」のクラス名は適当です。
divタグは消してもいいです。
私は他の操作で使いそうだったので残しているだけです。
ページ遷移時のJS読み込み系はよく把握しないといけない
私はbarba.jsを、Wordpressブログで導入しているのですが、プラグインとか広告とか、JSまわり色々あるので把握して正常に動作させるのがけっこう手間で大変ですね..。
悩ましい。
とはいえ、シームレスな画面遷移のインタラクションはやっぱり魅力的！
今、しばらく様子を見てみようと思います。
※記事で紹介したコードは動作を保証するものではございません。必ず自己責任で使用してください。コードを使う際はテストを行い、動作検証をおこなってください。