iframe跨域POST提交

wwq0327 發布于2019-08-20 13:29 / 2301人閱讀

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

以前在面試的時候經常遇到問關于跨域的事兒，所以自己對跨域有一定的概念性了解，知道什么是跨域以及解決跨域的方法，但是具體實際從來沒有操作過，直到最近在公司項目中，遇到了一個需要使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提交方式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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