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

 更新时间:2017年01月15日 15:56:01   投稿:daisy  
这篇文章主要给大家介绍了关于iframe跨域POST提交的相关资料,文中给出了详细的介绍与示例代码,相信对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以一起来学习学习。

前言

以前在面试的时候经常遇到问关于跨域的事儿,所以自己对跨域有一定的概念性了解,知道什么是跨域以及解决跨域的方法,但是具体实际从来没有操作过,直到最近在公司项目中,遇到了一个需要使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);
}

总结

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

相关文章

  • ES6中Proxy代理用法实例浅析

    ES6中Proxy代理用法实例浅析

    这篇文章主要介绍了ES6中Proxy代理用法,结合实例形式简单分析了Proxy代理的概念、功能、使用方法与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • 前端双token无感刷新图文详解

    前端双token无感刷新图文详解

    实现token无感刷新对于前端来说是一项十分常用的技术,这篇文章主要给大家介绍了关于前端双token无感刷新的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • 微信小程序登录方法之授权登陆及获取微信用户手机号

    微信小程序登录方法之授权登陆及获取微信用户手机号

    最近改了一个公司项目,新增加了一个获取用户手机号功能,里面用到了关于获取用户信息和用户手机号的功能,下面这篇文章主要给大家介绍了关于微信小程序登录方法之授权登陆及获取微信用户手机号的相关资料,需要的朋友可以参考下
    2022-07-07
  • 微信小程序滚动、轮播图和文本实例详解

    微信小程序滚动、轮播图和文本实例详解

    轮播图是我们日常开发中经常会遇到的一个需求,下面这篇文章主要给大家介绍了关于微信小程序滚动、轮播图和文本的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • 点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码

    点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码

    本篇文章主要是对点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • webpack5搭建一个简易的react脚手架项目实践

    webpack5搭建一个简易的react脚手架项目实践

    本文文章主要介绍了webpack5搭建一个简易的react脚手架项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • JavaScript获取网页支持表单字符集的方法

    JavaScript获取网页支持表单字符集的方法

    这篇文章主要介绍了JavaScript获取网页支持表单字符集的方法,涉及javascript中acceptCharset方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • 原生js实现autocomplete插件

    原生js实现autocomplete插件

    这篇文章主要介绍了原生js实现autocomplete插件的相关资料,需要的朋友可以参考下
    2016-04-04
  • javascript限制文本框输入值类型的方法

    javascript限制文本框输入值类型的方法

    这篇文章主要介绍了javascript限制文本框输入值类型的方法,涉及javascript鼠标事件、键盘按键及字符串的相关操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • 详解JavaScript模板化使文章更清晰的全过程

    详解JavaScript模板化使文章更清晰的全过程

    模块化就是把一大段代码拆分成一个个小文件(模块),每个模块独立工作,互相协作,那么JavaScript模板化是如何使文章更清晰呢,本文给大家详细介绍了JavaScript模板化使文章更清晰的全过程,需要的朋友可以参考下
    2025-04-04

最新评论