偶然發現了另外一種跨域方式，不知道有沒有人這麼玩過

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

其實實現單向的接口調用使用任何資源標籤均可以實現，關鍵在於如何取到後端傳回的數據實現雙向交互。
現代瀏覽器提供了getComputedStyle這個API，使得經過js能夠拿到某個元素最終應用的css樣式。（低版本IE中爲currentStyle）。以下所示：

如此一來，咱們就能夠在css樣式中取得想要的數據文本
1.利用僞類的::after或::before的 { content:"{數據}" } 或者利用 font-family："{數據}"

---

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

2.動態加載css樣式，並監聽其load事件，我這裏用的是靜態文件（上邊的data.css），有興趣的能夠寫個接口試下。

---

<div class="data-div" style="width:50px;height:50px;background:red;"></div>
<script>
    div = document.getElementsByClassName("data-div")[0]  //應用樣式的數據標籤
    div.onclick = function(){
        var link = document.createElement("link");
        link.rel = "stylesheet"
        link.href = "/data.css"
        link.type = "text/css"
        link.onload = function(){
            console.log(window.getComputedStyle(div)["fontFamily"]); //獲取寫在font-family屬性的數據
        }
        document.head.appendChild(link)
        
    }
</script>

3.點擊數據標籤，能夠看到輸出結果以下：

PS：這個方法和JSONP同樣須要後端配合將數據按必定的規則拼接給前端，其實放到如今並沒什麼卵用，如今已經不多有看到用JSONP實現跨域請求的。可是本身玩一玩仍是能夠的，順便致敬一波JSONP，致敬一波前輩們