3

Djangoフォームを受け取り、javascriptを介して作成され、既存のhtmlドキュメントの本文に追加された新しいdiv要素のinnerHtmlを介してDomに挿入するブックマークレットを作成しました。最初の送信はajaxリクエストです（正常に機能します）。不明なユーザーが原因でフォームがDjangoによって拒否された場合、送信機能はajaxからバインド解除され、CORSなしでユーザーを認証するためにajaxなしでポップアップウィンドウに再送信されます。このプロセスはIEで問題なく機能しますが、送信ボタンがクリックされるとChromeタブがクラッシュします。

テスト：問題を引き起こしているのは、おそらく最初のajax送信であると思いました。ただし、インジェクション時にajaxを使用せずに同じプロセスを使用すると、送信も失敗します。インジェクションの完了後にブラウザからhtmlコードをコピーし、新しいhtmlドキュメントを作成してから、Chromeで開くと、すべて正常に機能します。また、インジェクションの前にフォームフィールドを含むdivを削除すると、送信ボタンが機能します。これは、既存のページのDomがロードされた後にフォームを挿入することと関係があると私に信じさせます。ページを更新せずにDomをリロードする方法、またはインジェクション時にinnerHtmlをDomに適切に登録する方法はありますか？

コンソールエラーはありません。このWebページの表示中に問題が発生しました。

問題を再現するには、次の手順に従います。（Chromeバージョン23.0.1271.64mのWindows8を使用しています）
（手順1）画像のURLに移動します：itsblackcurrent.com/wp-content/uploads/2012/07/what-hi.png
（ステップ2） chrome consoleに移動し、次のコードを入力します。 

o = document.createElement("div");
o.setAttribute("id", "overlay");
o.innerHTML = '<div class="modal fade" id="new-pin"><div class="modal-header"><h3>New Pin</h3></div><form action="" enctype="multipart/form-data" method="get" id="ajaxform" name="pin_form" class="form-horizontal"><div class="modal-body"><div id="div_id_url" class="control-group"><label class="control-label" for="id_url">URL</label><div class="controls"><input type="text" name="url" id="id_url" /></div></div><div id="div_id_image" class="control-group"><label class="control-label" for="id_image">or Upload</label><div class="controls"><input type="file" name="image" id="id_image" /></div></div><div id="div_id_description" class="control-group"><label class="control-label" for="id_description">Description</label><div class="controls"><textarea id="id_description" rows="10" cols="40" name="description"></textarea></div></div><div id="div_id_tags" class="control-group"><label class="control-label" for="id_tags">Tags</label><div class="controls"><input type="text" name="tags" id="id_tags" /></div></div></div><div class="modal-footer"><div class="messageContainer"></div><button id="btnsubmit" type="submit" class="btn btn-primary">Submit</button><a id="cancel" onclick="removeOverlay()" data-toggle="modal" class="btn">Cancel</a></div></form></div>'; 
document.body.appendChild(o);

（ステップ3） [送信]をクリックして、Chromeがクラッシュするのを確認してください。

（ステップ4） DOMをロードする前にまったく同じコードをロードすると、機能します。以下を新しいテキストドキュメントに貼り付け、.htmlとして保存します。

<body>
<script>
Copy and paste all the code from step 2 here
</script>
</body>

（ステップ5） chromeで.htmlファイルを開き、送信がクラッシュしません。

4

2 に答える 2

1

Chromeでのクラッシュを防ぐ方法を見つけました。IEでも機能します。したがって、これをクロスブラウザの方法と呼んで、Chromeでクラッシュを発生させることなく、DOMが読み込まれた後にフォームを挿入できます。

$('#form').submit(function () {
    formData = $("#form").serialize()
    window.location = "http:url.to.submitdata/?"+formData;
    return false;
});

まず、jQueryでsubmit（）をキャプチャして、カスタム送信関数を作成する必要があります。次に、フォームデータをシリアル化し、フォームを送信するURLにフォームデータを手動で追加します。最後に、そして最も重要なことに、falseを返すと、通常の送信機能が停止し、Chromeがクラッシュするのを防ぎます。

私の元の質問で問題を再現するための指示に従った場合、クロームの回避策をテストする方法は次のとおりです。

（ステップ6）元の質問のステップ1と2を完了します。
（手順7） Chromeコンソールに次のコードを入力します。 

s = document.createElement("script")
s.src = src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
document.body.appendChild(s);
jQueryCheckLoad();

function jQueryCheckLoad() {
    if( window.$) {
        console.warn("jquery is ready");
        jqReady();
    } else {
        window.setTimeout( jQueryCheckLoad, 10 );
    }
}
function jqReady() {
    $( '#ajaxform' ).submit(function () {
        formData = $( "#ajaxform" ).serialize()
        window.location = "http://url.to.submitdata/?"+formData;
        return false;
    });
}

（ステップ8）コンソールに「jQueryReady」警告が表示されたら、[送信]と[ブーム]をクリックします。クラッシュなし！

falseを返すカスタムjQuerysubmit（）を作成して、通常のsubmit（）が起動しないようにするだけでした。最初にjQueryを注入し、次にjQueryCheckLoad（）を使用してjQueryの準備ができるのを待ちました。次に、jQueryのsubmit（）をバインドします。

*クロームのクラッシュの原因が何かわかっている人がいたら、私はまだ知りたいです。最も奇妙な部分は、私が最初にバインドを解除してフォームを送信したとき、約2時間のテストで非常に一貫して機能し、その後、不思議なことに絶えずクラッシュし始めたことです。インジェクションの順序を変更してブックマークレットのキャッシュをクリアしなかった可能性がわずかにありますが、変更するとクラッシュし始めました。これにより、ページを更新せずにDOMを正常に再ロードする方法があると私は信じています。

于 2012-11-13T21:58:56.787 に答える
0

これは、Chromeブラウザをクラッシュさせるjavascriptブックマークレットです。

javascript:var i = 0; while (i < 1) { window.location.reload(true); i = i - 1; };

通常のjavascript形式もあります（基本的に同じですが、javascriptがありません：最初に別々の行があります）。

var i = 0;
while (i < 1) {
window.location.reload(true);
i = i - 1;
}

これを使用して、ブラウザでブラウザを開いたときにブラウザをクラッシュさせるURLを次に示します。

https://codehs.com/editor/html/4767743/2616125/index.html

于 2021-09-23T19:01:53.400 に答える