20160513 午夜俱乐部

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

肯德基 24 小时外卖热线

› 4008-823-823

麦当劳 24 小时外卖热线

› 4008-517-517

睡觉之前和起床之后，要记得刷牙和用漱口水清洁口腔

这是一个创建于 3120 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

午夜

俱乐部

8 条回复 • 2016-05-13 08:49:48 +08:00

Kilerd

2016-05-13 00:38:44 +08:00 via Android

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

icedx

2016-05-13 00:58:07 +08:00

@Kilerd 我在写代码...

ccloli

2016-05-13 01:10:55 +08:00 via Android

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

archer2ee

2016-05-13 01:17:56 +08:00 via iPhone

@ccloli 好奇 css 如何跨域的？

ccloli

2016-05-13 01:25:18 +08:00 via Android

其实就是像 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

2016-05-13 08:29:57 +08:00 via Android

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

DIYgod

2016-05-13 08:32:55 +08:00

@ccloli 赞赞赞，学习了

ccloli

2016-05-13 08:49:48 +08:00 via Android

@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()，多余的反斜杠对解析没影响。