今天就跟大家聊聊有關(guān)使用iframe怎么實現(xiàn)跨域POST提交，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

10年的南部網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整南部建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)建站從事“南部網(wǎng)站設(shè)計”,“南部網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

iframe跨域POST無刷新提交

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

我們知道一般提交使用form表單進行提交，但是這種提交會導(dǎo)致頁面跳轉(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將域設(shè)置到頂級域。
為了拿到返回回來的data，需要使用一個函數(shù)，函數(shù)名后臺已經(jīng)告知。

附實現(xiàn)代碼

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

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

看完上述內(nèi)容，你們對使用iframe怎么實現(xiàn)跨域POST提交有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)頁標(biāo)題：使用iframe怎么實現(xiàn)跨域POST提交
標(biāo)題網(wǎng)址：http://jinyejixie.com/article14/poecde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、電子商務(wù)、搜索引擎優(yōu)化、營銷型網(wǎng)站建設(shè)、建站公司、手機網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)