杏z学習帳
Swiftを中心にFlutterやらUnityなどに手を出してます

GithubGist埋め込みを復活させたい。。!(2018/02/26)

GithubGist埋め込みを復活させたい。。!

tumblrの仕様変更で記事にjsの埋め込みが無効化されるわけですが...
なんかこのままだと負けた気がするので、ごにょごにょして埋め込みを有効にしてみました。
ってことで

tumblrにGithubGistの埋め込みを復活させる!

です。

ゆるふわ系デベロッパですが...まけたままじゃいられない!と思いまして、
tumblrにgist埋め込みをなんとか有効化させたろ!と...

tumblrでは記事にはjsは埋め込めないけども...テンプレート(テーマ)には埋め込めるので...
(まぁそこもダメになったら終わるけどね...(笑))
そこを利用したらいいのでは...!

最初にやったこと

gistの埋め込みタグをjsであとから書いたらええんちゃう?

ということ。
サクッとやってみた結果...
まーブラウザのセキリュティにより弾かれるよね...(笑)
jsでscriptタグを埋め込むと...

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

😅

次にやったこと

そしたらiframeで直接body書けばいいっしょ!
というのも、iframeでの埋め込み系はピンピンしているので、いけるんだろうなと...

いけました!!

やったね(笑)
こちらのtumblr時代の記事をみてみてください。見事に復活しております(笑)

gistを埋め込みをiframeで有効化させるコード

これをtumblrのお使いのテーマを編集するってとこから、
body直前ぐらいにでも埋め込んでください。

で、gistを埋め込みたいところに埋め込みコードの代わりに...

`


これをいれたげるだけっす  

ポイントとしては、iframeのbodyをかいてるとこで`</body>`を分割させてるとこですね...  
分割させずにそのままやっちゃうと...そこに謎のjsが混入してくる。  
差し込まれるjs見る感じ、tumblr側がねじ込んでくるやつですね...多分文字列で`</body>`を検索して差し込むロジックなんでしょうね...。