当前位置: 首页 > Web前端 > HTML

无意中发现了另一种跨域方法,不知道有没有人这样玩过

时间:2023-04-02 11:25:55 HTML

众所周知,jsonp利用了浏览器无限加载跨域外部资源的特性,使用script标签src属性请求接口,加载数据,在脚本中加载数据,从而触发pre-declared函数获取数据,前端前辈简直犀利。事实上,任何资源标签都可以用来实现单向接口调用。关键在于如何获取后端返回的数据,实现双向交互。现代浏览器都提供了getComputedStyleAPI,这样就可以通过js获取最终应用到一个元素上的css样式。(低版本IE中的currentStyle)。如下图:这样我们就可以在css样式中得到想要的数据文本1.使用伪类::after或::before{content:"{data}"}或者使用font-family:"{data}"data.csscode.data-div{font-family:"{a:'1'}";}2.动态加载css样式并监听它们的加载事件。我这里用的是静态文件(上面的data.css),有兴趣的可以自己写个接口试试看。

3、点击数据标签,可以看到输出结果如下:PS:这个方法,和JSONP一样,需要后台配合,按照一定的规则将数据拼接到前台。使用JSONP实现跨域请求。不过自己玩还是可以的。顺便向一波JSONP和一波前辈致敬