[Javascript]IEで開けたshowModalDialogがChromeではダメだった件【自分用メモ】

概要

window.showmodalDialogとは、ブラウザでモーダルダイアログボックス(modal)を生成するメソッドです。

showModalDialogメソッドが他ブラウザには反応されない件で作成しました。
このメソッドは現在、他ブラウザやモバイルには全く動作できないメソッドなので、使用をお勧めしないです。

切り替えるけど、Javascriptしか使えない環境の場合は、
windows.openerで切り替えられます。

showModalDialogとは

IE 4.0で実装されたメソッドで、ブラウザでモーダルダイアログボックス(modal box)を生成するメソッドです。

ブラウザのShowModalDialogに対する互換性

①IE：最新バージョン(IE 11)も使えます。 ②Chrome：Chrome43バージョン(2015年)から廃止されました。 ③Firefox：Firefox56バージョン(2017年)から廃止されました。 ④Safari：5.1(2011年の)で実装されましたが、セキュリティ上の問題が発見され、廃止されました。 ⑤Microsoft Edge：サポートされていません。

このメソッドでIEと他ブラウザを同時対応したい時は

他ブラウザには実装されていないメソッドの為、メソッドをオーバーライドする必要があります。

example.js

//ブラウザを判別する
function checkBrowser() {
    var agent = window.navigator.userAgent.toLowerCase();
    
    // Internet Explorer
    if(userAgent.indexOf('msie') != -1 || 
       userAgent.indexOf('trident') != -1) {
        ...
    // 他ブラウザ
    } else {
        ...
    }
}

//他ブラウザでshowmodalDialogをオーバーライドする
function showmodalDialog(first, second, third) {
    //ロジックなし
    //元のメソッドはshowmodalDialog(url, argument);
}

function test() {
    if(checkBrowser()) {
        ...
    } else {
        ...
    }
}

JavascriptでshowmodalDialogの切り替え

window.openで似せて作成できる。

参照先

window.showmodalDialog