JavaScript/Cross Browser

Modal Dialog †

• IEのshowModalDialog http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/showmodaldialog.asp
  • W3C非準拠
  • 第2引数で渡したObjectを、ポップアップ窓では dialogArguments で受け取ることができます。
  • ポップアップ窓で画面遷移があると、別窓が開いてしまう場合が多いので、ポップアップ窓はframeset化し、parent.dialogArguments、もしくは top.dialogArguments を利用すると好いでしょう。
• mozilla/Firefoxのwindow.open(,,'modal') http://www.mozilla.org/xpfe/xulref/windowref.html#open
  • 実際にはmodalではなく、modeless動作をする。つまり、親window側の操作もできてしまう。仕様なのか、バグなのか…(++)
  • 子windowを2枚開くと、1枚が親windowの背後に回ってしまうのも、バグじゃないかな…(++)

[変更前 (IE専用)]

function showDialog() {
    var url = "popup.html";
    var features = "dialogHeight:400px;"
                 + "dialogWidth:470px;"
                 + "edge:sunken;"
                 + "help:no;"
                 + "scroll:no;"
                 + "resizable:no;"
                 + "status:no;"
                 + "unadorned:no;";
    showModalDialog(url, window, features);
}

　　　親画面のElementから値を取得する方法

var data = parent.dialogArguments.document.getElementById('data').innerHTML;

[変更後 (IE/mozilla)]

function showDialog() {
    var url = "popup.html";
    if (window.showModalDialog) {
        var ieFeatures = "dialogHeight:400px;"
                       + "dialogWidth:470px;"
                       + "edge:sunken;"
                       + "help:no;"
                       + "scroll:no;"
                       + "resizable:no;"
                       + "status:no;"
                       + "unadorned:no;";
        showModalDialog(url, window, ieFeatures);
    } else {
        var windowName = "sampleDialog"
        var mozillaFeatures = "width=450,"
                            + "height=400,"
                            + "toolbar=no,"
                            + "location=no,"
                            + "directories=no,"
                            + "status=no,"
                            + "menubar=no,"
                            + "scrollbars=no,"
                            + "resizable=no,"
                            + "modal=yes";
        window.open(url, windowName, mozillaFeatures);
    }
    return false;
}

　　　親画面のElementから値を取得する方法

var openerWindow;
if (window.showModalDialog) {
	openerWindow = parent.dialogArguments;
} else {
	openerWindow = parent.opener;
}
var data = openerWindow.document.getElementById('data').innerHTML;

window.close() †

• mozilla/Firefoxでは、targetを指定するかwindow.open()で開いたwindowでないと、window.close()できない場合が多いようです。タブブラウザであるために、その辺の仕様が異なっているのでしょうか？
• 下記のように変更することで、FirefoxでもIEでも、確認ダイアログ無しで閉じるようになります。
  • [2009/10/03]IE8でもFirefox3.5でも確認ダイアログが表示されます。

[変更前]

function window_close() {
    window.close();
}

[変更後]

function window_close() {
    var nvua = navigator.userAgent;
    if (nvua.indexOf('MSIE') >= 0){
        if(nvua.indexOf('MSIE 5.0') == -1) {
            top.opener = '';
        }
    } else if (nvua.indexOf('Gecko') >= 0){
        top.name = 'CLOSE_WINDOW';
        wid = window.open('','CLOSE_WINDOW');
    }
    top.close();
}

• Firefoxの設定で回避することもできますが…、セキュリティ的にどうなの？
  • C:\Program Files\Mozilla Firefox\greprefs\all.js
    • 「pref("dom.allow_scripts_to_close_windows", false);」の「false」を「true」に変更する。