showModalDialog报错详解

一、背景介绍

showModalDialog是JavaScript中用于在当前页面打开一个模态对话框的函数，它允许用户在关闭对话框之前无法与父窗口进行交互，随着现代浏览器的发展，特别是Google Chrome等主流浏览器已经逐渐不再支持这一方法，导致在使用showModalDialog时可能会遇到报错问题。

二、错误原因分析

1、浏览器不支持：最直接的原因是浏览器不再支持showModalDialog方法，Google Chrome在其版本37及更高版本中已经移除了对该方法的支持，当在这些浏览器中尝试调用showModalDialog时，会抛出“undefined is not a function”的错误。

2、兼容性问题：由于showModalDialog是早期IE浏览器中广泛使用的方法，它并不是W3C标准的一部分，因此在跨浏览器开发时需要特别注意其兼容性问题。

3、替代方案不当：为了解决浏览器不支持的问题，开发者可能会尝试使用一些临时解决方案或替代方法，但这些替代方案可能并不完美，有时会导致新的问题或用户体验不佳。

三、解决方案与示例代码

针对showModalDialog报错的问题，可以采取以下几种解决方案：

1. 使用polyfill库

对于仍然需要使用showModalDialog功能的老旧系统，可以考虑使用polyfill库来模拟该方法，但需要注意的是，这些polyfill库可能存在兼容性问题和安全风险，使用时需要谨慎。

// 示例polyfill代码（仅供参考）
if (!window.showModalDialog) {
    window.showModalDialog = function(url, arg, features) {
        var modal = document.createElement('div');
        modal.style.position = 'fixed';
        modal.style.left = '0';
        modal.style.top = '0';
        modal.style.width = '100%';
        modal.style.height = '100%';
        modal.style.backgroundColor = 'rgba(0,0,0,0.5)';
        modal.style.display = 'flex';
        modal.style.justifyContent = 'center';
        modal.style.alignItems = 'center';
        modal.innerHTML = '<iframe src="' + url + '" style="border:none;"></iframe>';
        document.body.appendChild(modal);
        return null; // 或其他适当的返回值
    };
}

2. 使用现代替代方法

推荐使用现代浏览器支持的替代方法来实现模态对话框的效果，可以使用window.open方法并设置modal=yes参数来打开一个模态窗口，或者使用前端框架（如Bootstrap）中的模态组件。

使用window.open替代：

var iWidth = 500; 
var iHeight = 300; 
var iTop = (window.screen.availHeight 30 iHeight) / 2; 
var iLeft = (window.screen.availWidth 10 iWidth) / 2; 
var win = window.open("request.aspx", "弹出窗口", "width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft + ",toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no,alwaysRaised=yes,depended=yes");

使用Bootstrap模态组件：

<!引入Bootstrap CSS和JS >
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!模态对话框HTML结构 >
<div class="modal fade" id="myModal" tabindex="1" role="dialog" arialabelledby="myModalLabel">
  <div class="modaldialog" role="document">
    <div class="modalcontent">
      <div class="modalheader">
        <button type="button" class="close" datadismiss="modal" arialabel="Close"><span ariahidden="true">&times;</span></button>
        <h4 class="modaltitle" id="myModalLabel">模态对话框标题</h4>
      </div>
      <div class="modalbody">
        ...模态对话框内容...
      </div>
      <div class="modalfooter">
        <button type="button" class="btn btndefault" datadismiss="modal">关闭</button>
        <button type="button" class="btn btnprimary">保存更改</button>
      </div>
    </div>
  </div>
</div>
<!触发模态对话框的按钮 >
<button type="button" class="btn btnprimary" datatoggle="modal" datatarget="#myModal">打开模态对话框</button>

3. 条件判断与回退方案

在代码中添加条件判断，如果浏览器不支持showModalDialog，则使用其他备用方法，这样可以在一定程度上保证代码的兼容性和稳定性。

function preview() {
    var result;
    if (window.showModalDialog) {
        result = showModalDialog('preview.aspx?Id=' + document.getElementById('hidpreviewid').value, window, 'dialogWidth:1000px;dialogHeight:620px;center:yes;help:no;resizable:no;status:no'); 
    } else {
        // 使用备用方法，如window.open或自定义模态框
        var iWidth = 1000; 
        var iHeight = 620; 
        var iTop = (window.screen.availHeight 30 iHeight) / 2; 
        var iLeft = (window.screen.availWidth 10 iWidth) / 2; 
        var win = window.open("preview.aspx?Id=" + document.getElementById('hidpreviewid').value, "弹出窗口", "width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft + ",toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no,alwaysRaised=yes,depended=yes");
        result = win; // 根据需要处理返回值
    }
    if (result) {
        // 处理返回值逻辑
    } else {
        // 处理取消或关闭逻辑
    }
}

showModalDialog报错主要是由于现代浏览器不再支持该方法所致，为了解决这个问题，我们可以使用polyfill库来模拟该方法（但需注意兼容性和安全性），或者采用现代浏览器支持的替代方法（如window.open或Bootstrap模态组件）来实现模态对话框的效果，在代码中添加条件判断和回退方案也是提高代码兼容性和稳定性的有效手段，在选择解决方案时，需要根据项目的具体需求和目标浏览器的支持情况来权衡利弊。