成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

iframe跨域POST提交

wwq0327 / 2313人閱讀

摘要：說到跨域，就不得不提起瀏覽器的同源策略。跨域無刷新提交跨域的方法有很多，像等等，由于項(xiàng)目中用到了進(jìn)行跨域，所以本文主要總結(jié)一下如何利用進(jìn)行無刷新提交。為了拿到返回回來的，需要使用一個(gè)函數(shù)，函數(shù)名后臺(tái)已經(jīng)告知。

以前在面試的時(shí)候經(jīng)常遇到問關(guān)于跨域的事兒，所以自己對(duì)跨域有一定的概念性了解，知道什么是跨域以及解決跨域的方法，但是具體實(shí)際從來沒有操作過，直到最近在公司項(xiàng)目中，遇到了一個(gè)需要使iframe跨域進(jìn)行POST提交的實(shí)際案例，我才明白具體如何使用iframe進(jìn)行跨域操作。

說到跨域，就不得不提起瀏覽器的同源策略。

同源策略限制從一個(gè)源加載的文檔或腳本如何與來自另一個(gè)源的資源進(jìn)行交互。

源

如果協(xié)議，端口（如果指定了一個(gè)）和主機(jī)對(duì)于兩個(gè)頁(yè)面是相同的，那么這兩個(gè)頁(yè)面就具有相同的源。

從這個(gè)定義可以看出，如果兩個(gè)頁(yè)面的協(xié)議，端口，主機(jī)三個(gè)只要有一個(gè)不一樣，就是不同的源，想要相互之間進(jìn)行交互，就需要進(jìn)行跨域。

iframe跨域POST無刷新提交

跨域的方法有很多，像JSONP、iframe、CORS、postMessage等等，由于項(xiàng)目中用到了iframe進(jìn)行POST跨域，所以本文主要總結(jié)一下如何利用iframe進(jìn)行POST無刷新提交。

我們知道一般提交使用form表單進(jìn)行提交，但是這種提交會(huì)導(dǎo)致頁(yè)面跳轉(zhuǎn)，所以交互效果不是友好，為了實(shí)現(xiàn)無刷新提交，我們會(huì)使用Ajax，但是此時(shí)可能會(huì)出現(xiàn)一個(gè)問題----跨域，那么如何解決這個(gè)問題呢，可以使用一個(gè)隱藏的iframe，我們將要提交的數(shù)據(jù)提交到這個(gè)隱藏的iframe，然后讓這個(gè)iframe去跳轉(zhuǎn)，這樣就可以在視覺上實(shí)現(xiàn)頁(yè)面無跳轉(zhuǎn)刷新（實(shí)際上頁(yè)面還是跳轉(zhuǎn)了，只是iframe被隱藏，我們看不到）。

在提交后我們還要獲取到后臺(tái)給我們返回回來的數(shù)據(jù)，所以需要在iframe中進(jìn)行數(shù)據(jù)的交互同時(shí)拿到返回回來的data。

為了讓數(shù)據(jù)可以順利的進(jìn)行數(shù)據(jù)交互，我們通常使用document.domain將域設(shè)置到頂級(jí)域。

為了拿到返回回來的data，需要使用一個(gè)函數(shù)，函數(shù)名后臺(tái)已經(jīng)告知。

所以整個(gè)實(shí)現(xiàn)代碼如下：


    
    
    
    



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

點(diǎn)擊提交后，后臺(tái)返回的數(shù)據(jù)：

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81087.html

相關(guān)文章

  • javascript跨域

    摘要：實(shí)現(xiàn)跨域的原理通過方式請(qǐng)求載入并執(zhí)行一個(gè)文件，相當(dāng)于通過的形式的導(dǎo)入一個(gè)外部的方法語(yǔ)法該函數(shù)是簡(jiǎn)寫的函數(shù)，等價(jià)于在中，您可以通過使用形式的回調(diào)函數(shù)來加載其他網(wǎng)域的數(shù)據(jù)，如。將自動(dòng)替換為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。 更多詳情見http://blog.zhangbing.club/Ja... 最近在項(xiàng)目開發(fā)的過程中遇到一些Javascript 跨域請(qǐng)求的問題，今天抽空對(duì)其進(jìn)行總結(jié)一下，以...

    PingCAP 評(píng)論0 收藏0

  • 【Geek議題】當(dāng)年那些風(fēng)騷的跨域操作

    摘要：同源策略年，同源政策由公司引入瀏覽器。標(biāo)簽不受同源策略限制，但只能發(fā)起請(qǐng)求。這一行為使得不同域的特定文檔可以讀取該屬性值，因此可以繞過同源策略并使跨域消息通信成為可能。 前言 現(xiàn)在cross-origin resource sharing（跨域資源共享，下簡(jiǎn)稱CORS）已經(jīng)十分普及，算上IE8的不標(biāo)準(zhǔn)兼容（XDomainRequest），各大瀏覽器基本都已支持，當(dāng)年為了前后端分離、if...

    mengera88 評(píng)論0 收藏0

  • 【Geek議題】當(dāng)年那些風(fēng)騷的跨域操作

    摘要：同源策略年，同源政策由公司引入瀏覽器。標(biāo)簽不受同源策略限制，但只能發(fā)起請(qǐng)求。這一行為使得不同域的特定文檔可以讀取該屬性值，因此可以繞過同源策略并使跨域消息通信成為可能。 前言 現(xiàn)在cross-origin resource sharing（跨域資源共享，下簡(jiǎn)稱CORS）已經(jīng)十分普及，算上IE8的不標(biāo)準(zhǔn)兼容（XDomainRequest），各大瀏覽器基本都已支持，當(dāng)年為了前后端分離、if...

    Worktile 評(píng)論0 收藏0

  • 關(guān)于跨域攻擊和網(wǎng)絡(luò)信標(biāo)

    摘要：四跨域攻擊跨域攻擊可以理解為誘導(dǎo)受害者訪問非法網(wǎng)站，黑客利用受害者的會(huì)話信息模擬請(qǐng)求，以達(dá)到篡改數(shù)據(jù)的目的。我們?cè)诎俣壬纤阉饕恍╆P(guān)鍵字之后，訪問其他網(wǎng)站時(shí)例如會(huì)發(fā)現(xiàn)，為何我剛剛搜索的關(guān)鍵字圖片會(huì)在網(wǎng)頁(yè)上顯示那很有可能放置了百度的腳本代碼。 本人工作中偶爾會(huì)和瀏覽器打交道，也遇到過一些坑，在此分享一下網(wǎng)頁(yè)跨域訪問的相關(guān)場(chǎng)景和知識(shí)，希望對(duì)讀者有幫助。本文來自于我的博客網(wǎng)站：www.51th...

    ixlei 評(píng)論0 收藏0

  • 關(guān)于跨域攻擊和網(wǎng)絡(luò)信標(biāo)

    摘要：四跨域攻擊跨域攻擊可以理解為誘導(dǎo)受害者訪問非法網(wǎng)站，黑客利用受害者的會(huì)話信息模擬請(qǐng)求，以達(dá)到篡改數(shù)據(jù)的目的。我們?cè)诎俣壬纤阉饕恍╆P(guān)鍵字之后，訪問其他網(wǎng)站時(shí)例如會(huì)發(fā)現(xiàn)，為何我剛剛搜索的關(guān)鍵字圖片會(huì)在網(wǎng)頁(yè)上顯示那很有可能放置了百度的腳本代碼。 本人工作中偶爾會(huì)和瀏覽器打交道，也遇到過一些坑，在此分享一下網(wǎng)頁(yè)跨域訪問的相關(guān)場(chǎng)景和知識(shí)，希望對(duì)讀者有幫助。本文來自于我的博客網(wǎng)站：www.51th...

    dackel 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<