デモページ 利用目的 ウェブアプリで、デバッグデータをファイルに書き込んで残しているような場合、すくに内容を確認できるように作成しました。なので、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,\"ＭＳ Ｐゴシック\",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: * データの表示">
タグ：javascript jquery
|
|
【JavaScript コンテンツの最新記事】
- IFRAME を ブラウザのサイズ変更時のイベントでコントロールして、HTML5で廃止された FRAME と同様に使うサンプル
- JavaScript : DIV 内に時間範囲のボックスを表示する処理
- jQuery/JavaScript : 存在しない可能性のある画像の代替表示
- JavaScript による、時間範囲の表現( 出退勤等 )
- JavaScript : HTML 特殊文字を書き出すコード( ツール )
- Twitter 縦書き intent
- スマホでYouTubeの埋め込みの表示サイズをJavaScriptでコントロールする
- IFRAME で埋め込んだ外部コンテンツから情報を取得する事ができる postMessage インターフェイス
- WEB フォントを使った「フェードイン、フェードアウト」
- JS : テキストエリア内の選択文字列の置き換え
- IE限定、ローカルファイル参照フィールドを使ったトリック
