dialog出现Uncaught RangeError: Maximum call stack size exceeded错误

最新推荐文章于 2023-07-25 17:08:50 发布

Pcject

最新推荐文章于 2023-07-25 17:08:50 发布

阅读量4k

点赞数 2

CC 4.0 BY-SA版权

文章标签： easyui框架 jquery dialog

本文链接：https://blog.youkuaiyun.com/J_Object/article/details/78950868

本文探讨了一个关于使用jQuery EasyUI对话框插件时遇到的堆栈溢出错误。问题表现为部分用户的浏览器在打开对话框时崩溃，并且按钮变得不可用。通过限制对话框尺寸以适应浏览器视口大小及加入异常处理机制，成功解决了这一问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先贴错误代码：

Uncaught RangeError: Maximum call stack size exceeded
    at String.replace (<anonymous>)
    at Function.camelCase (jquery-1.8.0.min.js:2)
    at Function.style (jquery-1.8.0.min.js:2)
    at jquery-1.8.0.min.js:2
    at Function.access (jquery-1.8.0.min.js:2)
    at Function.access (jquery-1.8.0.min.js:2)
    at init.css (jquery-1.8.0.min.js:2)
    at _1a9 (jquery.easyui.min.js:2125)
    at HTMLDivElement.<anonymous> (jquery.easyui.min.js:2522)
    at Function.each (jquery-1.8.0.min.js:2)

场景

一个页面需要打开子窗口的时候，发现了个很神器的事情，有些人的电脑可以打开这个网页，有些人的电脑不能打开，哪怕是同一台电脑，也可能出现正常打开可以打开，按F12开了调试串口就无法打开了，无法打开的时候报了这个错，同时该按钮卡死，再次点击再无反应，除非刷新页面。

出现问题的代码

$(parent.window.document.body).append(win);
var obj = parent.window.$('#' + dlgname);
obj.dialog({
    href : url,
    title : title,
    width : w,
    bgiframe: true,
    height : h,
    closed : false,
    cache : false,
    resizable : true,
    modal : true,
    onClose : function() {
        obj.dialog('destroy').remove();
    }
});

这部分代码是共用的代码，所以存在问题导致多个页面同时存在该问题

原因

1、报堆栈溢出的原因：

子窗口的大小超出了当前浏览器窗口的可使用范围，所以才会出现不同人电脑出现不同的情况，因为分辨率不同，我的电脑是1080无放大的，其他人多为公司分配的768分辨率的，开了调试窗口导致可使用范围减小也是同理。

对应的解决办法就是

//将宽高与当前浏览器的可视范围比较，取较小值
width : w>document.body.clientWidth?document.body.clientWidth:w,
height : h>document.body.clientHeight?document.body.clientHeight:h,

2、出错后该按钮卡死无法再次打开的原因

说白了就是没做异常处理，子窗口的代码已经apeend到了当前页面上，只是dialog报了错

解决办法：

//相关代码try catch起来，执行dialog报错即将apeend的内容给清除掉
$(parent.window.document.body).append(win);
var obj = parent.window.$('#' + dlgname);
try{
    obj.dialog({
        href : url,
        title : title,
        width : w>document.body.clientWidth?document.body.clientWidth:w,
        bgiframe: true,
        height : h>document.body.clientHeight?document.body.clientHeight:h,
        closed : false,
        cache : false,
        resizable : true,
        modal : true,
        onClose : function() {
            obj.dialog('destroy').remove();
        }
    });
}catch(error){
    alert("清调整分辨率或者浏览器窗口大小" )
    obj.dialog('destroy').remove();
}