偶然发现了另一种跨域方式,不知道有没有人这么玩过

Posted qianduanwriter

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了偶然发现了另一种跨域方式,不知道有没有人这么玩过相关的知识,希望对你有一定的参考价值。

众所周知,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,致敬一波前辈们



以上是关于偶然发现了另一种跨域方式,不知道有没有人这么玩过的主要内容,如果未能解决你的问题,请参考以下文章

9种跨域方式实现原理

九种跨域方式实现原理

九种跨域方式实现原理(完整版)

JavaScript 九种跨域方式实现原理

九种跨域方式实现原理(完整版)

跨域CORS原理及调用具体示例