数据消费者: http://consumer.net/page.htm
数据提供者: http://provider.net/json.htm
方案
1.提供端搞一个provider-proxy,用作消费端的iframe
2.provider-proxy请求提供端的数据。 由于同域,所以这次请求能够成功;但是请求的结果无法直接返回给作为父frame的消费端(parent.document.callback(data)),因为当父子frame不同域时,子frame的parent.document引用会被浏览器禁止。
3.消费端要搞一个consumer-proxy
4.consumer-proxy完成最后一步(一种非常取巧的做法)
a.provider-proxy拿到返回的数据结果后,生成一个iframe(或者重用),再调用 iframe.src="http://page.net/consumer-proxy?data=" + data; 这条语句使得consumer-proxy成为provider-proxy的iframe,同时它还把数据结果作为参数传给了consumer-proxy
b.consumer-proxy被加载后,则从参数中拿到data值,然后调用 parent.parent.document.callback(data); 而parent.parent就是消费端的大页面,就这样一搞,形成了数据回路。 那么,parent.parent.document为什么是一个合法的引用?
i. 首先,parent.parent是一个合法的引用,不管同不同源
ii. 其次,consumer-proxy的域是consumer.net, parent.parent的域也是consumer.net, 所以在consumer-proxy页面里引用parent.parent.document是合法的,不会违反同源策略。