jQuery : window.openでテキストエリアを開いてクリップボード用データを表示する

処理そのものは、jQuery である必要はあまりないのですが、イベントの処理が必要なので jQuery で書いています。インラインで全て書いてしまってもいいのですが、引用符がかなり複雑になって面倒なのでこれでいいと思います。

ちょっとした貼り付け用のサービスとして

どのような対象でも、クリックする事によってウインドウを開かせて、追加の情報としてテキストエリアの中に表示し、テキストエリアの中をクリックすると選択状態になります。

後は、ユーザーがコピーするかどうするかはご自由に・・・という処理です。


こんな感じでデータを表示




▼ こちらをクリックして下さい

<script type="text/javascript"> // この内容をテキストエリアに転送します // ※ クリックすると、選択されます </script>

<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");

}
</script>
<script>

$(function() {
	$("#target").append("window.openでテキストエリアを開いてクリップボード用データを表示する")
	 .css("cursor","pointer")
	 .click(function() {
		var doc = window.open(
			"about:blank",
			"",
			"width=600,height=100").document;
		doc.write("<textarea onclick=\"this.select();\" cols=70 rows=5>" );
		doc.write( $("#target .show_text").text() );
		doc.write("</textarea>");
		doc.close();
	});
});
</script>


<style type="text/css">
.show_text {
	display: none;
}
</style>

<span id="target"><span class="show_text">&lt;script type="text/javascript"&gt;
// この内容をテキストエリアに転送します
// ※ クリックすると、選択されます
&lt;/script&gt;
</span></span>

document.write() である理由

DOM で作成するのは、本来合理的ではありません。過去、ブラウザによって DOM の実装が違ったりバグだったりと、同じ処理でできるかもしれないのは、jQuery がある前提で、jQuery に問題が出ればかなり困った事になります。

まあそんな大げさでも無いですが、画面レイアウトを全て DOM で作成するのはやはり合理的では無いので、HTML レベルの文字列を用意して書き出すほうがリスクが少ないと思います。

とにかく、経験から言って document.write の動作は信頼性が高く、仕様から言っても PHP で条件によって違うページを作るのを、クライアントで行単位でやってるようなものです。