正文 

当前位置： 首页 > 源码 >

JQuery '噢，快！在 Chrome 中但不会使任何其他浏览器崩溃

     2023-02-16     113

关键词：

【中文标题】JQuery \'噢，快！在 Chrome 中但不会使任何其他浏览器崩溃【英文标题】：JQuery 'Aw Snap!' in Chrome but not crashing any other browserJQuery '噢，快！在 Chrome 中但不会使任何其他浏览器崩溃 【发布时间】：2011-11-17 16:45:45 【问题描述】：

我在管理管理页面时遇到了一些困难，我经常在 Chrome 中看到“Aw Snap”。

我有一个“商品”管理页面，您可以在其中向网站添加新产品。 如果用户选择“T 恤”作为产品类型，则会出现一些新选项。即尺寸和颜色。

大小只是一个多选框，但单击“添加颜色”会初始化一个阴影框。

阴影框允许用户输入颜色名称并选择十六进制颜色（通过Wheel Colour Picker 插件）并上传代表图像（通过Uploadify）。在提交时，Uploadify 脚本会上传文件，然后在完成后，脚本会通过 JQuery AJAX 将其他颜色信息发送到数据库。

提交按钮脚本：

function add_colour_submit()
    $('#admin-add-colour-response').text('Processing...').fadeIn(1000);
    $('#admin-add-colour-image').uploadifySettings('scriptData', 
        'title': $('#admin-add-colour-title').val(),
        'hex': $('#admin-add-colour-hex').val(),
        'gender': $('#admin-add-colour-gender').val()
    );
    $('#admin-add-colour-image').uploadifyUpload();

上传“完成时”：

'onComplete': function (event, ID, fileObj, response, data) 
    $("#admin-add-colour-response").fadeTo(200,0.1,function()
        $("#admin-add-colour-response").html('Complete.').fadeTo(900,1,
            function()
            
                var responseArray = response.split(',');
                var id = responseArray[0];
                var title = responseArray[1];
                var hex = responseArray[2];
                var gender = responseArray[3];
                parent.get_colour(id, title, hex, gender);
            );
        );

AJAX 操作完成后，会显示一条反馈消息“完成”。 这段时间之后，JQuery 代码以编程方式关闭阴影框，并在父页面上创建一个小 div 来表示提交的颜色。

使用此方法可以添加多个。

获取颜色函数：

function get_colour(id, title, hex, gender)
    $('#sb-nav-close').click(); //trigger shadowbox close
    //create colour object div
    var colourObject = '<div class="colourObject"><div class="colourPreview" style="background:#'+hex+'"></div><div class="colourInfo"> '+title+' / '+gender+'</div><div class="colourRemove"><a href="#" onclick="remove_colour('+id+')">x</a></div</div>'
    var currentList = $('#colour-list').html();
    $('#colour-list').html(currentList+colourObject);

    //re-initialise any shadowbox links in the page
    Shadowbox.init(
        skipSetup: false
    );
    Shadowbox.setup();

我的问题是，在上述功能期间，也许在关闭影子盒期间，我在 Chrome 中得到了一个 Aw Snap。上面颜色 div 的屏幕截图是使用 Safari 制作的，我从来没有遇到过任何问题。

我有几个插件（shadowbox、***颜色选择器、uploadify、jquery），那么这些插件的冲突会导致错误吗？

更新。 我刚刚设法在更多浏览器中对此进行了测试，这绝对是仅与 Chrome 相关的问题。

【问题讨论】：

尝试打开控制台，如果您发现任何错误，请告诉我们。如果没有错误，请尝试隔离导致页面超载的部分并将该代码报告给 Chrome CRBug 我相信获取颜色函数（问题中的最后一段代码）是重载 Chrome 并创建颜色对象的东西。 【参考方案1】：

我会通过该 get_colour 函数并开始一次删除一个东西，从重新初始化您的 Shadowbox 开始。初始化/设置两次可能会破坏它。

如果注释掉 .init 和 .setup 调用确实修复了崩溃，那么我将开始研究如何在重新初始化之前完全删除（或取消初始化）您的 Shadowbox。

如果它没有修复它，我会继续向上移动该函数，删除代码直到你可以阻止它崩溃。

另外，关闭 shadowbox 可能会告诉它在幕后做一堆工作（删除 dom 元素，以及 Shadowbox 在其 JS 核心深处所做的任何其他事情）。也许问题在于您将其关闭，然后告诉它过早初始化，而 Chrome 仍保留对（尚未关闭的）灯箱的引用。

要测试/修复此问题，请尝试将 init 和 setup 调用完全移至另一个函数，并且仅当您手动单击页面上的测试链接时才调用该函数。确保您的 get_colour 函数首先运行并成功完成。如果它有效，那么您知道这就是问题所在，并且您需要等待更长的时间才能调用.init 和.setup。也许您可以改为在 Shadowbox 的 onClose 事件期间调用这两个方法......或者稍后在您的代码中的其他地方。

提问者关于解决方案实施的更新：

以防万一其他人遇到类似的麻烦。最终的解决方案是因为我正在使用 .html() 调用来操作 DOM，而 .click() 调用似乎仍在进行中。

解决方案要求我将 .click() 放在之前的 .html() 调用之后。

//create colour object div
var colourObject = '<div class="colourObject"><div class="colourPreview" style="background:#'+hex+'"></div><div class="colourInfo"> '+title+' / '+gender+'</div><div class="colourRemove"><a href="#" onclick="remove_colour('+id+')">x</a></div</div>'
var currentList = $('#colour-list').html();
$('#colour-list').html(currentList+colourObject);

$('#sb-nav-close').click(); //trigger shadowbox close

它现在可以在所有浏览器中完美运行。

我想这里的教训是任何时候都不要处理太多，我从外观上使浏览器超载。

【讨论】：

【参考方案2】：

查看描述“Aw Snap！”的页面页面：http://www.google.com/support/chrome/bin/answer.py?answer=95669

这通常是由于计算机内存不足造成的。可能是您的应用程序使用了太多资源。尝试调低图像和 javascript，只使用你需要的量。

【讨论】：

感谢您的帮助，但最终还是 @Chazbot 的解决方案奏效了【参考方案3】：

以下内容将始终在 Chrome 上生成“Aw Snap”消息，但在 Firefox 和 Safari 上运行良好：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="haemosphere">
  <head>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>    
    <script type="text/javascript">

    $(function() 

    $("#user-action-div").on("click", function(ev, ui) 
            $(this).empty().append("<select id='user-action-sel'>");
        $('select', this).append("<option value='nop' selected='selected'>Rugby</option>");
        $('select', this).append("<option value='profile'>My Profile</option>");
        $('select', this).append("<option value='logout'>Log Out</option>");
        $("select", this).trigger("create");
    );

    );

    </script>
  </head>
  <body>
    <span id="user-action-div">Click Here</span>
  </body>
</html>

【讨论】：

弄清楚发生了什么。在 chrome 中（仅）“click”事件处理程序仍然处于活动状态，因此单击新创建的 SELECT 框也会触发其父级的“click”处理程序，然后尝试清空（）同一个 SELECT 的父级（孩子）。放 $(this).off("click");在调用 empty() 解决问题之前。【参考方案4】：

如果是 Chrome 相关问题，您应该尝试将其提交给 Chromium Bug Tracker（参见 Where can I find and submit bug reports on Google's Chrome browser?），或者至少看看是否存在类似问题。

也许为他们提供出现此问题的最小页面（例如使用jsfiddler 创建一个虚拟页面）

【讨论】：

我怀疑这是一个错误，这几乎肯定是我在我的代码中正在做的事情导致浏览器崩溃。 Chrome 与许多其他浏览器的工作方式不同，我认为这是我的代码，而不是浏览器本身。

在 jquery 中设置 css 时，Chrome 中的背景颜色不会改变

】在jquery中设置css时，Chrome中的背景颜色不会改变【英文标题】：BackgroundcolornotchanginginChromewhensettingcssinjquery【发布时间】：2018-09-2121:40:57【问题描述】：在我的JQuery/JS中，我正在检查并更改按钮的背景颜色和边框颜色，它在IE... 查看详情

jquery：将所有元素包装在一个div中但不包含在另一个div中(代码片段)

我有一个关于.wrapAll()的问题。到目前为止我得到了这段代码： <divid="firstDivContainer"> <divclass="element">stuff</div> <divclass="accordion">stuff</div> <divclass="accord 查看详情

图像显示在 iPhone 模拟器中但不是 ipad - Swift

】图像显示在iPhone模拟器中但不是ipad-Swift【英文标题】：ImageshowsupiniPhonesimulatorbutnotipad-Swift【发布时间】：2015-07-0123:45:33【问题描述】：当我从相机胶卷中选择图像并在我的视图中显示它时，它不会出现在Ipad模拟器上。它在iPho... 查看详情

railscarrierwave - 图像网址保存在数据库中但文件未保存

...有一个表单，我使用cropit.js裁剪图像。按钮是onclick调用jquery函数，该函数获取cropit（裁剪图像）的结果并使用ajax将其推送到控制器。在这里它似乎可以工作，但是当我这 查看详情

jQuery 不相交

】jQuery不相交【英文标题】：jQueryDisjoint【发布时间】：2010-11-0202:13:04【问题描述】：我有两个数组：vara=newArray(1,2,3,4);varb=newArray(5,3,2,6);我想找出哪些元素在数组a中但不在数组b中，哪些元素在b中但不在a中？我知道一种方法是... 查看详情

jQuery UI 对话框中的 IFrame 有时不会在 Chrome 中加载内容，直到对话框被移动或调整大小（但适用于 FF 和 Edge）

】jQueryUI对话框中的IFrame有时不会在Chrome中加载内容，直到对话框被移动或调整大小（但适用于FF和Edge）【英文标题】：IFrameinjQueryUIdialogsometimesdoesn\'tloadcontentinChromeuntildialogismovedorresized(butworksinFFandEdge)【发布时间】：2021-04-2816:15... 查看详情

jQuery克隆后Chrome错误地使表单输入无效

】jQuery克隆后Chrome错误地使表单输入无效【英文标题】：ChromeincorrectlyinvalidatingforminputafterjQueryclone【发布时间】：2014-01-0509:29:18【问题描述】：我在Chrome中克隆a时遇到问题。请注意，这似乎不会在Firefox中发生。当我动态创建inpu... 查看详情

<object> 标签在 Chrome 中更改其数据属性时不会刷新 [重复]

...上有一个&lt;object&gt;标记，其data属性在JS（特别是jQuery）中以编程方式 查看详情

为啥 Chrome 的隐身模式检索资源比普通模式快？

】为啥Chrome的隐身模式检索资源比普通模式快？【英文标题】：WhydoesChrome\'sIncognitomoderetrieveresourcesfasterthanthenormalmode?为什么Chrome的隐身模式检索资源比普通模式快？【发布时间】：2017-12-1418:34:20【问题描述】：我在多台机器（... 查看详情

NSManagedObject 保存在核心数据中但属性错误

】NSManagedObject保存在核心数据中但属性错误【英文标题】：NSManagedObjectsavedincoredatabutwiththewrongattributes【发布时间】：2015-02-1311:57:22【问题描述】：我的NSManagedObject子类和核心数据有点问题。所以，我创建了一个NSManagedObject的子... 查看详情

“慢”、“正常”和“快”在 jQuery 中分别代表多少毫秒？

】“慢”、“正常”和“快”在jQuery中分别代表多少毫秒？【英文标题】：Howmanymillisecondsdo"slow","normal",and"fast"representinjQuery?【发布时间】：2011-04-1321:26:53【问题描述】：jQuery允许在动画中使用字符串值“sl... 查看详情

图像未出现在 hostgator (cPanel) 中但出现在 localhost

】图像未出现在hostgator(cPanel)中但出现在localhost【英文标题】：Imagesnotappearinginhostgator(cPanel)butappearinginlocalhost【发布时间】：2021-07-2700:47:39【问题描述】：由于某种原因，当我在hostgator索引文件（public_html下）中引用CSS文件或图... 查看详情

在元素之间移动鼠标过快时出现jQuery悬停问题

】在元素之间移动鼠标过快时出现jQuery悬停问题【英文标题】：jQueryhoverproblemwhenmovingmousetooquicklybetweenelements【发布时间】：2011-11-1718:18:09【问题描述】：我在一个页面上重复了以下html：<divclass="outer">outer<divclass="inner">in... 查看详情

JQuery UI 日期选择器在 Chrome 中不起作用

】JQueryUI日期选择器在Chrome中不起作用【英文标题】：JQueryUIdatepickernotworkinginChrome【发布时间】：2015-12-3104:47:42【问题描述】：我在我的asp.netMVC应用程序中使用JqueryUI日期选择器。在IE中一切正常，但在Chrome中，默认日期选择器... 查看详情

在移动 Chrome 上隐藏键盘不会改变窗口高度

】在移动Chrome上隐藏键盘不会改变窗口高度【英文标题】：HidingkeyboardonmobileChromedoesn\'tchangewindowheight【发布时间】：2014-04-0813:32:04【问题描述】：当您在移动Chrome（在我的情况下为iOS7.0.3和Chrome33.0.1750.21）上打开键盘时，窗口的... 查看详情

实例化对象出现在层次结构中但不在场景中

】实例化对象出现在层次结构中但不在场景中【英文标题】：Instantiatedobjectappearsinhierarchybutnotonscene【发布时间】：2021-06-1020:29:42【问题描述】：我在Unity中实例化游戏对象时遇到问题。所以游戏是2D的，这段代码是为了我的对撞... 查看详情

如何解决“应用仍在审核中但需要额外时间”？

】如何解决“应用仍在审核中但需要额外时间”？【英文标题】：Howtosolve"appisstillinreviewbutrequiringadditionaltime"?【发布时间】：2016-09-2107:20:46【问题描述】：我向AppStore提交了一个应用，但它总是被拒绝。如何解决这个问题... 查看详情

如何隐藏地理标签以显示在卡片中但仍可用于 googlebot

】如何隐藏地理标签以显示在卡片中但仍可用于googlebot【英文标题】：HowtohideGeotagtoappearinvcardbutstillmakingavailableitfotgooglebot【发布时间】：2014-02-2804:28:29【问题描述】：<divclass="vcard"itemscopeitemtype="http://schema.org/LocalBusiness"><s... 查看详情