能否为JavaScript的alert()添加关闭按钮，解决iOS webview弹窗卡住问题

这个问题的核心成因是iOS端WKWebView没有正确实现JS弹窗的代理方法，原生弹出的系统弹窗缺少关闭按钮，且未回调JS的执行结束标识，导致弹窗卡死、无法关闭。不需要给原生alert函数额外加关闭按钮，按以下两类方案修复即可：

原生端修复方案（推荐，从根源解决问题） #

• 正确实现WKUIDelegate的runJavaScriptAlertPanelWithMessage代理方法，给弹窗添加关闭按钮，并在按钮点击时执行回调通知JS执行完成。Swift示例代码如下：

func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
    let alertVC = UIAlertController(title: nil, message: message, preferredStyle: .alert)
    // 添加关闭按钮，点击后必须调用completionHandler，否则JS线程会持续阻塞
    alertVC.addAction(UIAlertAction(title: "关闭", style: .default, handler: { _ in
        completionHandler()
    }))
    present(alertVC, animated: true)
}

• Objective-C实现逻辑完全一致，同样需要显式添加按钮并执行传入的completion回调。

前端兼容方案（适用于无法修改原生代码的场景） #

直接重写全局的alert方法，用DOM实现自定义弹窗，完全绕过原生WebView的弹窗逻辑，代码示例如下：

// 重写window.alert，替换原生弹窗
window.alert = function(content) {
    // 生成遮罩层
    const mask = document.createElement('div');
    mask.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:99999';
    // 生成弹窗容器
    const dialog = document.createElement('div');
    dialog.style.cssText = 'background:#fff;border-radius:8px;padding:24px;min-width:280px;';
    // 填充内容和关闭按钮
    dialog.innerHTML = `
        <p style="margin:0 0 20px 0;font-size:14px;color:#333">${content}</p>
        <button style="padding:8px 16px;background:#007aff;color:#fff;border:none;border-radius:4px;cursor:pointer;">关闭</button>
    `;
    // 绑定关闭事件
    dialog.querySelector('button').addEventListener('click', () => {
        document.body.removeChild(mask);
    });
    mask.appendChild(dialog);
    document.body.appendChild(mask);
}

重写完成后，所有alert("xxx")的调用都会自动触发自定义弹窗，可以完全控制交互逻辑，不会出现无法关闭的问题。

注意：如果业务有跨端需求，建议统一使用前端自定义弹窗组件，避免各端WebView原生弹窗的实现差异带来的兼容性问题。

内容的提问来源于stack exchange，提问作者SetAndGet