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

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

通过 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.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

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

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

总结解决跨域的几个方法

跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对 javascript 施加的安全限制。同源策略:是指协议,域名,端口都要相同

Vue开发环境跨域访问

Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下,这样你通过axios 或fetche访问 /api/** 便相当于跨域访问了

JSONP跨域请求数据的三种方式

原生方式需要定义一个回调函数,用来接收和处理数据。获取数据的地址包含这个回调函数名。新建一个<script>标签,地址赋值给标签的src。

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

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

node.js如何配置跨域?

在node.js中可以使用res.header()方法来配置跨域。res.header()方法可以用来设置允许跨域的域名、允许的header类型、跨域允许的请求方式等。

Angular怎么实现跨域?

跨域,前端开发中常常遇到的问题。AngularJS实现跨域方式类似于Ajax,使用CORS机制。以下阐述一下AngularJS中使用$http实现跨域请求数据。指定callback和回调函数名,函数名为JSON_CALLBACK时,会调用success回调函数。JSON_CALLBACK必须全为大写。

js跨域访问问题

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。如果进行跨域访问

你应该了解的CORS

如果你和我一样,第一次遇到 CORS (跨域资源共享),你想让服务器接收那些你拼接的 Ajax 请求并处理他们。所以你去 stackoverflow.com 复制一段代码来设置一些 HTTP Headers ,让请求可以正常工作

reactjs中配置代理跨域

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

nginx 反向代理处理跨域问题

正向代理是你发出请求的时候先经过代理服务器,所以实际上发出请求的是代理服务器。反向代理是“代理你的目标服务器”,请求目标服务器的代理,做一些处理后再真正请求。在这篇文章里,反向代理用于处理跨域问题。

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

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

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