window.open打开的新窗口中Telerik RadDatePicker点击无响应

架构老林

2026-8-26

核心原因

脚本上下文绑定错误：window.open打开的子窗口默认保留window.opener引用，Telerik RadDatePicker初始化时会误把父窗口的客户端脚本环境（全局$telerik对象、DOM容器）作为渲染目标，点击触发的日历弹窗实际被插入到父窗口DOM中，子窗口内既看不到弹窗，点击事件也不会在当前窗口响应。
内嵌资源加载失败：如果调用window.open时加了noopener/noreferrer参数，或者自定义窗口特性时禁用了默认的referrer传递，子页面里Telerik的内嵌JS/CSS资源会因为权限校验失败返回404，控件的点击事件根本没有完成绑定，点击自然无反应。
弹窗层级错误：RadDatePicker的日历弹窗默认z-index是通过遍历当前窗口所有DOM节点计算最大值生成的，子窗口如果是精简模式（无工具栏、无地址栏）打开，计算逻辑会错误读取父窗口的z-index值，导致日历弹窗渲染在子窗口body层级下方，视觉上完全看不到，和无响应表现一致。

修复步骤

按优先级依次验证即可：

第一步：修正window.open调用逻辑，去掉会切断opener关联的参数，不要混用跨窗口隔离配置：

// 错误调用示例（会触发上述所有问题）
// window.open('DatePage.aspx', '_blank', 'noopener,noreferrer,width=700,height=500')
// 正确调用示例
window.open('DatePage.aspx', 'dateSelectWin', 'width=700,height=500,status=yes,resizable=yes')

第二步：在被打开的aspx页面后台强制配置Rad控件使用本地内嵌资源，不依赖父窗口上下文：

protected void Page_Load(object sender, EventArgs e)
{
    // 给当前页面的RadScriptManager关闭跨窗口脚本共享
    var sm = RadScriptManager.GetCurrent(this);
    sm.LoadScriptsBeforeUI = true;
    sm.EnableScriptGlobalization = true;
    // 强制DatePicker使用本地内嵌资源，显式指定弹层层级
    RadDatePicker1.EnableEmbeddedScripts = true;
    RadDatePicker1.EnableEmbeddedBaseStylesheet = true;
    RadDatePicker1.Calendar.Style["z-index"] = "999999";
}

第三步：如果上述操作后仍有问题，在子页面客户端加载完成后手动重绑控件点击事件，绕开默认的上下文判断逻辑：

// ASP.NET AJAX 客户端页面加载完成事件
function pageLoad() {
    const picker = $find("<%= RadDatePicker1.ClientID %>");
    if (!picker) return;
    // 清除原有绑定错误的点击事件
    picker.get_element().removeEventListener("click", picker._clickHandler);
    // 绑定当前窗口上下文下的弹窗触发逻辑
    picker.get_element().addEventListener("click", function(ev){
        ev.stopPropagation();
        picker.showPopup();
    });
}

补充：如果你使用的是2019 R2及更早版本的Telerik UI for ASP.NET AJAX，该问题是官方记录的已知兼容问题，只要把RadScriptManager的ScriptMode属性设置为Release即可解决大部分场景下的新窗口控件失效问题。

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