在 onpaste 事件中发出 ajax 请求时访问被拒绝

Question

在我的 asp.net mvc 网站中，当用户在某个文本框中粘贴某些内容时，我正在对我的服务器进行 ajax 调用。此调用曾经在 IE 8 中运行，但现在它在 IE 11 中停止运行，在我的 jQuery 1.7.1 中h.open(c.type,c.url,c.async) 出现访问被拒绝异常。

长期研究提示我这可能与 CORS 问题有关，但是……每个调用都在同一个域上。

<input type="text" id="Pasteexcelhere" name="Pasteexcelhere" />


   <script type='text/javascript' >
     $(function () {
         onp();
     });
     function onp() {
         obj = document.getElementById('Pasteexcelhere');    

         $('#Pasteexcelhere').on('paste', function (e) {              
             x = obj.value;
             $.ajax({
                 type: "POST",
                 url: "<%= Url.Action("PasteFromExcel", "RequestData" ) %>",
                 data: "{'data': '" + x + "'}",                   
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 traditional: true,                     
                 success: function (da) {
                     alert("success");
                 },
                 error: function (d) {
                     alert(d.statusText); // access denied
                 }
             });
         });
 </script>

当尝试直接进行相同的调用时，假设通过一个简单的链接：

<a id="mylink" href="#" onclick="blubb();return false;">Pasted</a>

<script type='text/javascript' >
function blubb() {           
         obj = document.getElementById('Pasteexcelhere');
         x = obj.value;
         $.ajax({
             type: "POST",
             url: "<%= Url.Action("PasteFromExcel", "RequestData" ) %>",
                 data: "{'data': '" + x + "'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 traditional: true,                     
                 success: function (da) {
                     var propertyGrid = $('#RequestedTickers').data('tGrid');
                     propertyGrid.rebind({});

                 },
                 error: function (d) {
                     alert(d.statusText);
                 }

             });

         };
</script>

它按预期工作......（没有拒绝访问）

有人知道如何让它运行吗？

谢谢！

Answer 1

我遇到了类似的问题。该代码在 paste 事件监听器中触发了 jQuery AJAX 请求。这导致 xhr.open(...) 从下面显示的 jQuery 代码中抛出 Invalid Argument 异常。仅在IE11中运行代码时出现异常：

jQuery.ajaxTransport( function( options ) {
var callback, errorCallback;

// Cross domain only allowed if supported through XMLHttpRequest
if ( support.cors || xhrSupported && !options.crossDomain ) {
    return {
        send: function( headers, complete ) {
            var i,
                xhr = options.xhr();

            xhr.open(
                options.type,
                options.url,
                options.async,
                options.username,
                options.password
            );

@lx 建议的更改解决了这个问题。代码更改自：

$('#my_input').on('paste', onPaste);

function onPaste(e)
{
    triggerAjaxCall(...)
}

到

$('#my_input').on('paste', onPaste);

function onPaste(e)
{
    setInterval(function () { triggerAjaxCall(...) }, 100);  
}

Answer 2

@lx 对此表示感谢，您的解决方案有效，但我的解决方案不使用 JQuery，因此我不得不进一步研究它。我没有像@trykyn 那样拒绝访问，但是当直接从<textarea onpaste="ThisIsMyPasteFunction()"></textarea> 触发时，我遇到了粘贴后文本框为空白的问题〜（仅右键单击并粘贴）@

我发现在我的情况下我必须使用onpaste="setTimeout(function () { ThisIsMyPasteFunction() }, 1)，因为即使ThisIsMyPasteFunction 里面有一个setTimeout(function () { anotherfunction() } , 1)，它总是会作为一个空白文本区域值返回，直到我直接在@ 上设置setTimeout 987654326@.

如果其他人没有在他们的代码中使用 JQuery，希望这对其有所帮助:-)

很奇怪，右键粘贴不起作用，但 ctrl+v 可以

问候 利亚姆

Answer 3

由于它仅在粘贴时不起作用，因此问题似乎出在粘贴事件处理程序上。

在搜索 IE11 和粘贴事件后，我在 StackOverflow 上发现了“IE11 pasting clipboard data to an input element annoyance”等问题。

这可能是一个很长的尝试，但您可以尝试 AlvinfromDiaspar 在该帖子中提供的 answer 相同的“解决方案”（=workaround）：

$('#Pasteexcelhere').on('paste', function () { setTimeout(blubb, 100) });