将form表单提交到目标服务器（action=“url”），当表单提交后，页面会target到隐藏的iframe，
实现不需刷新页面跨域。
1. 创建一个iframe
try{// IE6, IE7
iframe = document.createElement('<iframe name="{iframeName}">');
} catch(e) {
iframe = document.createElement('iframe');
iframe.name = {iframeName};
}
iframe.style.display = 'none';
document.body.appendChild(iframe);
/** 备注 **/
1. 在IE下，当使用js创建iframe时，IE不会创建iframe的name，即：iframe.name={iframeName}不会被执行。
2. 参考：http://terminalapp.net/submitting-a-form-with-target-set-to-a-script-generated-iframe-on-ie/
/** 备注 **/
2. 监听iframe的onload事件
if(iframe.readyState){
iframe.onreadystatechange = function(){
if (iframe.readyState && iframe.readyState=='complete'){
callbackFunction.apply(this);
}
}.bind(this);
} else {
iframe.onload = callbackFunction.bind(this);
}
/** 备注 **/
1. iframe事件监听
2. 参考：http://hqlong.com/2009/02/620.html
/** 备注 **/
3. 创建表单，并自动提交
form = document.createElement('form');
form.action = {url};
form.target = {iframeName}; // important!!
form.method = 'post';
input = document.createElement('input');
input.name = {inputName};
input.value = {inputValue};
input.type = 'hidden';
form.appendChild(input);
document.body.appendChild(form);
form.submit();
/** 备注 **/
1. form.target 必须要与iframe.name相同；当表单提交后，页面会target到隐藏的iframe，并且不刷新页面，实现跨域。
2. form表单必须要append到页面上，否则不能使用js提交（chrome除外）。
3. 参考：http://terminalapp.net/submitting-a-form-with-target-set-to-a-script-generated-iframe-on-ie/
/** 备注 **/
4. callbackFunction 获取iframe的内容
iframeContent = iframe.contentDocument? iframe.contentDocument: iframe.contentWindow.document;
5. php的返回值
"<!DOCTYPE html>
<html>
<body>
<script>document.domain="xxxx.com";</script><script type="text/json-result">'.json_encode($result).'</script>
</body>
</html>"
/** 备注 **/
1. 在IE下，必须要是完整的html页面才能找到document对象
2. 返回的结果，要加入document.domain，确保可以跨域访问
3. 返回的结果放到script标签中，标签可以采用特殊的type标注，以便在js中获取结果
4. js中获得的json是string，可以通过evalJSON()将其转为json数据
/** 备注 **/
6. 参考
http://terminalapp.net/submitting-a-form-with-target-set-to-a-script-generated-iframe-on-ie/
http://hqlong.com/2009/02/620.html
http://hi.baidu.com/gguoyu/item/aa501b0ed6a0fb8e03ce1b66
http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html
top5
- 浏览: 95280 次
- 性别:
- 来自: 苏州
-
最新评论
相关推荐
`form+iframe`的跨域上传文件原理是，当表单提交后，浏览器会在`iframe`中执行目标URL的请求，由于`iframe`的源不受同源策略限制，因此可以向其他域名提交数据。服务器返回的结果在`iframe`中加载，可以通过...
综上所述，"js跨域iframepostMessage提交表单"的实现策略结合了iframe、form、postMessage以及事件监听等多个JavaScript特性，有效解决了跨域提交表单，尤其是包含文件上传的复杂场景，并且能获取返回值，提高了用户...
然后，我们使用JavaScript监听`iframe`的`load`事件，以便在文件上传完成后处理响应。在`postMessage`中，我们将文件信息传递给`iframe`，服务器返回的响应也会被`iframe`捕获： ```javascript document....
本文将详细介绍如何使用jQuery.form插件，实现完美的表单异步提交。 首先，我们需要了解jQuery.form插件的基本用法。在开始之前，请确保已经在项目中引入了jQuery库以及jQuery.form插件。通常，这两个文件可以通过...
- **创建form和iframe**：首先，JavaScript动态创建一个form表单，设置其`action`属性为文件服务器的URL，`enctype`为`multipart/form-data`（用于处理文件数据），`method`通常设为`POST`，并指定一个`target`属性...
通过设置`dataType: 'iframe'`，可以实现大文件的跨域上传，同时保持用户界面的实时更新。 总之，"jquery form表单美化插件"是前端开发中提升表单用户体验的一个强大工具。通过与jQuery的深度整合，它不仅简化了...
在实现iframe跨域POST提交时，我们通常创建一个隐藏的iframe，将表单的提交目标设置为这个iframe。通过这种方式，表单数据会被发送到iframe指向的URL，而不是导致整个页面的刷新。尽管页面实际上进行了跳转，但由于...
通过设置`dataType`为'iframe'，可以实现跨域文件上传，并在`success`回调中处理返回结果。 **六、增强用户体验** 通过使用jQuery Form插件，可以添加进度条、禁用提交按钮等特性，提供更好的用户体验。例如，当...
jQuery Form插件是一款广泛使用的JavaScript库，专门设计用于增强HTML表单的功能，使其能够通过Ajax方式提交数据，实现无刷新页面交互。这个压缩包“jquery-form.rar”包含了一个核心文件“jquery-form.js”，它是该...
配合`iframe`或者`FormData`，可以实现跨域文件上传。 **7. 兼容性与最佳实践** 考虑到兼容性，确保你的项目支持最低版本的jQuery和浏览器。同时，为提高性能，可以使用最新的jQuery版本，并利用CDN（内容分发网络...
为了实现POST请求的跨域通信，本文提出了一个通过iframe和form表单提交，并使用postMessage API进行通信的方法。这种方法可以实现跨域POST请求，并且能够将请求结果返回给调用者。 首先，需要实现一个能够接受JSONP...
5. **跨域支持**：使用`jsonp`或`iframe`方式，可以实现代理提交，解决跨域问题。 6. **多种提交方式**：支持POST、GET等多种HTTP请求方法，以及自定义的提交方式。 在实际应用中，我们通常会将jQuery Form插件与...
以上知识点详细地阐述了在基础域名相同的情况下，如何通过特定的技术手段实现跨域的AJAX表单提交，包括对同源策略的解释、解决跨域问题的必要条件、使用jquery.form.js进行表单提交的具体操作步骤、需要注意的细节和...
5. **触发表单提交**：用户选择文件后，使用JavaScript触发表单的提交。 ```javascript input.addEventListener('change', function() { form.submit(); }); ``` 6. **获取iframe内容**：由于同源策略限制，我们...
然而，通过使用隐藏的iframe，我们可以实现Ajax方式提交带文件上传的表单。 基本思路如下： 1. **创建HTML表单**：首先，我们需要创建一个包含文件输入字段的表单，设置enctype为"multipart/form-data"，method为...
例如，要获取iframe内id为`form1`的表单内容，可以使用以下代码： ```javascript $(document).ready(function(){ $("#btn").click(function(){ alert($("#iframe1").contents().find("#form1").html()); }); });...
首先，我们澄清一个误区：虽然传统的Ajax技术确实不能直接处理文件上传，因为XMLHttpRequest对象在跨域安全策略的限制下不支持multipart/form-data编码类型，但现代的Ajax技术，如jQuery的`$.ajax()`或使用Fetch API...
在处理表单提交，特别是涉及到文件上传时，jQuery提供了`jquery.form.js`插件，使得这个过程更加方便和灵活。本文将详细讨论如何使用jQuery Form插件来实现`type=file`的文件上传功能。 ### jQuery Form 插件介绍 ...