计一次window.showModalDialog is not a function的解决办法

网站后台的上传功能突然点击没反应了，点不动，按F12查看控制台，有报错：window.showModalDialog is not a function，

错误提示 “window.showModalDialog is not a function” 表示在浏览器中执行了不存在的方法。

原因可能是 showModalDialog 方法已经被废弃，浏览器不再支持该方法。为了避免这个问题，应该使用其他替代方案，比如使用 window.open 方法来打开一个新窗口。以下就是使用window.open方法来重写window.showModalDialog。

原函数如下：

function openWinDiag(V1,V2,str,ID,w,h){
    switch (V1){
        case 0:var U=str+C3;break;
        case 1:var U="/"+str+C3;break;
        case 3:var U="upload"+C3;break;
    }
    switch (V2){
        case 0:var S="no";break;
        case 1:var S="auto";break;}
    var sRet = window.showModalDialog(U+"?ID="+ID,window,'dialogHeight:'+h+'px;dialogWidth:'+w+'px;center:1;resizable:no;location:no;status:no;scroll:'+S+';help:no');
    if(sRet=="refresh"){window.location.reload();}
};

showModalDialog 已经被废弃，现在推荐使用以下几种方式来代替window.showModalDialog:

1. 使用 window.open() 方法打开一个模态对话框。可以通过设置新窗口的属性（如宽度、高度和位置等）将其模拟为模态对话框。
2. 使用 HTML5 提供的新特性，如 <dialog> 元素和 showModal() 方法来创建模态对话框。这些新特性通常需要一些 JavaScript 编码才能实现模态对话框的功能。
3. 使用第三方库或框架，例如 jQuery UI Dialog 或 Bootstrap Modal 等，这些库提供了易于使用的函数和 API 来创建模态对话框。

下面是使用 HTML5提供的新特性，dialog 元素代替 window.showModalDialog() 的示例代码：

function openWinDiag(V1,V2,str,ID,w,h){
    switch (V1){
        case 0:var U=str+C3;break;
        case 1:var U="/"+str+C3;break;
        case 3:var U="upload"+C3;break;
    }
    switch (V2){
        case 0:var S="no";break;
        case 1:var S="auto";break;
    }
    var dialog = document.createElement('dialog');
    if (!dialog.isConnected) {
        document.body.appendChild(dialog);
    }
    dialog.setAttribute('style', 'width:'+w+'px;height:'+h+'px;');
    dialog.setAttribute('style', 'width:300px;height:300px;');
    dialog.innerHTML = '<iframe src="'+U+'?ID='+ID+'" style="border:none;width:100%;height:100%;"></iframe>';
    if (! dialog.showModal) {
        dialogPolyfill.registerDialog(dialog);
    }
    dialog.showModal();
    dialog.querySelector('iframe').focus();
    //用于接收子页面消息并执行操作
    window.addEventListener("message", function(event) {
        var data = event.data;
        var returnValue = event.data;
        // 在此处执行对返回值的处理
        console.log(returnValue);
        if (data === 'closeDialog' || returnValue.value3 === 'closeDialog') {
            // var dialogEl = document.querySelector('iframe');
            // dialogEl.close();
            dialog.close();
            console.log('关闭窗口')
    window.document.all.att_Filename.value=returnValue.value1;
    window.document.all.tumatt_Filename.src=returnValue.value2;
        }
        if (event.data === 'closeIframe') {
            dialog.close();
        }
    });
    dialog.addEventListener('close', function() {
        dialog.close();
        if(dialog.returnValue == 'refresh') {
            window.location.reload();
        }
    })
};

在上述代码中，我们使用 dialog 方法打开一个新窗口，并设置它的属性来模拟一个模态对话框。定义一个事件监听器，用于接收子页面发送过来的消息，并处理返回值。如果接收到的数据为’closeDialog’或returnValue.value3为’closeDialog’，则关闭弹窗，同时将传递的值分别赋给window.document.all.att_Filename.value和window.document.all.tumatt_Filename.src，如果接收到的数据为’closeIframe’，则关闭iframe元素。

以下是文件上传示例：

<?php
if($_REQUEST["ID"]=="up"){
    up($_REQUEST["formid"]);
}

function up($formid){
    $uploaddir = '../uploadfile/';
    $oldName = $_FILES["userfile"]["name"];
    $fileExtensionName = pathinfo($_FILES['userfile']['name'],PATHINFO_EXTENSION);
    $mimeType = _FILES["userfile"]["type"];
    $allowType = array("image/jpeg","image/png","image/gif","text/plain","application/msword");
    if(!inarray($mimeType,$allowType)){
        echo "<sapn style='color: red'>非法文件类型!</sapn>\n";
        return;
    }
    if(strtolower($fileExtensionName) === 'php'){
        echo "<sapn style='color: red'>PHP文件禁止上传!</sapn>\n";
        return;
    }
    $newName = md5(microtime(true)).".".fileExtensionName;
    $uploadfile = $uploaddir.$newName;

    if(move_uploaded_file($_FILES['userfile']['tmp_name'],$uploadfile)){
        echo "<script>
        var returnValue = {
            value1: '{$newName}',
            value2: '{$uploaddir}{$newName}',
            value3: 'closeDialog'
        };
        // 发送消息以关闭对话框
        window.parent.postMessage(returnValue, '*');
        //window.close();
    </script>";
        //echo "<script language='javascript'>window.dialogArguments.document.all.$formid.value='$newName';</script>";
        //echo "<script language='javascript'>window.dialogArguments.document.all.tum$formid.src='$uploaddir$newName';</script>";
        //echo "<script language='javascript'>window.close();</script>" ;
    }else{
        echo "<sapn style='color: red'>上传失败!</sapn>\n";
    }
}
?>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
    <!--
    body {
        background-color: #D8D8D8;
        padding:10px 0 0 20px;
        FONT-SIZE: 12px;
    }
    .b {
        height:20px;
        FONT-SIZE: 12px;
        margin-left:10px
    }
    .bb {
        height:20px;
        FONT-SIZE: 12px;
    }
    -->
</style>

<base target=_self>
<title>文件上傳</title>

<form action="upload.php?ID=up" method="post" enctype="multipart/form-data" name="form1" id="form1">
    <input type="file" name="userfile" id="userfile" /><input type="submit" name="Submit" value="上傳" style="float: right" class="b"/><p style="margin-top:5px"><font color=red>選擇需要上傳的文件</font></p>
    <input type="hidden" name="ofn" value="<?php echo $_GET['ofn']?>">
    <input type="hidden" name="formid" value="<?php echo $_GET['formid']?>">
</form>
<button onclick="closeIframe()" style="float: right">關閉窗口</button>
<script>
    function closeIframe() {
        window.parent.postMessage('closeIframe', '*');
    }
</script>