js跨域 -- 使用form表单 + 隐藏的iframe

最新推荐文章于 2023-06-30 01:48:10 发布

qq0084

最新推荐文章于 2023-06-30 01:48:10 发布

阅读量5.7k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq0084/article/details/8448277

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

将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