关于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 相关文章推荐
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
google地图的路线实现代码
Aug 20 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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模块memcache和memcached区别分析
2011/06/14 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
说一说Python logging
2016/04/15 Python
Django admin美化插件suit使用示例
2017/12/12 Python
python使用Matplotlib画饼图
2018/09/25 Python
python数据化运营的重要意义
2019/11/25 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
档案检查欢迎词
2014/01/13 职场文书
自荐信的基本格式
2014/02/22 职场文书
领导失职检讨书
2014/02/24 职场文书
学习方法演讲稿
2014/05/10 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
本溪关门山导游词
2015/02/09 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书