First part of description is in Unsafe JavaScript attempt to access frame, when try to upload file with ajax Problem is that I get access denied error, when try to upload file with ajax-way.
After long debugging I have discovered that everything is working if I don't load ape client. Ape is comet server http://www.ape-project.org/
Ape creates an iframe with src = "http://8.ape.readbox.cz:6969/?...". If I disable ape and this iframe is not created then I have no problem to access document of the iframe, created for ajax-upload.
Togather they looks like
<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>
Please, can anybody help me? I'm confused.
Unfortunately, I can't give you a concrete solution. The gist of the problem is as follows:
In order for APE to make cross-domain (actually, subdomain) POST calls, ape needs to reset document.domain (a global, window variable), getting rid of the domain prefix (www., beta., etc...). While 0.ape.YOURDOMAIN.com is cross-domain restricted from www.YOURDOMAIN.com, it's allowed same-domain rights from YOURDOMAIN.com. Sadly, in order for your uploader iframe to access the parent window, it needs to be from the same domain as well. Resetting document.domain changes that.
One solution is to change APE's default XHR method from 'POST' to 'GET'. You can obviously make get requests from foreign domains, but you are limited in the amount of data you can send. In addition, you would have to comment out the line of javascript that resets document.domain on your page.
This is not the great, reliable solution you are probably looking for, but i hope it sheds a little light on the source of the problem.
I use jQuery Form Plugin and APE comet server, and stuck with the same problem with uploading file using iframe.
Here is my solution (using static iframe instead of dynamic one):
Add the following code to page, that are loaded BEFORE starting 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>
Add to the site the page iframe_src.html (the initial source for static iframe):
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.domain = document.domain; <!-- this is the main line -->
</script>
</body>
</html>
The purpose of this page is to allow the form plugin to make initial form submitting, avoiding permission error.
An application should return a response in the following way:
<html>
<head></head>
<body>
<script type="text/javascript">document.domain = document.domain;</script>
<textarea>' + YOUR_DATA_TO_RETURN + '</textarea>
</body>
</html>
That is to avoid permission denied error at the second and further form submissions.
Code for form submission on the client side:
$('#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
}
Modification in jquery.form.js file:
Find block
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);
}
and change it to
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);
(that is just moving the second curly brace up)
