Monday, 27 August 2012

document.write() 複数行の記述方法

拙サイトの全ページ共通のフッター部分を、1箇所で集中管理できたら後々楽なので、フッター部分を外部JavaScriptにしてdocument.writeで記述することにした。で、document.writeに複数行を記述する方法をググってみたらさすが、ありましたよ丁寧な解説が。


感謝感激。

色々な複数行の記述方法が提示されている中、シンプルなものが最後にありました。
各行の改行した箇所に\(バックスラッシュ)を挿入するだけで、改行やインデントをしたままのHTMLもそのままOK。イザという時の修正・変更などもしやすい。

というわけで、以下のdocument.writeに
document.write('
<!-- scroll to top BEGIN -->
<div id="scrolltotop">
 <span class="scroll-to-top lsf">up</span>
</div>
<!-- scroll to top END -->

<!-- copyright BEGIN -->
<div id="copyright">
 <span>©2012 eſzett design, Osaka Japan</span>
</div>
<!-- copyright END -->
');
各行の改行した箇所に\(バックスラッシュ)を挿入
document.write('\
<!-- scroll to top BEGIN -->\
<div id="scrolltotop">\
 <span class="scroll-to-top lsf">up</span>\
</div>\
<!-- scroll to top END -->\
\ ←注意!
<!-- copyright BEGIN -->\
<div id="copyright">\
 <span>©2012 eſzett design, Osaka Japan</span>\
</div>\
<!-- copyright END -->\
');

このとき注意したいのが、上記に「注意」と書いた箇所。HTMLを読みやすいように1行以上空けている場合、この行にも\(バックスラッシュ)を挿入を忘れないこと(この行ももちろん改行してるので)。忘れるとdocument.writeの内容がブラウザに全く反映されない(けっこう焦りましたよ)。

ということで、これでフッターが一元的に管理可能となった。

No comments:

Post a Comment