由于猿彗星服务器无法使用ajax-upload答案

【问题标题】：Can not use ajax-upload because of ape comet server由于猿彗星服务器无法使用ajax-upload
【发布时间】：2010-06-10 08:02:19
【问题描述】：

描述的第一部分在Unsafe JavaScript attempt to access frame, when try to upload file with ajax 问题是当我尝试使用 ajax 方式上传文件时出现访问被拒绝错误。

经过长时间调试，我发现如果我不加载ape客户端，一切正常。猿是彗星服务器http://www.ape-project.org/

Ape 使用 src = "http://8.ape.readbox.cz:6969/?..." 创建一个 iframe。如果我禁用 ape 并且未创建此 iframe，那么我可以毫无问题地访问为 ajax-upload 创建的 iframe 文档。

他们看起来像

<iframe src="http://8.ape.readbox.cz:6969/?..." style="display: none; position: absolute; left: -300px; top: -300px;" id="ape_undefined"></iframe>
<iframe style="display: none;" id="ValumsAjaxUpload0" src="javascript:false;" name="ValumsAjaxUpload0"></iframe>

请问，有人可以帮我吗？我很困惑。

【问题讨论】：

标签： ape ajax-upload

【解决方案1】：

很遗憾，我无法为您提供具体的解决方案。问题的要点如下：

为了让 APE 进行跨域（实际上是子域）的 POST 调用，ape 需要重置 document.domain（一个全局的、窗口变量），去掉域前缀（www.、beta.等）。 ..)。虽然 0.ape.YOURDOMAIN.com 受 www.YOURDOMAIN.com 的跨域限制，但它允许来自 YOURDOMAIN.com 的同域权限。遗憾的是，为了让您的上传者 iframe 访问父窗口，它也需要来自同一个域。重置 document.domain 会改变这一点。

一种解决方案是将 APE 的默认 XHR 方法从“POST”更改为“GET”。您显然可以从外部域发出 get 请求，但您可以发送的数据量有限。此外，您必须注释掉页面上重置 document.domain 的 javascript 行。

这不是您可能正在寻找的出色、可靠的解决方案，但我希望它能够对问题的根源有所了解。

【讨论】：

【解决方案2】：

我使用jQuery Form Plugin 和 APE comet 服务器，但在使用 iframe 上传文件时遇到了同样的问题。这是我的解决方案（使用静态 iframe 而不是动态 iframe）：

将以下代码添加到在启动 APE 之前加载的页面：

<iframe id="file_upload_iframe" name="file_upload_iframe" src="iframe_src.html" style="position: absolute;left: -300px;top:-300px; width:0px;height:0px;"></iframe>

将页面 iframe_src.html（静态 iframe 的初始源）添加到站点：

<html>
<head>
</head>
<body> 
<script type="text/javascript">
  document.domain = document.domain;  <!-- this is the main line -->
</script>
</body>
</html>

这个页面的目的是允许表单插件进行初始表单提交，避免权限错误。
应用程序应以下列方式返回响应：

<html>
<head></head>
<body> 
<script type="text/javascript">document.domain = document.domain;</script>
<textarea>' + YOUR_DATA_TO_RETURN + '</textarea>
</body>
</html>

这是为了避免在第二次和进一步的表单提交时出现权限被拒绝错误。

客户端表单提交代码：

$('#image_add_commit').click(function(){
    $('#file_upload_iframe').unbind();//may be it is unnecessary
    $('#image_add_form').ajaxSubmit( 
        {success: image_add_complete,
        iframe: true,
        iframeTarget: $('#file_upload_iframe').get(0),
        dataType: 'html',
        textarea: true});
}); 

function image_add_complete(data){
   //data variable contains YOUR_DATA_TO_RETURN that was wrapped in HTML code
}

jquery.form.js 文件中的修改：

寻找方块

            if (!s.iframeTarget) {
                // add iframe to doc and submit the form
                $io.appendTo('body');

                if (io.attachEvent)
                    io.attachEvent('onload', cb);
                else
                    io.addEventListener('load', cb, false);
            }

并将其更改为

        if (!s.iframeTarget) {
            // add iframe to doc and submit the form
            $io.appendTo('body');
        }
            if (io.attachEvent)
                io.attachEvent('onload', cb);
            else
                io.addEventListener('load', cb, false);

（这只是将第二个花括号向上移动）

【讨论】：