关于iframe跨域POST提交的方法示例


Posted in Javascript onJanuary 15, 2017

前言

以前在面试的时候经常遇到问关于跨域的事儿,所以自己对跨域有一定的概念性了解,知道什么是跨域以及解决跨域的方法,但是具体实际从来没有操作过,直到最近在公司项目中,遇到了一个需要使iframe跨域进行POST提交的实际案例,我才明白具体如何使用iframe进行跨域操作。

说到跨域,就不得不提起浏览器的同源策略。

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

如果协议,端口(如果指定了一个)和主机对于两个页面是相同的,那么这两个页面就具有相同的源。

从这个定义可以看出,如果两个页面的协议,端口,主机三个只要有一个不一样,就是不同的源,想要相互之间进行交互,就需要进行跨域。

iframe跨域POST无刷新提交

跨域的方法有很多,像JSONP、iframe、CORS、postMessage等等,由于项目中用到了iframe进行POST跨域,所以本文主要总结一下如何利用iframe进行POST无刷新提交。

我们知道一般提交使用form表单进行提交,但是这种提交会导致页面跳转,所以交互效果不是友好,为了实现无刷新提交,我们会使用Ajax,但是此时可能会出现一个问题—-跨域,那么如何解决这个问题呢,可以使用一个隐藏的iframe,我们将要提交的数据提交到这个隐藏的iframe,然后让这个iframe去跳转,这样就可以在视觉上实现页面无跳转刷新(实际上页面还是跳转了,只是iframe被隐藏,我们看不到)。

在提交后我们还要获取到后台给我们返回回来的数据,所以需要在iframe中进行数据的交互同时拿到返回回来的data。

为了让数据可以顺利的进行数据交互,我们通常使用document.domain将域设置到顶级域。
为了拿到返回回来的data,需要使用一个函数,函数名后台已经告知。

附实现代码

<form action="You POST Link" method="post" target="target" id="J_commenting">
 <select name="category" class="select J_filter" id="J_typeFilter">
 <option value="0" selected="selected">Select Category</option>
 <option value="1">Life</option>
 <option value="2">People</option>
 <option value="3">Landscape</option>
 <option value="4">Tech</option>
 <option value="5">Others</option>
 </select>
 <input name="title" type="text" class="misstion-title J_misstion-title">
 <textarea name="desc" class="misstion-description J_description" maxlength="200"></textarea>
 <button class="button J_button" type="submit">Submit</button>
</form>
<iframe name="target" style="display:none;"></iframe>
var $button = $('.J_button');
var $commenting = $('#J_commenting');
var $filter = $('.J_filter');
var $misstionTitle = $('.J_misstion-title');
var $description = $('.J_description');
$button.on('click', function () {
 var filterValue = $filter.val();
 var misstionTitleValue = $misstionTitle.val();
 var descriptionValue = $description.val();
 if (filterValue === '0' || misstionTitleValue === '' || descriptionValue === '') {
 alert('Check if you filled out all the fields required');
 } else {
 $commenting.submit();
 }
});
$commenting.on('submit', function () {
 document.domain = 'aa.com';
 window.addData = function (data) {
 var dataCode = data.code;
 var dataMsg = data.message;
 if (dataCode === 0) {
  alert('submit success!');
 } else {
  alert('submit failed!');
 }
 }
});

点击提交后,后台返回的数据:

document.domain = "aa.com";
var data = {"code":-2,"info":"please login first","message":"please login first"}; 
if( typeof(parent.window['addData']) == "function"){
 parent.window['addData'](data);
}else if( typeof(window.top['addData']) == "function"){
 window.top['addData'](data);
}

总结

以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
javascript中this关键字详解
Dec 12 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
JavaScript中利用for循环遍历数组
Jan 15 #Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 #Javascript
JavaScript调试的多个必备小Tips
Jan 15 #Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 #Javascript
js实现密码强度检验
Jan 15 #Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 #Javascript
vue实现简单实时汇率计算功能
Jan 15 #Javascript
You might like
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
Python中functools模块的常用函数解析
2016/06/30 Python
Python工程师面试必备25条知识点
2018/01/17 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
详解python持久化文件读写
2019/04/06 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
集团薪酬管理制度
2014/01/13 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书