[解決済み] エラー "フォームが接続されていないため、フォームの送信がキャンセルされました" の取得
質問
私はJQuery 1.7を使用した古いウェブサイトを持っており、2日前まで正常に動作していました。突然、いくつかのボタンが機能しなくなり、それらをクリックした後、コンソールにこの警告が表示されました。
<ブロッククオートフォームが接続されていないため、フォームの送信がキャンセルされました。
クリックの背後にあるコードは、次のようなものです。
this.handleExcelExporter = function(href, cols) {
var form = $('<form method="post"><input type="submit" /><input type="hidden" name="layout" /></form>').attr('action', href);
$('input[name="layout"]', form).val(JSON.stringify(cols));
$('input[type="submit"]', form).click();
}
Chrome 56はこのようなコードに対応しなくなったようです。そうなんでしょうか?もしそうなら私の質問は。
- なぜ突然こうなったのでしょうか?非推奨の警告もなく?
- このコードに対する回避策は?
- コードを変更せずに、クローム(または他のブラウザ)を以前のように強制的に動作させる方法はありますか?
P.S. firefoxの最新版でも動かない(メッセージなし)。また、IE11.0 & Edgeでも動作しません! (どちらもメッセージなし)
解決するには?
即答:フォームをボディに追加する。
document.body.appendChild(form);
また、上記のようにjQueryを使用する場合。
$(document.body).append(form);
詳細 HTML 標準によると、フォームが閲覧中のコンテキスト(ドキュメント)と関連付けられていない場合、フォームの送信は中断されます。
HTML SPEC 4.10.21.3.2参照
Chrome 56では、この仕様が適用されました。
クロームコード差分 を参照 @@ -347,9 +347,16 @@。
追伸:質問その1について。私の意見では、ajaxとは異なり、フォーム送信は即座にページ移動を引き起こします。
そのため、「非推奨の警告メッセージ」を表示することは、ほとんど不可能です。
また、この重大な変更が機能変更リストに含まれていないのは容認できないことだと思います。Chrome 56の機能
www.chromestatus.com/features#milestone%3D56
関連
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'top' を読み込めない
-
[解決済み] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングした
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] イベントを発生させた要素のIDを取得する
-
[解決済み] JSLintが突然レポートする。"use strict" の関数形式を使用する
-
[解決済み] JavaScriptでクライアントのタイムゾーン(およびオフセット)を取得する
-
[解決済み] デベロッパーツールを使って、Chromeのボタンや要素で実行されるコードを調べる方法
-
[解決済み】フォームのhiddenフィールドにjQueryの".val() "を使って値を設定してもうまくいかない。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】パッシブイベントリスナー内部でpreventDefaultができない
-
[解決済み】フォームコントロールの値アクセサがない
-
[解決済み】jquery $.ajaxオブジェクトのresponseJSONプロパティを取得する方法 [重複]。
-
[解決済み】最大呼び出しスタックサイズ超過エラーとその修正方法とは?
-
[解決済み] テスト
-
[解決済み] [Solved] Uncaught TypeError: nullのプロパティ 'appendChild' を読み取ることができない。
-
[解決済み】Javascript - ERR_CONTENT_LENGTH_MISMATCH
-
[解決済み】Redux TypeError: 未定義のプロパティ 'apply' を読み取れない
-
[解決済み】PhantomJS 2.1.1を使用してReactJSアプリケーションをレンダリングできない理由とは?
-
[解決済み] POSTフォームを送信した後、新しいウィンドウを開いて結果を表示する