ShowModalDialogの代替方法 – 子画面での設定情報が親画面に反映されない場合

フォローする

ブラウザにおいて子画面を開く方法としては大きく二つの方法(window.open, window.showModalDialog)があります。このうち、ShowModalDialogを使用している場合の対応方法について事例を基に解説致します。

A社のロボット

A社の使用しているWebシステムでは、ShowModalDialogという機能を使用して子画面(サブウィンドウ)で選択した値を親画面へ反映している。

ShowModalDialogには、子画面が開いているあいだ親画面を操作できない様に制御する特性があり、親子画面間のデータに一貫性をもたせたい場合等に使用される。JavaScriptを用いた機能である。

ただし、ShowModalDialogという機能はその仕様がブラウザ毎に異なっており、OperaやChromeといったブラウザにおいては動作さえしない。(以前はIE専用の機能だった時期もあります。) – 2011.11.25時点

また、ShowModalDialogはBizRobo! Basicにおいても機能しないため、JavaScriptコードを書き換えることにより代替手段を構築する。

※JavaScriptコードの書き換えにより、どの様な不具合が発生するかは不明であり、お客さまご自身で判断・調整を行っていただく必要がありますので、ご了承ください。

以下、実際に対応した際の例(ポイント切り出し)

    1. showModalDialog命令の一括書き換え(HTMLファイル内)
      1. HTMLコード中の全ShowModalDialog命令を一括変換
      2. Configure Robot(ロボットの設定) -> Configure(設定).. -> Page Loading(ページロード中) : Change Pages(ページの変更) に以下の設定(例)を追加
        • Replace Pattern: (showModalDialog)(.*?,)(.*?)(,)
        • Replace Express: “window.open”+$2+”‘CustomWindow'”+$4
    2. showModalDialog命令の一括書き換え(外部読み込みJavaScriptファイル内)
      1. 外部JavaScriptコード中の全ShowModalDialog命令を一括変換
      2. Configure Robot (ロボットの設定)-> Configure(設定).. -> JavaScript Execution : JavaScript Changes に以下の設定(例)を追加
        • Replace Pattern: (showModalDialog)(.*?,)(.*?)(,)
        • Replace Express: “window.open”+$2+”‘CustomWindow'”+$4
    3. showModalDialog命令で呼び出されたWindow(HTML等ファイル)のwindow.close実施関数を個別に書き換え(※1)
      1. 既存命令コードの解析
      2. var f = window.opener.document.form_car; 等、親画面のドキュメントオブジェクトを直接指定するマスク変数等を定義し、処理の再定義を行う。(コーディング)
    4. DAで実行する
      DSでは操作が困難である場合でも、DAでは実装できる可能性があります。
      DAでの実装が可能かお試しください。

 

※1)参考:

/*
オリジナルコード(子画面側)
*/
function quit(f){
    var ret=new Array();
    var i=f.cartype_cd.selectedIndex
    if (i>=0){
        var cartype_cd=f.cartype_cd.options[i].value
        ret[ret.length]=cartype_cd; // 0:車種コード
        ret[ret.length]=gradename[cartype_cd];  // 1:グレード
        ret[ret.length]=capacity[cartype_cd];  // 2:定員
        ret[ret.length]=drive_cd[cartype_cd];  // 3:駆動
        ret[ret.length]=carry[cartype_cd];  // 4:積載
        ret[ret.length]=grade_cd[cartype_cd];  // 5:グレードCD
    } else {
        ret=undefined;
    }
    window.returnValue=ret;
    window.close();
    return false;
}

概要としては、var ret = ShowModalDialog(xxx); となっており、それ以下は修正後の親画面側と記載があるパートで実行している様な内容が記述されておりました。
(対応時には不要なコードなので削除)

/*
修正後コード(子画面処理も親画面処理も両方子画面に記述)
*/
// 子画面処理
var ret=new Array();
var f = document.forms[0];
var i=f.cartype_cd.selectedIndex
if (i>=0){
var cartype_cd=f.cartype_cd.options[i].value
ret[ret.length]=cartype_cd; // 0:車種コード
ret[ret.length]=gradename[cartype_cd]; // 1:グレード
ret[ret.length]=capacity[cartype_cd]; // 2:定員
ret[ret.length]=drive_cd[cartype_cd]; // 3:駆動
ret[ret.length]=carry[cartype_cd]; // 4:積載
ret[ret.length]=grade_cd[cartype_cd]; // 5:グレードCD
} else {
ret=undefined;
}

// 親画面処理
var f = window.opener.document.form_car;
if (ret.length==6){
if (ret[0]!=undefined) f.cartype_cd.value=ret[0];
if (ret[1]!=undefined) f.grade_name_full.value=ret[1];
if (ret[2]!=undefined) f.capacity.value=ret[2];
for (var i=0; i<f.drive_cd.options.length; i++){
if (f.drive_cd.options[i].value==ret[3]){
f.drive_cd.selectedIndex=i;
break;
}
}
if (ret[4]!=undefined) f.max_loading.value=ret[4];
if (ret[5]!=undefined) f.grade_cd.value=ret[5];
}
f.grade_name_full.select();

window.close();
0人中0人がこの記事が役に立ったと言っています

コメント

0件のコメント

ログインしてコメントを残してください。