前の関連記事：Blogger:表示速度向上のためCSSとJavaScriptの置き場を考える:その2
これまでこのブログに埋め込んだインラインJavaScript一覧
まずはこのブログで使っているJavaScriptをリストアップします。
（イ）Blogger:ページ番号付ページナビ(8)Paginavi_Bloggerモジュールの導入
ページナビ。
（ロ） linuxBean14.04(123)SyntaxHighlighter v4のブラシを作成する
SyntaxHighlighter。
（ハ）MathJax(1)ブログに数式をきれいに表示させる方法
MathJax。
これはBlogger:表示速度向上のためCSSとJavaScriptの置き場を考える:その2でscriptタグにasyncを付けて非同期化しました。
（ニ）Blogger:モバイルサイト(1)横にフリックでページが移動することを無効にする
（ホ）Blogger:「Powered by Blogger」の横に自動更新コピーライトを表示させたい
(document.write()使用。)
（へ）Blogger：レイアウト編集(9)各投稿の更新日時の表示をする（成功編）
(jQuery使用。document.write()使用。)
（ト）Blogger:モバイルサイト(6)更新日時の表示などヘッダーの改造
(jQuery使用。document.write()使用。)
（チ）Blogger：日付ヘッダーを必ず表示させる方法
(document.write()使用。)
（リ）Blogger:投稿タイトルの下に「年月日 曜日 時刻」を表示させる
(document.write()使用。)
（ヌ）Blogger：ページビュー設定(8)jQueryで「自分のページビューを追跡しない」設定ページをスマートに
(jQuery使用)
（イ）（ロ）はこれ以上の解決方法は思いつかず、（ハ）は解決済みで（チ）は使用していないのでそれ以外を見直します。
8月半ばから急に他に膨大に手をとられることができて、下書き書いたまま3ヶ月近く放置していたので何を考えて書いていたのやら忘れてしまいました。
とりあえずぼちぼち再開していこうと思います。
（ニ）モバイルサイトで横にフリックでページが移動することを無効にする
Blogger:モバイルサイト(1)横にフリックでページが移動することを無効にする
<!-- モバイルサイトでスワイプでページ移動を無効にする -->
<b:if cond='data:blog.isMobile'>
<script type='text/javascript'>
(function() {
var c = document.getElementById("main");
c.addEventListener = null;
})()
</script>
</b:if>
<!-- モバイルサイトでスワイプでページ移動を無効にするここまで -->
これが</body>タグのすぐ上に入っています。これはとくに表示が遅くなる原因ではなさそうなので修正の必要はありませんが、一行でしてみました。
<b:if cond='data:blog.isMobile'>
<script type='text/javascript'>(function(){ document.getElementById("main").addEventListener = null;})()</script><!-- モバイルサイトでスワイプでページ移動を無効にする -->
</b:if>
（ホ）自動更新コピーライトの表示
Blogger:「Powered by Blogger」の横に自動更新コピーライトを表示させたい
これはfooter-1セクションのHTML2というウィジェットidのHTML/JavaScriptガジェットに入っていました。
<script>document.write("© 2013-<scr"+"ipt type=\"text/javascript\">myDate = new Date();myYear = myDate.getFullYear();document.write(myYear);<\/scr"+"ipt> p--q");</script> Powered by <a href='http://www.blogger.com' target='_blank'>Blogger</a>.
document.write()を使うJavaScriptをdocument.write()で書き込んでいます。これをelement.innerHTMLを使う方法に変更します。
Blogger:「Powered by Blogger」の横に自動更新コピーライトを表示させたいではうまくやる方法がわからなかったAttirbutionウィジェットの置き換える方法に変更します。
デフォルトのAttributionガジェットはidがAttribution1のdivに入っています。
この要素をdocument.getElementByIdで取得してelement.innerHTMLで書き換えます。
<script>
var myDate = new Date();
document.getElementById("Attribution1").innerHTML = "© 2013-" + myDate.getFullYear() + " p--q Powered by <a href='http://www.blogger.com' target='_blank'>Blogger</a>.";
</script>
これをHTML/JavaScriptガジェットの中に入れて、Attributionガジェットの後に読み込まれるようにレイアウト画面で配置してレイアウトを保存します。
これでうまくいきました。
このブログではインデックスページのコピーライトの最後のピリオドにBlogger：ページビュー設定(7)どのブラウザでも同じ方法で設定するページを作るの簡易隠しページへのリンクを張っています。
<a href='javascript:location.href ="http://"+location.hostname+"/p/"+prompt("パスワードを入力してください。","")+".html";'>.</a>
リンクをクリックするとパスワードの入力画面がでて、そのパスワードをページ名とする静的ページへのリンクをJavaScriptで動的に作成しています。(2016.12.3追記。HTPPSへのリダイレクトするように設定を変えたのでhttpをhttpsに変更しました。)
インデックスページのコピーライトの最後のピリオドのみこのアンカーで置換するようにします。
<script>
var myDate = new Date();
document.getElementById("Attribution1").innerHTML = "© 2013-" + myDate.getFullYear() + " p--q Powered by <a href='http://www.blogger.com' target='_blank'>Blogger</a>.";
</script>
<script>
var elem = document.getElementById("Attribution1").innerHTML;
var url = 'javascript:location.href="https://"+location.hostname+"/p/"+prompt("パスワードを入力してください。","")+".html"';
document.getElementById("Attribution1").innerHTML = elem.slice(0,-1) + "<a href=" + url + ">.</a>";
</script>
とりあえずこれで最後のピリオドにアンカータグをつけることはできましたがインデックスページだけには限定できていません。JavaScript/HTMLガジェット内からページの種類を判定する方法はなさそうなので、隠しページへのリンクを作成するJavaScriptはテンプレートに直接書き込むことにします。
レイアウト画面でfooter-1にAttributionガジェットを追加したその下のHTML2のガジェットに次のJavaScriptを入れました。
<script>
var myDate = new Date();
document.getElementById("Attribution1").innerHTML = "© 2013-" + myDate.getFullYear() + " p--q Powered by <a href='http://www.blogger.com' target='_blank'>Blogger</a>.";
</script>
これだとコピーライトが左寄せになってしまったのでプロパティを追加します。element.setAttributeを使います。
<script>
var myDate = new Date();
var elem = document.getElementById("Attribution1");
elem.innerHTML = "© 2013-" + myDate.getFullYear() + " p--q Powered by <a href='http://www.blogger.com' target='_blank'>Blogger</a>.";
elem.setAttribute("align", "center");
</script>
これで中央寄せになりました。次にインデックスページのみ隠しページへのリンクをつけるJavaScriptをテンプレートに埋め込みます。
ダッシュボード→テンプレート→HTMLの編集。
Attribution1エレメントを置換しているJavaScriptが入っているウィジェットHTML2と同じところに埋め込むことにしますので、ウィジェットへの移動→HTML2。
<script>
var elem = document.getElementById("Attribution1").innerHTML;
var url = 'javascript:location.href="https://"+location.hostname+"/p/"+prompt("パスワードを入力してください。","")+".html"';
document.getElementById("Attribution1").innerHTML = elem.slice(0,-1) + "<a href=" + url + ">.</a>";
</script>
このJavaScriptをテンプレートのHTMLに埋め込みたいのですが、HTML文字をエスケープしないといけません。Bloggerの編集画面にこのコードを貼り付けてHTMLモードでみるとエスケープされています。
<script><br />
var elem = document.getElementById("Attribution1").innerHTML;<br />
var url = 'javascript:location.href="http://"+location.hostname+"/p/"+prompt("パスワードを入力してください。","")+".html"';<br />
document.getElementById("Attribution1").innerHTML = elem.slice(0,-1) + "<a href=" + url + ">.</a>";<br />
</script><br />
これから<br />と を削除します。<script>
var elem = document.getElementById("Attribution1").innerHTML;
var url = 'javascript:location.href="https://"+location.hostname+"/p/"+prompt("パスワードを入力してください。","")+".html"';
document.getElementById("Attribution1").innerHTML = elem.slice(0,-1) + "<a href=" + url + ">.</a>";
</script>
これをテンプレートのHTMLに埋め込みます。 <b:widget id='HTML2' locked='false' mobile='yes' title='' type='HTML' version='1' visible='true'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<!-- インデックスページ以外のコピーライト -->
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:if cond='data:blog.pageType == "index"'>
<!-- インデックスページのコピーライトのみを修飾 -->
<script>
var elem = document.getElementById("Attribution1").innerHTML;
var url = 'javascript:location.href="https://"+location.hostname+"/p/"+prompt("パスワードを入力してください。","")+".html"';
document.getElementById("Attribution1").innerHTML = elem.slice(0,-1) + "<a href=" + url + ">.</a>";
</script>
</b:if>
</b:includable>
</b:widget>
ハイライトしている行がテンプレートのHTMLを編集した部分です。これでうまくdocument.write()を使わずにでできました。
参考にしたサイト
The Curious Case of document.write - Eager Blog
document.write()はDOMの構築をブロックする以外にも弊害ばかりでメリットがないです。
0 件のコメント:
コメントを投稿