iframe跨域POST提交

wwq0327 發(fā)布于2019-08-20 13:29 / 2359人閱讀

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

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

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

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

源

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

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

iframe跨域POST無刷新提交

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

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

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

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

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

所以整個實現(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!");
        }
    }
});

點擊提交后，后臺返回的數(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);
}

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/81087.html

javascript跨域

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

PingCAP 2019-08-22 18:10 評論0 收藏0
【Geek議題】當年那些風騷的跨域操作

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

mengera88 2019-08-22 16:05 評論0 收藏0
【Geek議題】當年那些風騷的跨域操作

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

Worktile 2019-08-02 10:07 評論0 收藏0
關于跨域攻擊和網(wǎng)絡信標

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

ixlei 2019-08-23 14:38 評論0 收藏0
關于跨域攻擊和網(wǎng)絡信標

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

dackel 2019-08-16 14:17 評論0 收藏0