前言
以前在面試的時(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)告知。
附實(shí)現(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" 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!'); } }});點(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);}總結(jié)
以上就是這篇文章的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
