4

の場合に問題がonSubmitありformます。

そのためのjavascriptimage要素を使用して、追跡情報を別のWebページに送信しています（パラメータは にありますGET）。

しかし、それをimage（属性を介してsrc）ロードしようとすると、リクエストが発生するよりも早くページが更新されimageます（またはすぐに中止されます）。

このようにして、情報は外部追跡ページに送信されません。submitこのハンドラーでloadそれを待つにはどうすればよいimageですか?

編集： 私が見逃したもう1つのポイントがあります。他のイベントが同じ場所にある可能性があります（検証など）

4

2 に答える 2

1

これはうまくいくはずです：

var img = document.getElementById('image'),
    form = document.getElementById('form');

img.addEventListener('load', function (){
    window.imageIsLoaded = true;
    if(window.submitForm === true){
        form.submit();
    }
}, false);

form.addEventListener('submit', function (e){
    window.submitForm = true;
    if(window.imageIsLoaded !== true){
        e.preventDefault();
        return false;
    }
}, false);​

デモ

于 2012-09-03T08:53:33.460 に答える
1

グローバルを使用せずに、必要に応じてフォームを自動送信する別の方法:

document.getElementById('yourFrm').addEventListener('submit',(function()
{
    'use strict';
    var imgLoaded,img,tmpImgLoad;
    imgLoaded = false;
    img = document.getElementById('yourImg');
    tmpImgLoad = function ()
    {
        imgLoaded = true;
        img.removeEventListener('load',tmpImgLoad,false);//remove obsolete listener?
    };
    img.addEventListener('load',tmpImgLoad,false);
    return function(e)
    {
        if (!imgLoaded)
        {
            tmpImgLoad = function()
            {
                imgLoaded = true;
                img.removeEventListener('load',tmpImgLoad,false);
                document.getElementById('yourForm').submit();
            };
            e.preventDefault();
            e.stopPropagation();
        }
    };
})(),false);

このコードは、load イベント リスナーをイメージ要素にバインドし、クロージャー変数を true に設定します。フォームの送信時にその変数が false の場合、load イベントのコールバックもフォームを送信するように変更されます。

これは少し複雑であることは認めますが、この問題に取り組む方法はグローバルだけではありません。

ロットも JSLint を介して渡しました。いくつかの小さな調整と、「厄介な空白を許容する」と「ブラウザーを想定する」を使用すると、このコードは警告やエラーなしで通過します

于 2012-09-03T09:11:54.560 に答える