Chromeでフォームを送信するのが遅い

Question

ユーザーがリンクをクリックしたり、フォームを送信したりすると、短い猶予時間でリクエストを忘れて忘れてしまいます。ここで私が使用している単純化されたコードです：これはclickイベントのために正常に動作し、それがFirefoxではなく、Chromeでsubmitイベントのために正常に動作します

element.addEventListener(eventType, function(event) { 
    if (event.retriggered) { 
    return true; 
    } 

    let target = event.target; 
    let newEvent = new event.constructor(event.type, event); 
    newEvent.retriggered = true; 

    setTimeout(() => { 
    target.dispatchEvent(newEvent); 
    }, 250); 

    // fire and forget the request 
    makeRequest(); 

    event.preventDefault(); 
    return false; 
}); 

。私はfiddle hereを作成しました。 Firefoxでは、ボタンをクリックすると、ブラウザがGETリクエストを行っていることがわかりますが、それはChromeでは発生しません。私のテストによると、元のイベントと新しいイベントは両方のブラウザで同じに見え、dispatchEventはtrueを返します。それでもChromeで実際の送信が開始されていないため、Chromeがセキュリティ対策として送信を停止しているのか、何か不足しているのでしょうか？

Answer 1

ディスパッチしているイベントは、コピーしようとしているイベントと少なくとも少し異なります。イベントのisTrustedプロパティはfalseに設定されています。おそらく、これがChromeがフォームを送信しない理由です。

私が知っていることは、少し異なるコードを使って、フォームに対して、あなたが望む結果を得る方法です。私はこれをあなたのフィドルのコードに基づいているので、今度はフォームの送信だけを処理します。代わりに、イベントを自分で提出派遣の

let 
 
    form = document.getElementById('form'); 
 

 
form.addEventListener('submit', function(event) { 
 
    setTimeout(() => { 
 
    form.submit(); 
 
    }, 250); 
 

 
    event.preventDefault(); 
 
});

<form id="form" method="get" action="/echo/html/"> 
 
    <button type="submit">Go</button> 
 
</form>

、あなただけのフォームのsubmit()メソッドを呼び出すことができます。これによりフォームは送信されますが、サブミットハンドラは実行されません（this MDN記事）。それは、あなたが送信を遅延させるかどうかを確認するために、ハンドラのチェックを保存します。

アンカーでも機能するように調整できます。 、おかげで動作します

let 
 
    form = document.getElementById('form'), 
 
    anchor = document.getElementById('anchor'); 
 

 
function onDelayNavigationEvent(event) { 
 
    const 
 
    target = event.target; 
 
    
 
    if (target.hasAttribute('is-delayed')) { 
 
    return true; 
 
    } 
 
    
 
    setTimeout(() => { 
 
    if (target.tagName.toLowerCase() === 'form') { 
 
     target.submit(); 
 
    } else { 
 
     target.click(); 
 
    } 
 
    }, 2000); 
 
    
 
    target.setAttribute('is-delayed', true); 
 
    event.preventDefault(); 
 
} 
 

 
function delayNavigation(element, eventName) { 
 
    element.addEventListener(eventName, onDelayNavigationEvent); 
 
} 
 

 
delayNavigation(form, 'submit'); 
 
delayNavigation(anchor, 'click');

<form id="form" method="get" action="/echo/html/"> 
 
    <button type="submit">Go</button> 
 
</form> 
 

 
<a id="anchor" href="//stackoverflow.com">Stack Overflow</a>