如何延迟“onsubmit”事件直到某些内容加载完成？

Question

我在表单的“onSubmit”事件中遇到了问题。

我使用javascript的“image”元素将一些跟踪信息发送到另一个网页（参数在“GET”中）。

但是，当我尝试加载该图像（通过“src”属性），页面会在请求图像之前立即刷新（或立即中止）。

这样，没有任何信息被发送到外部跟踪页面。如何在此“submit”处理程序中等待该“image”的“load”？

编辑：还有一个我忽略的点，即其他事件可能在同一个位置（例如验证等）。

- XaReSx

---

使用同步xhr。 - Yoshi

@sabithpocker：不，这需要是纯JS（为了与更多页面兼容）。 - XaReSx

@Yoshi：如果我能处理超时，同步请求可能是一个解决方案。 - XaReSx

@sabithpocker：在IE中存在跨域问题，因为它被发送到外部域名，你有什么线索如何解决这个问题吗？ - XaReSx

@XaReSx，为什么你还没有添加你所拥有的相关代码呢？请添加你的“提交事件监听器”和你用于“跟踪”的“代码”。即使没有这些，这些人也提供了如此精彩的答案 :) - sabithpocker

Answer 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);​

演示

- Some Guy

---

很抱歉，这只会取消提交事件。并且会强制用户点击两次提交按钮。 - Viktor S.

你的编辑存在问题，实际上几乎所有浏览器都会在弹出窗口拦截器中捕获新提交的表单（如果目标是打开一个新的窗口/选项卡）。 - Yoshi

Answer 2

如果需要，在不使用全局变量的情况下自动提交表单的另一种方法：

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的所有检查，只需进行一些微小的调整，并使用“容忍混乱的空格”和“假设浏览器”，此代码就可以完全通过，没有任何警告或错误

- Elias Van Ootegem

---

对我来说，问题似乎是：如何在提交时加载跟踪图像。您的解决方案假定给定的图像已经是DOM的一部分。我认为这不正确。 - Yoshi

@Yoshi，我有点认为它已经是DOM的一部分了，因为Amaan提供的答案和问题：_但是当我尝试通过src属性加载该图像时_。但如果不是这种情况，那么你当然是正确的，OP应该转向ajax以获得解决他问题的最简单方法。 - Elias Van Ootegem

@EliasVanOotegem: 很好，但我没有提到可能会有其他提交事件（请看我的最后一次编辑），所以我个人认为我不能防止提交和传播。 - XaReSx

停止事件传播不应该成为问题，只要你将事件监听器附加到一个特定的表单上，除非img已加载完成否则该表单不应被提交。如果这就是你的意思，当然可以。如果你想在那个img没有完全加载完成的情况下继续验证这个表单，那么留下stopPropagation可以允许表单验证，但不会提交表单。因此，是的，只需删除stopPropagation()，但总体上代码仍将按预期工作。 - Elias Van Ootegem