关于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 AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
element跨分页操作选择详解
Jun 29 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设计模式 Singleton(单例模式)
2011/06/26 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
JavaScript中的细节分析
2012/06/30 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
python多线程抽象编程模型详解
2019/03/20 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
数学专业毕业生自荐信
2013/11/10 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
工程承包协议书范本
2014/09/29 职场文书
财务部岗位职责范本
2015/04/14 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
python脚本框架webpy模板赋值实现
2021/11/20 Python