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