1. ホーム
  2. javascript

[解決済み] エラー "フォームが接続されていないため、フォームの送信がキャンセルされました" の取得

2022-03-06 07:13:46

質問

私は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はこのようなコードに対応しなくなったようです。そうなんでしょうか?もしそうなら私の質問は。

  1. なぜ突然こうなったのでしょうか?非推奨の警告もなく?
  2. このコードに対する回避策は?
  3. コードを変更せずに、クローム(または他のブラウザ)を以前のように強制的に動作させる方法はありますか?

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