使用CSS3特性做跨域,跨域还可以这样玩

时间: 2017-11-22阅读: 3341标签: 跨域

通过 css3 的 content 获取内容,很有意思的一个思路,实际场景中有可能用的到:

cssT (css Text Transformation)

利用js动态创建一个link插入到文档中, 请求css文件.

利用 computedStyle = window.getComputedStyle 获取指定元素的 style 对象

利用 computedStyle .content 获取内容


服务端可以返回的 css 文件内容:

@keyframes anima {
  from {}
  to {
    opacity: 0;
  }
}
@-webkit-keyframes anima {
  from {}
  to {
    opacity: 0;
  }
}
#cssT {
  content: "${text}";
  animation: anima 2s;
  -webkit-animation: anima 2s;
}


${text}就是我们要填充的数据

监听函数 animationstart/webkitAnimationStart 来判断css是否加载完成

给#cssT元素设置动画

js逻辑:

function handle () {
  var computedStyle = getComputedStyle(span, false);
  var content = computedStyle.content;
  console.log('content: %s', content);
  var match = content.match(/[\w+=\/]+/);
  // base64解码
  if (match) {
      try {
          content = decodeURIComponent(escape(atob(match[0])));
      } catch (ex) {
          fn(ex);
          return;
      }
  }
  return content
}
var cssT = document.getElementById('cssT');
//监听事件
CSST.addEventListener('animationstart', handler, false);
CSST.addEventListener('webkitAnimationStart', handler, false);


元素动画启动,就可以获取到 content 里的内容了

原文:跨域还可以这样玩,使用CSS3特性做跨域

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/151

缓存竟也能导致跨域问题!

由于页面设计需要,页面展示图片,并可点击下载按钮进行下载(需要前端打包多个图片,所以需要使用ajax请求图片获得二进制内容,不能直接使用img或a进行下载),如图:

vue项目打包后怎样优雅的解决跨域

在使用vue.js开发前端项目时,再结合webpack搞起各种依赖、各种插件进行开发,无疑给前端开发带来了很多便捷,就在解决跨域这个问题上,相信众多用vue.js的前端同僚们同我一样尝到了甜头

原生JS简单封装JSONP跨域获取数据

将跨域请求的链接和参数以链接的方式提交给服务器,同时在链接中附带本地接收JSONP数据函数的函数名,当服务器查找数据完毕后,调用该函数,并将数据以函数参数形式传出。

JavaScript跨域问题总结

CORS(Cross-Origin Resource Sharing)跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败

vue-cli3 中跨域解决方案

此方案只能用于开发环境,线上最好设置同源策略(遇到个后端,装你妈批),前后端不在同一服务器的情况下,前端要访问后端API,可通过在vue.config.js中配置代理服务器。

如何用Nginx解决前端跨域问题?

在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调。最简单的解决方法,就是把浏览器设为忽略安全问题,设置--disable-web-security。

reactjs中配置代理跨域

第一步,下载依赖 http-proxy-middleware;第二步,在src下建立setupProxy.js;第三步,在数据请求中直接请求,在真实url后添加/api即可,eg

CORS跨域请求

浏览器的同源策略会导致跨域,这里同源策略又分为以下两种:DOM同源策略、XmlHttpRequest同源策略。只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。

web网站ajax跨域方法总结与解决方案

web前端的同学如果使用ajax,如果请求后端地址和页面访问的地址“URL的首部”不同就会出现访问被拒绝的情况,这就需要跨域来解决前后端的通讯问题,下面将列举一些在实际项目中应用也是比较多的方法。

JSONP技术栈_jsonp的使用

JSONP方案:前端提供 API 的方法,其实解耦还没有解的很干净,我们在设置script的src时直接给它传参,后端插入这个参数这就可以了。因为JSONP是通过动态创建Script实现的,动态创建Script只有GET请求没有POST请求

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广