JQuery“哇哦！”在 Chrome 中但不会导致任何其他浏览器崩溃

发布于 2024-12-04 17:02:50 字数 2883 浏览 2 评论 0原文

我在管理管理页面时遇到了一些困难，在 Chrome 中我经常收到“啊啊啊”的提示。

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

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

尺寸和颜色

Shadowbox Form

Shadowbox 允许用户输入颜色名称并选择十六进制颜色（通过滚轮颜色选择器插件）并上传代表性图像（通过 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();
}

我的问题是在上述函数期间，也许在关闭shadowbox期间，我在 Chrome 中遇到了一个糟糕的情况。上面的 color div 的屏幕截图是使用 Safari 制作的，我没有遇到任何问题。

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

更新。
我刚刚在几个浏览器中测试了这个问题，这绝对是一个仅与 Chrome 相关的问题。

原文

I'm having some difficulty with managing an administration page, where I constantly get an 'Aw Snap' in Chrome.

I have a 'merchandise' administration page where you can add new products to the website.
If the user selects 'T-shirt' as the product type, some new options appear. Namely size and colour.

Size is just a multiple select box but clicking on 'Add Colour' initialises a shadowbox.

Sizes & Colours

Shadowbox Form

The shadowbox allows the user to input a name for the colour and choose a hex colour (via the Wheel Colour Picker plugin) and upload a representative image (via Uploadify). On submission the Uploadify script uploads the file and then upon completion script sends the other colour information to the database via JQuery AJAX.

Submit Button Script:

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();
}

Uploadify 'On Complete':

'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);
            });
        });
    }

When the AJAX operation is complete, a feedback message shows 'Complete'.
After this time, the JQuery code closes the shadowbox programatically and on the parent page, a small div to represent the submitted colour is created.

Colour Div with 1 Colour

Potential to add multiple using this method.

Colour Div with 2 Colours

Get Colour Function:

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();
}

My issue is that during the above function, perhaps during the closing of the shadowbox, I get an Aw Snap in Chrome. The screenshots of the colour div above were made using Safari where I have no problems what so ever.

I have several plugins (shadowbox, wheel colour picker, uploadify, jquery) so could a clash of these be causing the error?

Update.
I've just managed to test this in a few more browsers, and it's definitely a problem associated only with Chrome.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟酒忠诚 2024-12-11 17:02:50

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

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

如果它不能修复它，我将继续通过该函数向上移动，删除代码，直到您可以阻止它崩溃。

另外，关闭 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

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

我想这里的教训是不要在任何时候处理太多，从事情的外观来看，我使浏览器超载了。

I would go through that get_colour function and start removing things one at a time, starting with the re-initialization of your Shadowbox. There's a chance that initializing / setting it up twice is breaking it.

If commenting out the .init and .setup calls DOES fix the crash, I would then start looking into how to completely remove (or de-initialize) your Shadowboxes before re-initializing them.

If it does not fix it, I would continue to move upwards through that function, removing code until you can stop it from crashing.

Also, closing the shadowbox probably tells it to do a bunch of work behind the scenes (removing dom elements, and whatever else Shadowbox does deep within it's JS core). Perhaps the issue is that you're closing it, and then telling it to initialize too soon, and Chrome is still holding on to a reference to the (not yet closed) lightbox.

To test / fix this, try moving the init and setup calls to another function entirely, and ONLY call that when you manually click a test link on your page. Make sure your get_colour function runs and finishes successfully first. If it works, then you know that this is the issue, and that you need to wait a bit longer before calling .init and .setup. Maybe you can call these two methods during the Shadowbox's onClose event instead... or somewhere else later in your code.

Update from Question Asker regarding implementation of solution:

Just in case anyone else runs into similar trouble. The eventual solution was because I was manipulating the DOM with the .html() call whilst the .click() call seemed to still be in the works.

The solution required me to put the .click() AFTER the .html() call as previously worked.

//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

It now works flawlessly in all browsers.

I suppose the lesson here is to not process too much at any one time, I overloaded the browser by the looks of things.

回复收藏 0 原文

迎风吟唱 2024-12-11 17:02:50

请参阅此页面，其中描述了“噢，啪！”页面：http://www.google.com/support/chrome /bin/answer.py?answer=95669

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

回复收藏 0 原文

剪不断理还乱 2024-12-11 17:02:50

以下内容将在 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>

The following will consistently generate the "Aw Snap" message on Chrome, but works fine on Firefox and 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>

回复收藏 0 原文