资讯专栏INFORMATION COLUMN

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

NoraXie / 635人阅读

摘要:众所周知,利用浏览器不限制加载跨域外部资源的特性,使用标签属性请求接口,加载数据,在中触发提前声明好的函数拿到数据,前端的前辈们这一手操作简直就是犀利。现代浏览器提供了这个,使得通过可以拿到某个元素最终应用的样式。

众所周知,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),有兴趣的可以写个接口试下。

3.点击数据标签,可以看到输出结果如下:

PS:这个方法和JSONP一样需要后端配合将数据按一定的规则拼接给前端,其实放到现在并没什么卵用,现在已经很少有看到用JSONP实现跨域请求的。但是自己玩一玩还是可以的,顺便致敬一波JSONP,致敬一波前辈们

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114089.html

相关文章

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

    摘要:众所周知,利用浏览器不限制加载跨域外部资源的特性,使用标签属性请求接口,加载数据,在中触发提前声明好的函数拿到数据,前端的前辈们这一手操作简直就是犀利。现代浏览器提供了这个,使得通过可以拿到某个元素最终应用的样式。 众所周知,jsonp利用浏览器不限制加载跨域外部资源的特性,使用script标签src属性请求接口,加载数据,在script中触发提前声明好的函数拿到数据,前端的前辈们这一...

    wthee 评论0 收藏0
  • 偶然发现了另一种跨域方式知道没有这么玩过

    摘要:众所周知,利用浏览器不限制加载跨域外部资源的特性,使用标签属性请求接口,加载数据,在中触发提前声明好的函数拿到数据,前端的前辈们这一手操作简直就是犀利。现代浏览器提供了这个,使得通过可以拿到某个元素最终应用的样式。 众所周知,jsonp利用浏览器不限制加载跨域外部资源的特性,使用script标签src属性请求接口,加载数据,在script中触发提前声明好的函数拿到数据,前端的前辈们这一...

    cooxer 评论0 收藏0
  • 总结 XSS 与 CSRF 两种跨站攻击

    摘要:但最近又听说了另一种跨站攻击,于是找了些资料了解了一下,并与放在一起做个比较。脚本中的不速之客全称跨站脚本,是注入攻击的一种。 XSS:跨站脚本(Cross-site scripting) CSRF:跨站请求伪造(Cross-site request forgery) 在那个年代,大家一般用拼接字符串的方式来构造动态 SQL 语句创建应用,于是 SQL 注入成了很流行的攻击方式。...

    jcc 评论0 收藏0
  • 「JavaScript」JS四种跨域方式详解

    摘要:超详细并且带的跨域指南来了本文基于你了解的同源策略,并且了解使用跨域跨域的理由。使用方法就是将符合上述条件页面的设置为同样的二级域名。这两个网站都是协议,端口都是,且二级域名都是。 超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由。 1. JSONP 首先要介绍的跨域方法必然是 JSONP。 ...

    wangym 评论0 收藏0
  • 写技术博客那点事

    摘要:从现在开始,养成写技术博客的习惯,或许可以在你的职业生涯发挥着不可忽略的作用。如果想了解更多优秀的前端资料,建议收藏下前端英文网站汇总这个网站,收录了国外一些优质的博客及其视频资料。 前言 写文章是一个短期收益少,长期收益很大的一件事情,人们总是高估短期收益,低估长期收益。往往是很多人坚持不下来,特别是写文章的初期,刚写完文章没有人阅读会有一种挫败感,影响了后期创作。 从某种意义上说,...

    ddongjian0000 评论0 收藏0

发表评论

0条评论

NoraXie

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<