一种不常见的跨域方式--使用CSS3特性做跨域

CSST (CSS Text Transformation)


通过CSS3的content获取内容。
利用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 里的内容了

转载自：http://alili.tech/2017/06/20/Javascript/CSST%20(CSS%20Text%20Transformation)%20%E4%BD%BF%E7%94%A8CSS3%E7%89%B9%E6%80%A7%E5%81%9A%E8%B7%A8%E5%9F%9F/