如何在页面卸载时可靠地跨域和跨浏览器发送请求

Question

我有由第三方加载的 JavaScript 代码。 javascript 跟踪许多指标，当用户退出页面时，我想将指标发送回我的服务器。

由于某些浏览器（例如 IE）中存在 XSS 检查，我无法执行简单的 jquery.ajax() 调用。相反，我使用 jquery 将图像 src 附加到页面。下面是代码，以浏览器为例：

    function record_metrics() {
        //Arbitrary code execution here to set test_url
        $esajquery('#MainDiv').append("<img src='" + test_url + "' />");
    }

    if ($esajquery.browser.msie) {
        window.onbeforeunload = function() { record_metrics(); }
    } else {
        $esajquery(window).unload(
            function(){ record_metrics(); }
        );
    }

如果我使用 window.onbeforeunload，FF 会中止对“test_url”的请求，并且 IE8 无法使用 jquery 的 unload()。如果任意 test_url 设置代码太长，IE8 也会无法工作，尽管如果立即附加到 DOM，IE8 似乎可以正常工作。

有没有更好的方法来解决这个问题？不幸的是，这确实需要在用户离开页面时执行。

Answer 1

为了后人的缘故，这就是我最终要做的事情：

if ($.browser.msie) {
    window.onbeforeunload = function() { $('#div1').append("<img src='record_call' />");   
} else {
    $(window).unload(
        if ($.browser.webkit) {
           $.ajax(url:record_call, async:false);
        } else {
           $('#div1').append("<script src='record_call' />");
        }
    );
}

我发现 IE 可以附加一个 img，但不能附加一个脚本，可能是因为脚本占用更多资源，并且在尝试加载它之前会被切断。对于 webkit，附加脚本有时有效，但附加图像似乎永远不起作用。最后，我默认使用该脚本（主要针对 FF），因为较旧的浏览器版本似乎都可以很好地使用它。由于 xss，IE 会阻止 webkit 使用的 AJAX 调用。

另外，IE从来不支持jquery的unload函数，而其他浏览器也不支持onbeforeunload，所以这些都必须加大小写。这当然不是一个完美的解决方案，但它在大多数情况下都有效。

Answer 2

对于那些尝试使用上面的 Agmin 方法的人来说，请注意：当您使用 jQuery 的 append() 方法附加脚本标记时，内部 jQuery 连接使用 jQuery.ajax()执行脚本，因此如果您附加的脚本标签位于不同的域中，同源策略将阻止脚本执行。

Answer 3

据我所知，某些浏览器只接受 onbeforeunload 结果的文本字符串。尝试更像这样的事情：

jQuery(window).bind('beforeunload', function() { record_metrics(); return ''; } );

不确定，但这甚至可能适用于所有浏览器，但我目前只是猜测。

ps 另请参阅 我该如何覆盖 OnBeforeUnload 对话框并将其替换为我自己的对话框？

Answer 4

你应该看看 easyXDM 库

http://easyxdm.net/

我认为它会让你的工作变得轻松同源策略设置的限制