偶然發(fā)現(xiàn)了另一種跨域方式，不知道有沒有人這么玩過

wthee 發(fā)布于2019-08-02 11:48 / 1141人閱讀

摘要：眾所周知，利用瀏覽器不限制加載跨域外部資源的特性，使用標簽屬性請求接口，加載數(shù)據(jù)，在中觸發(fā)提前聲明好的函數(shù)拿到數(shù)據(jù)，前端的前輩們這一手操作簡直就是犀利。現(xiàn)代瀏覽器提供了這個，使得通過可以拿到某個元素最終應(yīng)用的樣式。

眾所周知，jsonp利用瀏覽器不限制加載跨域外部資源的特性，使用script標簽src屬性請求接口，加載數(shù)據(jù)，在script中觸發(fā)提前聲明好的函數(shù)拿到數(shù)據(jù)，前端的前輩們這一手操作簡直就是犀利。

其實實現(xiàn)單向的接口調(diào)用使用任何資源標簽都可以實現(xiàn)，關(guān)鍵在于如何取到后端傳回的數(shù)據(jù)實現(xiàn)雙向交互。
現(xiàn)代瀏覽器提供了getComputedStyle這個API，使得通過js可以拿到某個元素最終應(yīng)用的css樣式。（低版本IE中為currentStyle）。如下所示：

如此一來，我們就可以在css樣式中取得想要的數(shù)據(jù)文本
1.利用偽類的::after或::before的 { content:"{數(shù)據(jù)}" } 或者利用 font-family："{數(shù)據(jù)}"

data.css 代碼
.data-div{
    font-family: "{a:"1"}";
}

2.動態(tài)加載css樣式，并監(jiān)聽其load事件，我這里用的是靜態(tài)文件（上邊的data.css），有興趣的可以寫個接口試下。

3.點擊數(shù)據(jù)標簽，可以看到輸出結(jié)果如下：

PS：這個方法和JSONP一樣需要后端配合將數(shù)據(jù)按一定的規(guī)則拼接給前端，其實放到現(xiàn)在并沒什么卵用，現(xiàn)在已經(jīng)很少有看到用JSONP實現(xiàn)跨域請求的。但是自己玩一玩還是可以的，順便致敬一波JSONP，致敬一波前輩們

云服務(wù)器 GPU云服務(wù)器 ftp是屬于一種網(wǎng)站發(fā)布方式跨域請求方式可能不知道地方你不知道的

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/53133.html

相關(guān)文章

偶然發(fā)現(xiàn)了另一種跨域方式，不知道有沒有人這么玩過

摘要：眾所周知，利用瀏覽器不限制加載跨域外部資源的特性，使用標簽屬性請求接口，加載數(shù)據(jù)，在中觸發(fā)提前聲明好的函數(shù)拿到數(shù)據(jù)，前端的前輩們這一手操作簡直就是犀利。現(xiàn)代瀏覽器提供了這個，使得通過可以拿到某個元素最終應(yīng)用的樣式。眾所周知，jsonp利用瀏覽器不限制加載跨域外部資源的特性，使用script標簽src屬性請求接口，加載數(shù)據(jù)，在script中觸發(fā)提前聲明好的函數(shù)拿到數(shù)據(jù)，前端的前輩們這一...

NoraXie 2019-08-29 17:05 評論0 收藏0
偶然發(fā)現(xiàn)了另一種跨域方式，不知道有沒有人這么玩過

摘要：眾所周知，利用瀏覽器不限制加載跨域外部資源的特性，使用標簽屬性請求接口，加載數(shù)據(jù)，在中觸發(fā)提前聲明好的函數(shù)拿到數(shù)據(jù)，前端的前輩們這一手操作簡直就是犀利。現(xiàn)代瀏覽器提供了這個，使得通過可以拿到某個元素最終應(yīng)用的樣式。眾所周知，jsonp利用瀏覽器不限制加載跨域外部資源的特性，使用script標簽src屬性請求接口，加載數(shù)據(jù)，在script中觸發(fā)提前聲明好的函數(shù)拿到數(shù)據(jù)，前端的前輩們這一...

cooxer 2019-08-23 12:33 評論0 收藏0
總結(jié) XSS 與 CSRF 兩種跨站攻擊

摘要：但最近又聽說了另一種跨站攻擊，于是找了些資料了解了一下，并與放在一起做個比較。腳本中的不速之客全稱跨站腳本，是注入攻擊的一種。 XSS：跨站腳本（Cross-site scripting） CSRF：跨站請求偽造（Cross-site request forgery）在那個年代，大家一般用拼接字符串的方式來構(gòu)造動態(tài) SQL 語句創(chuàng)建應(yīng)用，于是 SQL 注入成了很流行的攻擊方式。...

jcc 2019-08-19 17:53 評論0 收藏0
「JavaScript」JS四種跨域方式詳解

摘要：超詳細并且?guī)У目缬蛑改蟻砹吮疚幕谀懔私獾耐床呗裕⑶伊私馐褂每缬蚩缬虻睦碛伞Ｊ褂梅椒ň褪菍⒎仙鲜鰲l件頁面的設(shè)置為同樣的二級域名。這兩個網(wǎng)站都是協(xié)議，端口都是，且二級域名都是。超詳細并且?guī)?Demo 的 JavaScript 跨域指南來了！本文基于你了解 JavaScript 的同源策略，并且了解使用跨域跨域的理由。 1. JSONP 首先要介紹的跨域方法必然是 JSONP。 ...

wangym 2019-08-21 10:38 評論0 收藏0
寫技術(shù)博客那點事

摘要：從現(xiàn)在開始，養(yǎng)成寫技術(shù)博客的習(xí)慣，或許可以在你的職業(yè)生涯發(fā)揮著不可忽略的作用。如果想了解更多優(yōu)秀的前端資料，建議收藏下前端英文網(wǎng)站匯總這個網(wǎng)站，收錄了國外一些優(yōu)質(zhì)的博客及其視頻資料。前言寫文章是一個短期收益少，長期收益很大的一件事情，人們總是高估短期收益，低估長期收益。往往是很多人堅持不下來，特別是寫文章的初期，剛寫完文章沒有人閱讀會有一種挫敗感，影響了后期創(chuàng)作。從某種意義上說，...

ddongjian0000 2019-08-23 15:12 評論0 收藏0