Question

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

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

尺寸只是一个多选框，但点击“添加颜色”会初始化一个阴影框。

Sizes & Colours

Shadowbox Form

阴影框允许用户输入颜色的名称并选择十六进制颜色（通过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。

Colour Div with 1 Colour

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

Colour Div with 2 Colours

获取颜色功能：

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，wheel color picker，uploadify，jquery），所以这些可能会导致错误吗？

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

Answer 1

我会通过get_colour函数并开始一次删除一些内容，从重新初始化Shadowbox开始。有可能将它初始化/设置两次就会破坏它。

如果评论出.init和.setup来电可以修复崩溃，那么我会在重新初始化之前开始研究如何彻底删除（或取消初始化）Shadowbox。

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

此外，关闭shadowbox可能会告诉它在幕后做一堆工作（删除dom元素，以及Shadowbox在其核心内部做的其他任何事情）。也许问题在于你正在关闭它，然后告诉它过早地初始化，Chrome仍然继续引用（尚未关闭的）灯箱。

要测试/解决此问题，请尝试将init和setup调用完全移至另一个功能，并且只在您手动点击页面上的测试链接时调用该功能。确保您的get_colour函数首先成功运行并完成。如果它有效，那么您知道这是问题所在，并且您需要等待一段时间才能调用.init和.setup。也许你可以在Shadowbox的onClose事件中调用这两种方法，而不是代码中的其他地方。

从问题Asker更新有关解决方案的实施：

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

该解决方案要求我将.ctml（）放在.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

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

我认为这里的教训是不要在任何时候处理太多，我用浏览器的外观来重载浏览器。

Answer 2

请参阅此页面，其中介绍了“Aw Snap！”页面：http://www.google.com/support/chrome/bin/answer.py?answer=95669

这通常是由计算机内存不足引起的。可能是您的应用程序使用了太多资源。尝试拨打图片和javascript，只使用你想要的东西。

Answer 3

以下将始终如一地生成＆＃34; Aw Snap＆＃34; Chrome上的消息，但在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>

Answer 4

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

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

JQuery'Aw Snap！'在Chrome中，但不会崩溃任何其他浏览器

4 个答案:

从问题Asker更新有关解决方案的实施：