ピティナ開発者ブログ

全日本ピアノ指導者協会のIT担当者が気まぐれにつづる技術系中心のブログです


bodyタグの終了直前でJavascriptを実行させたいけれど理由があって直接編集できない時の対策(はてなブログとか)

この開発者ブログでまさにぶち当たった問題なのですが……
Smoochの実装には、bodyタグの終了直前で、initializeしてあげなくてはならない。

ptna.hateblo.jp

しかし、はてなブログでは、bodyタグの直前に何かを入れることを直接編集できません。
たぶん、はてブロに限らず、JimdoとかWeeblyとかWEBサイトを簡単に見たまま編集できるぜ系の何かそういうツールでも、同じような壁に当たるのではないかと思いますし、bodyタグの直前で読ませてね系のものは色々多いので、そうしたいけれどちょっと難しいという局面もそこそこ出てくるのではないでしょうか。
で、どうするか、というと、jsでappendさせて実行させよう、というお話です。

実装例

headタグ内など他のところで次のようにJS実行させればOKです。
例はSmoochで。

<script>
document.addEventListener('DOMContentLoaded', function() {
  smoochAppend();

  function smoochAppend(){
    var script = document.createElement('script');
    script.src = '//cdn.smooch.io/smooch.min.js';
    script.onload = function() {
      smoochInit();
    }
    document.body.appendChild(script);
  }

  function smoochInit(){
    var script = document.createElement('script');
    script.innerHTML = "Smooch.init({ appToken: 'hogehoge' });";
    document.body.appendChild(script);
  }
});
</script>

外部jsファイルを読み込ませて、読み込み完了してからinitializeさせる、という処理内容になっています。
jQueryが先に読み込まれていなくても使えるようにしようという前提なので、生jsで。
たぶんもうちょいちょい素敵な書き方ができるとは思いますが、ご参考まで。

(著: Hiroyuki Noguchi)
この記事は現在0人が閲覧中