デモページ 利用目的 ウェブアプリで、デバッグデータをファイルに書き込んで残しているような場合、すくに内容を確認できるように作成しました。なので、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
※ 下の灰色の部分は全て IFRAME で、ブラウザのサイズ変更と同期します
結論から言いますと、IFRAME と FRAME の大きな違いは、上の画像のように jQuery の DatePicker のカレンダーが、IFRAME の上に展開されるというところです。FRAME の場合ですと、ブラウザが用意するコンボボックス等は FRAME の境界を越えて表示されますが、HTML で作成されるコンテンツは FRAME の境界の下に潜り込んでしまいます。
しかし、FRAME の便利な点は、WEB ページのデータ送信の結果を一方通行で別の FRAME に表示できるので、WEB アプリが元のページの内容を書き換える必要が無いところです。当然その特性は IFRAME も持っていますが、IFRAME は固定のウインドウとして表示されるものなので、ブラウザの大きさに同期して表示部分いっぱいいっぱいで利用するには( FRAME のように )、JavaScript でリアルタイムでサイズを変更する必要があります。
にもかかわらず、実際実装しようとすると、ページの縦のサイズを取得しようとすると、IFRAME が表示されているとうまく取得できない仕様になっていて、たいていは失敗する事になります。これを避けるには、IFRAME のサイズ変更は、IFRAME を非表示にして行う事で解決できました。
サーバーサイドはそちらで対応すれば良いですが、もともと JavaScript で日付文字列の操作が面倒なので、String オブジェクトと Date オブジェクトに メソッドを追加して使っています。
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
