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

cooxer 發(fā)布于2019-08-23 12:33 / 3488人閱讀

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

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

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

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/98722.html

相關(guān)文章

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

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

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

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

wthee 2019-08-02 11:48 評(píng)論0 收藏0
總結(jié) XSS 與 CSRF 兩種跨站攻擊

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

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

摘要：超詳細(xì)并且?guī)У目缬蛑改蟻?lái)了本文基于你了解的同源策略，并且了解使用跨域跨域的理由。使用方法就是將符合上述條件頁(yè)面的設(shè)置為同樣的二級(jí)域名。這兩個(gè)網(wǎng)站都是協(xié)議，端口都是，且二級(jí)域名都是。超詳細(xì)并且?guī)?Demo 的 JavaScript 跨域指南來(lái)了！本文基于你了解 JavaScript 的同源策略，并且了解使用跨域跨域的理由。 1. JSONP 首先要介紹的跨域方法必然是 JSONP。 ...

wangym 2019-08-21 10:38 評(píng)論0 收藏0
寫(xiě)技術(shù)博客那點(diǎn)事

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

ddongjian0000 2019-08-23 15:12 評(píng)論0 收藏0