将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
- 浏览: 92439 次
- 性别:
- 来自: 苏州
相关推荐
1.php编程 ----1.讲师介绍+http协议+挖掘BUG.mp4 ----2....----3....----5....----6....----8....----10....----11....----13....----15....----16....----19....----20....----22.定义cookie+cookie跨域.mp4 ----23.文件上传.mp4 ----24.可变变量.mp4
通过HTTPClient界面在JSP中嵌入iframe子界面跨域时,无法获取跨域界面的属性值的问题
iframe 跨域访问session问题解决方法
知道什么是跨域以及解决跨域的方法,但是具体实际从来没有操作过,直到最近在公司项目中,遇到了一个需要使iframe跨域进行POST提交的实际案例,我才明白具体如何使用iframe进行跨域操作。 说到跨域,就不得不提起...
解决sockJs实现的websocket的跨域问题,后台使用的springboot框架,maven
iframe跨域问题:Uncaught DOMException Blocked a frame with origin解决方法
这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。
NULL 博文链接:https://hqlly.iteye.com/blog/1662337
开始之前,你可以先体验一下这个项目: ...UForm@0.3.10 :中后台领域的表单解决方案 typescript@3.5.3 :Javascript的超集 主要目录结构 ├── config # umi 配置,包含路由,构建等配置 ├── src
框架完美解决了iframe之间的跨域通讯。底层技术采用window.name转换代理实现
这个资源是我为了学习spring-security而做的,后期我会在更新,适合新手吧。
#注意3:开发环境,如果使用代理,解决跨域问题,接口地址在 vue.config.js 设置代理proxy,转到 ,.env.development中的VUE_APP_BASE_API 设置空即可。 #注意4:如果只运行vue-admin前端,则可以把代理转到 #注意5...
iframe 跨域 自动适应高度;iframe 跨域 自动适应高度;
MessengerJS-master(iframe跨域通信) MessengerJS-master(iframe跨域通信)
js跨域解决方案
在web开发中,跨域问题是经常遇到的,但是由于浏览器同源策略的限制,不同域之间属性和操作是无法直接交互的。本次讨论iframe和父页面的消息通信。
利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
iframe 与主框架相互访问例子,包含同域访问,跨域访问例子。
iframe+postMessage实现跨域通信 window.postMessage()方法安全地启用Window对象之间的跨源通信;例如,在页面和它产生的弹出窗口之间,或者在页面和嵌入其中的iframe之间。
iframe-resizer-master解决iframe高度自适应问题,跨域问题 iframe-resizer-master解决iframe高度自适应问题,跨域问题