showModalDialogの代替方法について

Question

###前提・実現したいこと
showModalDialog()を多用しているＷＥＢシステムにおいて、
Edgeブラウザ対応を実施したいと考えております。

Edgeでは、showModalDialog()が機能しなくなるため、
代替するダイアログにて改修しようとしている中で、
現状、jQuery UI dialogでの代替をすすめています。

既存処理が別ページのHTMLをダイアログ内に表示しているため、
iFrameを利用してdialog内に表示しているのですが、
既存ページ内の任意のボタンアクション（「保存」や「キャンセル」など画面毎に異なる）結果を
呼び出し元のページに渡したいのですが、その渡し方が現状不明な状況です。

iframe外の親画面とiframe内の子画面間のデータの受け渡し方法はネット上等に情報があるのですが、
ダイアログ自体（iframe外の親画面）の呼び出し元になる「親画面」と、
「iframe内の子画面」間のデータの受け渡し方法（呼び出し元での処理方法）を
ご教示いただきたいと存じます。

また、showModalDialogの代替方法として別手法をご存知でしたら、
ご教示いただけると幸いです。

何卒よろしくお願い申し上げます。

###補足情報(言語/FW/ツール等のバージョンなど)
VB.NET
VS2005
jQuery
AJAX

Answer 1

最少構成です。aspxではなくて、java ですが、やりたいことを実現するにはサーバーげんごは問いません。

親画面に記述

jquery,jqueryuiの参照は済んでるとする
<div style="display: none">
<div id="modal">
   <div id="outer">
      <div id="inner">
          <iframe src="" id="ifr"></iframe>
      </div>
    </div>
</div>
</div>
<script>
// jquery ui dialog 初期化、済みとする。
$("modal").dialog({.....});
// プロパティは、autoOpen: false, modal: true,title: 適当

//ダイアログを開くメソッドの定義
function showDialog() {
    $("#modal").dialog("open");
    $("#ifr").attr("src", "bbb.aspx");
}
// iframe 内、bbb.aspx から呼び出されるメソッドの定義
var ifrdlgs = {
    save: function() {
        alert("save callback called");
    },
    cancel: function() {
        alert("cancel callback called");
    }
};


</script>

テスト用ダイアログ起動ボタン
<button onclick="showDialog()">kidou</button>

次に、bbb.aspx です。
少々面倒。
保存ボタン
   押下されると、サーバー処理が動作する。サーバー処理が戻すhtmlを以下のように定義する。
   <script> window.onload = function() { save(); }</script>
キャンセルボタン
   押下されると、サーバー処理が動作する。サーバー処理が戻すhtmlを以下のように定義する。
   <script> window.onload = function() { cancel(); }

共通
<script>
function save() {
    parent.ifrdlgs.save();
}
function cancel() {
    parent.ifrdlgs.cancel();
}
</script>

以上です、大分端折りましたけど、これで動作します。実験済みなので、動かない場合は具体的に示してください。開発者画面、デバッグコンソールなどを駆使すれば、30分くらいで雛形完成です。
まずは、最小構成の雛形を作って、これで動きはオッケー、なのを確認してから、実際のソースを触るようにしてください。

保存ボタン処理が返すhtml

<script> parent.ifrdlgs.save() </script>

キャンセルボタン処理が返す html
<script> parent.ifrdlgs.cancel() </script>

bbb.aspx が返す html
jquery,jqueryui , css その他ロード済みとする。iframe 内のコンテンツなので、親でロード済みですが、それらは、ifrane 内には反映されないので別途読み込みます。
<script>
$(function() {
   $("input[type=button]").button();
});

親画面の ifrdlgs.save メソッド内で、$("#modal").dialog("close"); すればオッケー。

Comments

[ipadcaron]

右上の「x」ボタン、キャンセル方法が2つあるのはいまいちですね。
消すのが 面倒でづが、dom インスペクタでノードを辿ればヒントが見つかります。
キャンセルボタンでもサーバ処理をやってる様子なので、この❎ボタンは消した方が
良いのでは？と思いました。

[syes]

早急で具体的な雛形制作や検証方針のご教示まで頂戴し、
まことにありがとうございます。
ご教示いただいた内容にて作成・検証を進めてまいりたいと存じます。

作成、既存ソースとの融合、検証に少し時間を要するかと思いますので、取り急ぎのお礼申し上げます。
また、検証中に質問させていただくこともあるかと存じますが、何卒よろしくお願い申し上げます。

まずは、お礼のみにて失礼いたします。

[syes]

ご連絡が遅くなり恐縮ですが、
おかげさまでご教示いただいた内容を雛形として、showModalDialogのjQueryのダイアログにて代替処理を作成することができました。
まことにありがとうございました。

Answer 2

showModalDialog の2番目のパラメータがオブジェクトです。
window を渡せば、親の資源すべてにアクセスできます。
代替は、jquery-ui のモーダルパネルが候補ですが、showModalDialog
の書式を活かす方向で実装するとなると、

window.shoModalDialog = function(url, param, options) {
    // options を ; で分割、要素それぞれ、= で分割、各パラメータを、jquery-ui のダイアログ初期化に利用して、モーダルパネルを表示する、ような仕掛けになると思われます。
url はそれぞれ固有の画面の jsp,php を指し示していると思うので、url の部分文字列から、どのような体裁のダイアログを表示するか判断できるかもしれません。
iframe 利用の場合、iframe内から、top や parent をターゲットに画面更新させる処理がある場合、モーダルパネルでは、全画面が対象になってしまいます。面倒ですけど、ifraneの中に表示する画面の html を修正するか、同じドメインなら、onload/onreadystatechange などで iframe 内コンテンツのロードイベントをハンドルできるので、そこで親画面を更新するようなボタンイベントやリンク、フォームなどは設定変更してあげる必要がありますね。

モーダルダイアログ内で、iframe ということは、post や部分書き換えが絡む話だと思いますが、今までは、<base target="self"> とかやって、モーダルダイアログ内でポスト処理をやってたと思いますが、モーダルダイアログの垣根が取っ払われてしまうので、、、、確証無いですが、iframe をネストさせれば、最も内側の iframe の top は、最も外側の iframeになるかもしれません。

Comments

[syes]

早速のご回答まことにありがとうございます。
各種方針や手法のご教示参考になりました。

その中で１点確認させていただきたいのですが、
「window 」をパラメータとしてjquery-ui dialogに渡す具体的なロジック例をご教示いただけないでしょうか？
dialogに渡せるパラメータ（オプション）は以下のＵＲＬ内容と認識しているのですが、
その他の渡したいパラメータ（今回はwindow）をどのように渡してdialog内で活用すればよいかご教示いただけると幸いです。
http://jqui.my-learn.net/dialog/options.php

素人質問で恐縮ですが、何卒よろしくお願い申し上げます。

[ipadcaron]

jquery-ui は、別プロセスでも、別スレッドでもありませんよ。
別に渡す必要無いと思うけど、iframe のことを懸念されてるなら、
もっと情報を開示してください。現在の showmodaldialogの代替と
して、jquery-ui を考えてるのは分かるんですが、知りたいのは
改修前のプログラムの構造です。
#なんか iPadで使い難くなった気がする、ios9 にアップデートしてからだ。特にスクロールとコピペがイライラする、、、、

コピペできなくなったぞ、、、、なんでだ？

[syes]

早速のご返信を頂いたにも関わらず、気づかず返答遅く申し訳ありません。
（コメントへのご返答は、メール通知されないんですね、知らず失礼いたしました）

そして、ご丁寧にご指示いただいた改修前のプログラム構成概要を以下に記載させていただきます。

●showModalDialogを利用した既存の親画面・子画面の抜粋サンプルロジック
■AAA.aspx（呼び出し元親画面）
<script language="javascript" type="text/javascript">
<!--
//ボタン等任意のアクション時にshowModalDialogで子画面表示し、戻り値に応じて親画面への反映処理を実施
function xxOpenDialog(){
var rtn = showModalDialog("BBB.aspx","BBB","dialogWidth=650px;dialogHeight=500px;scrollbars=yes;center=yes;help=no;status=no");
if ( rtn == "OK" ) {
document.getElementById("XXXX").value = "1";
dspHogeHoge(0);
}
}
// -->
</script>

■BBB.aspx（子画面）
//画面上でデータ検索して選択や詳細情報を編集して「保存」or「キャンセル」のボタンアクションが主
　　<asp:Button ID="btnOK" runat="server" CssClass="btnOk" Text="保存" OnClick="btnOK_Click"/>
　　<asp:Button ID="btnCancel" runat="server" CssClass="btnOk" Text="戻る" OnClick="btnCancel_Click"/>

　　※各ボタンアクション処理はロジック（aspx.vb）側で処理

■BBB.aspx.vb（子画面ロジック）

　　//アクションに応じた値の設定および自（子）画面のクローズ処理をscriptの出力ロジックにて実施（「保存」の例）
　　Protected Sub btnOK_Click(ByVal sender As Object, ByVal e As System.EventArgs)
'内部的な保存処理等
Call lcSave()

'保存実施
Dim sbScript As New System.Text.StringBuilder
With sbScript
.Append("<script language=javascript>")
.Append("window.returnValue = """ & OK & """;")
.Append("self.window.opener=window;")
.Append("self.window.close();")
.Append("</script>")
End With

Me.Page.ClientScript.RegisterStartupScript(Me.Page.GetType, "CloseDialog", sbScript.ToString)

End Sub

**************************************************************

そして、あわせて現状想定しているjQuery UI dialogの改修想定案の構成を以下に記載させていただきます。

●jQuery UIのdialogを利用した改修想定の親画面・子画面の抜粋サンプルロジック
■AAA.aspx（呼び出し元親画面）
<script language="javascript" type="text/javascript">
<!--
//jQueryのdialogを任意のボタンに関連付け（iframeDialogというプラグイン利用）
$(function(){
var rtn = $('#btn1').iframeDialog({
id: 'BBB',
url: 'BBB.aspx',
scrolling: 'auto',
modal: true,
resizable: false,
width: 650,
height: 500
});
});
// -->
</script>

■iframeでdialog表示用の「iframeDialog」プラグイン
(function ($) {
$.fn.iframeDialog = function (options) {
this.each(function () {
$(this).unbind('click').click(function (e) {
e.preventDefault();
var $div = $("<div/>");
$div.attr("id", "iframeDialog_id");
var $iframe = $('<iframe class="iframeDialog" name="iframeDialog{rnd}" frameborder="0" width="100%" height="100%" marginwidth="0" hspace="0" vspace="0" scrolling="no" allowtransparency="true" />');
if (!options.title) {
options.title = $(this).attr('title');
}
if (!options.url) {
url = $(this).attr('href');
} else {
url = options.url;
}
if (!options.close) {
options.close = function () {
$(this).remove();
};
}
if (options.id) {
$iframe.attr("id", options.id);
}
if (options.scrolling) {
$iframe.attr("scrolling", options.scrolling);
}
$iframe.attr("src", url);
$div.append($iframe).dialog(options);
});
});
return this;
};
})(jQuery);

■BBB.aspx.vb（子画面ロジック）
　　//アクションに応じた値の設定および自（子）画面のクローズ処理をscriptの出力ロジックにて実施（「保存」の例）
　　// ※想定内容および不明点を以下ロジック内に記載
　　Protected Sub btnOK_Click(ByVal sender As Object, ByVal e As System.EventArgs)
'内部的な保存処理等
Call lcSave()

'保存実施
Dim sbScript As New System.Text.StringBuilder
With sbScript
.Append("<script language=javascript>")
.Append("window.returnValue = """ & OK & """;")
.Append("self.window.opener=window;")
.Append("window.parent.jQuery('#iframeDialog_id').dialog('close').remove();")

// ここで呼び出し元の親画面に反映処理用メソッド等を新たに用意して、
// それを呼び出す処理をscriptへ記載・出力するのが妥当かと考えましたが、
// ブラウザのデバックなどでも呼び出し元の親画面情報が「window.parent」等に無く、取得方法が不明であることと、
// そもそもこの想定が妥当か否か等が不明な状況です。

.Append("</script>")
End With

Me.Page.ClientScript.RegisterStartupScript(Me.Page.GetType, "CloseDialog", sbScript.ToString)

End Sub

**************************************************************

上記内容をご覧いただき、ご指摘、ご教示などいただけると幸いです。
何卒よろしくお願い申し上げます。

[ipadcaron]

新雨実現方法を書いたので削除

[ipadcaron]

新しい実現方法を書いたので削除