iframe跨域POST提交

wwq0327 发布于2019-08-20 13:29 / 2283人阅读

摘要：说到跨域，就不得不提起浏览器的同源策略。跨域无刷新提交跨域的方法有很多，像等等，由于项目中用到了进行跨域，所以本文主要总结一下如何利用进行无刷新提交。为了拿到返回回来的，需要使用一个函数，函数名后台已经告知。

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

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

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

源

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

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

iframe跨域POST无刷新提交

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

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

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

为了让数据可以顺利的进行数据交互，我们通常使用document.domain将域设置到顶级域。

为了拿到返回回来的data，需要使用一个函数，函数名后台已经告知。

所以整个实现代码如下：

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);
}

云服务器 GPU云服务器 iframe跨域跨域POST post提交 post提交方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81087.html

javascript跨域

摘要：实现跨域的原理通过方式请求载入并执行一个文件，相当于通过的形式的导入一个外部的方法语法该函数是简写的函数，等价于在中，您可以通过使用形式的回调函数来加载其他网域的数据，如。将自动替换为正确的函数名，以执行回调函数。更多详情见http://blog.zhangbing.club/Ja... 最近在项目开发的过程中遇到一些Javascript 跨域请求的问题，今天抽空对其进行总结一下，以...

PingCAP 2019-08-22 18:10 评论0 收藏0
【Geek议题】当年那些风骚的跨域操作

摘要：同源策略年，同源政策由公司引入浏览器。标签不受同源策略限制，但只能发起请求。这一行为使得不同域的特定文档可以读取该属性值，因此可以绕过同源策略并使跨域消息通信成为可能。前言现在cross-origin resource sharing（跨域资源共享，下简称CORS）已经十分普及，算上IE8的不标准兼容（XDomainRequest），各大浏览器基本都已支持，当年为了前后端分离、if...

mengera88 2019-08-22 16:05 评论0 收藏0
【Geek议题】当年那些风骚的跨域操作

摘要：同源策略年，同源政策由公司引入浏览器。标签不受同源策略限制，但只能发起请求。这一行为使得不同域的特定文档可以读取该属性值，因此可以绕过同源策略并使跨域消息通信成为可能。前言现在cross-origin resource sharing（跨域资源共享，下简称CORS）已经十分普及，算上IE8的不标准兼容（XDomainRequest），各大浏览器基本都已支持，当年为了前后端分离、if...

Worktile 2019-08-02 10:07 评论0 收藏0
关于跨域攻击和网络信标

摘要：四跨域攻击跨域攻击可以理解为诱导受害者访问非法网站，黑客利用受害者的会话信息模拟请求，以达到篡改数据的目的。我们在百度上搜索一些关键字之后，访问其他网站时例如会发现，为何我刚刚搜索的关键字图片会在网页上显示那很有可能放置了百度的脚本代码。本人工作中偶尔会和浏览器打交道，也遇到过一些坑，在此分享一下网页跨域访问的相关场景和知识，希望对读者有帮助。本文来自于我的博客网站：www.51th...

ixlei 2019-08-23 14:38 评论0 收藏0
关于跨域攻击和网络信标

摘要：四跨域攻击跨域攻击可以理解为诱导受害者访问非法网站，黑客利用受害者的会话信息模拟请求，以达到篡改数据的目的。我们在百度上搜索一些关键字之后，访问其他网站时例如会发现，为何我刚刚搜索的关键字图片会在网页上显示那很有可能放置了百度的脚本代码。本人工作中偶尔会和浏览器打交道，也遇到过一些坑，在此分享一下网页跨域访问的相关场景和知识，希望对读者有帮助。本文来自于我的博客网站：www.51th...

dackel 2019-08-16 14:17 评论0 收藏0