SQLの窓

2018年02月08日


jQuery の ajax でアクセス可能なデータをボタンをクリックした後 window.open で開いたウインドウの中にテキストエリアを作成して表示する方法

デモページ

利用目的

ウェブアプリで、デバッグデータをファイルに書き込んで残しているような場合、すくに内容を確認できるように作成しました。なので、dataType に text を使用していますが、一般的な json や QueryString の作成は 『jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート』を参照して下さい。

位置、サイズ指定の window.open

window.open の処理は、他でも転用できるように関数化しています。元々は SyntaxHighlighter 2.0.296 で使用されていたものを転用しています。特別な内容はありませんが、文字列の引数を作成する場合に常に前にカンマを置いておいて、最終的に出来上がった文字列の先頭のカンマを正規表現で取り除いていたのが印象的でした。

やはり、IE11 が障害でした

document.write を使用しているのは、IE11 がそれでしか動作しなかったからです。Chrome や Firefox ですと、Owner ウインドウ側の jQuery で、新しいウインドウ内の動的処理やイベントを定義できました(その場合でも、新しい window 内に jQuery を組み込む事はできます)。しかし、IE11 では動作しなかったのでこのような実装になっています。

ただ、メンテナンス性や作りやすさで言えば、document.write が勝ります。唯一、文字列のコードを作るのがやっかいですが、自作のテキスト変換サービス を使用しているので特に困った事はありません。
(プログラム用文字列作成 の JavaScript ボタン)

Access-Control-Allow-Origin: *

通常、別ドメインのデータを ajax で取得できないので、自サイトに Access-Control-Allow-Origin: * を返すデータを用意して使用しています。同じドメインで完結するアプリでしたら、特に気にする必要はありません

ポップアップブロック対策

$.get のイベントの中で window.open をしてしまうと、ポップアップブロックにひっかかるので、先に window.open をして window を開いておいてから、$.get のイベント内で動的にコンテンツを書き込んでいます。

補足

css 設定に関しては、見栄えを優先するのであれば、style 記述そのものを document.write すべきです。ですが、ここではあくまでデバッグが目的なので、メンテナンス性に基づいて、一か所に集約しています。

css に calc を指定しているのは、テキストエリアがウインドウのサイズ変更と同期するためです。但し、複雑な階層を持つ HTML 構造の場合は、height の指定は注意が必要です( html や body や 親要素が height:100% である必要があったような... )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

$(function(){

	$("#debug1").on("click", function(){

		var win = win_open("","_blank",750, 400, "location=0,resizable=1,menubar=0,scrollbars=1");

		$.get({
			url: "https://lightbox.sakura.ne.jp/toolbox/data/syain.json",
			cache: false,
			dataType : "text"
		})
		.done( function( result, textStatus, jqXHR ) {
			console.dir( jqXHR );
			console.log( textStatus );	// success
			console.log( jqXHR.status );	// 通常 200
			console.log( jqXHR.statusText );	// OK
		
			var headers = jqXHR.getAllResponseHeaders();
			console.dir( headers );
		
			// 成功した結果 : jqXHR.responseText
			console.log( result );

var str="";
str+="<"+"script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></"+"script> \n";
			win.document.write(str);

str="";
str+="<t"+ "extarea readonly style=\"width:100%;height:350px\">" + result + "</" + "textarea>\n";
str+="<"+"script> \n";
str+="$(function() { \n";
str+="	$(\"textarea\").css({\"width\":\"calc(100% - 10px)\", \"padding\":\"10px\"}); \n";
str+="	$(\"textarea\").css({\"height\":\"calc(100% - 20px)\"}); \n";
str+="	$(\"textarea\").css({\"font-size\":\"14px\"}); \n";
str+=" $(\"textarea\").css({\"font-family\": '\"ヒラギノ角ゴPro W3\",\"Hiragino Kaku Gothic Pro\",\"メイリオ\",Meiryo,\"MS Pゴシック\",Verdana,Arial,Helvetica,sans-serif'}); \n";
str+="	$(\"head\").append($(\"<title>\").text(\"前回の入力値\")); \n";
str+="	$(\"textarea\").focus(); \n";
str+="}); \n";
str+="</"+"script> ";

			win.document.write(str);
			win.document.close();
		
		})
		.fail(function( jqXHR, textStatus ) {
			console.dir( jqXHR );
			console.log( textStatus );	// error
			
		});

	});

});

function win_open(url, name, width, height, options)	{
	var x = (screen.width - width) / 2;
	var y = (screen.height - height) / 2;
	options +=
		', left=' + x + 
		', top=' + y +
		', width=' + width +
		', height=' + height
	;
	// 先頭のカンマを取り除く
	options = options.replace(/^,/, '');

	var win = window.open(url, name, options);
	win.focus();
	return win;
}
</script>
<input id="debug1" class="debug" type="button" value="Access-Control-Allow-Origin: * データの表示">





タグ:jquery javascript
posted by lightbox at 2018-02-08 15:46 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり