之前在口试的时刻常常碰到问关于跨域的事儿，所以本身对跨域有肯定的概念性相识，晓得什么是跨域以及处理跨域的要领，然则详细现实从来没有操纵过，直到最近在公司项目中，碰到了一个须要使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);
}