11

Chrome で常に「Aw Snap」が表示される管理ページの管理に問題があります。

新しい製品をウェブサイトに追加できる「商品」管理ページがあります。
ユーザーが商品タイプとして「T シャツ」を選択すると、いくつかの新しいオプションが表示されます。つまり、サイズと色です。

サイズは単なる複数選択ボックスですが、「色の追加」をクリックするとシャドーボックスが初期化されます。

サイズと色

シャドーボックスフォーム

シャドーボックスを使用すると、ユーザーは色の名前を入力し、( Wheel Color Pickerプラグインを介して) 16 進数の色を選択し、 ( 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 が作成されます。

1色のカラーディビジョン

この方法を使用して複数を追加する可能性があります。

2色のカラーディビジョン

色関数を取得:

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 のみに関連する問題です。

4

4 に答える 4

8

その get_colour 関数を調べて、一度に 1 つずつ削除を開始し、Shadowbox. 初期化/設定を2回行うと壊れる可能性があります。

と の呼び出しをコメントアウトする.init.setupクラッシュが修正される場合は、シャドウボックスを再初期化する前に、シャドウボックスを完全に削除 (または初期化解除) する方法を検討します。

それでも問題が解決しない場合は、引き続きその関数を上に移動し、クラッシュを止めることができるまでコードを削除します。

また、シャドウボックスを閉じると、おそらく舞台裏で一連の作業を行うように指示されます (dom 要素の削除、およびその他のシャドウボックスが JS コアの奥深くで行うことは何でも)。おそらく問題は、それを閉じてから初期化するのが早すぎて、Chrome がまだ (まだ閉じられていない) ライトボックスへの参照を保持していることです。

これをテスト/修正するには、initとのsetup呼び出しを完全に別の関数に移動してみてください。ページ上のテスト リンクを手動でクリックした場合にのみ呼び出してください。get_colour最初に関数が実行され、正常に終了することを確認してください。.initこれが機能する場合は、これが問題であり、 andを呼び出す前にもう少し待つ必要があることがわかります.setup。代わりに、Shadowbox の onClose イベント中にこれら 2 つのメソッドを呼び出すことができます... または、コード内の他の場所で呼び出すことができます。

ソリューションの実装に関する Question Asker からの更新:

他の誰かが同様の問題に遭遇した場合に備えて。最終的な解決策は、.html() 呼び出しで DOM を操作していたにもかかわらず、.click() 呼び出しがまだ進行中であるように見えたためです。

ソリューションでは、以前に機能していた .html() 呼び出しの後に .click() を配置する必要がありました。

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

現在、すべてのブラウザで問題なく動作します。

ここでの教訓は、一度に処理しすぎないようにすることだと思います。私は物事の見た目によってブラウザを過負荷にしました。

于 2011-09-24T19:56:03.717 に答える
1

「Aw Snap!」について説明しているこのページを参照してください。ページ: http://www.google.com/support/chrome/bin/answer.py?answer=95669

これは通常、コンピュータのメモリが不足していることが原因です。アプリケーションが使用するリソースが多すぎる可能性があります。画像と JavaScript をダイヤルダウンして、必要な分だけ使用してみてください。

于 2011-09-24T17:07:41.777 に答える
0

以下は、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>
于 2014-04-30T04:01:34.227 に答える
-1

Chrome 関連の問題である場合は、Chromium Bug Tracker に送信してみてください (「Google の Chrome ブラウザーでバグ レポートを見つけて送信するには?」 を参照) か、少なくとも同様の問題が存在するかどうかを確認してください。

おそらく、この問題が発生する最小限のページを提供してください(たとえば、jsfiddlerを使用してダミーページを作成します)

于 2011-09-19T08:48:49.527 に答える