众所周知，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，致敬一波前辈们
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/101349.html原文链接：https://javaforall.net
