20160513 午夜俱乐部

[Gua]

(^。^)y-~~。o0 睡觉中~~~

[Kilerd]

ai 居然失效了？不可思议啊 @icedx

[icedx]

@Kilerd 我在写代码...

[ccloli]

成功借助 CSS 实现了跨域取数据，好高兴 _(:3

[archer2ee]

@ccloli 好奇 css 如何跨域的？

[ccloli]

其实就是像 JSONP 那样把需要的文本用 CSS 的 content 属性包起来，然后用 getComputedStyle 方法读元素的 content 属性 http://ccloli.com/201605/get-cross-origin-data-with-css/

其实最后还是靠文中提到的那个 csst （ https://github.com/zswang/csst ）的启发才发现可以这么玩的，之前琢磨 link DOM 的 sheet 属性并没有什么卵用

[Kilerd]

@ccloli 打不开博客，不过看起来好像挺有意思的

[DIYgod]

@ccloli 赞赞赞，学习了

[ccloli]

@Kilerd 站点用了 CloudFlare ，所以国内可能访问有些问题。 http://r6.loli.io/bYjq6f.png

JavaScript 实现部分是这一段：
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'http://ccloli.com/test/cross-origin-test.css?_=6');
link.addEventListener('load', function(event){
var div = document.createElement('div');
div.setAttribute('id', 'test');
document.body.appendChild(div);
console.log(getComputedStyle(div, '::before').content);
document.body.removeChild(div);
});
document.head.appendChild(link);

这是 CSS 的源码：
#test::before {
content: '{"data": [{"foo": "foo", "bar": "bar"}, {"foo": "bar", "bar": "foo"}], "status": 1, "message": "success"}';
}

控制台输出：
'"{\"data\": [{\"foo\": \"foo\", \"bar\": \"bar\"}, {\"foo\": \"bar\", \"bar\": \"foo\"}], \"status\": 1, \"message\": \"success\"}"'

目前发现 Chrome 和 Firefox 下 str.substr(1, str.length - 2) 就能 JSON.parse()，多余的反斜杠对解析没影响。