Month: August 2013

数据消费者： 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是合法的，不会违反同源策略。

数据消费者所在子域： http://page.kentphp.net/ 数据提供者所在子域： http://text.kentphp.net/ 方案 提供端搞一个proxy，用作消费端的iframe <!–提供端：http://text.kentphp.net/proxy.htm –> <!- Hey, I’m proxy–> <!–消费端：http://page.kentphp.net/page.htm–> <iframe id="proxy" src="http://text.kentphp.net/proxy.htm"> </iframe> <script> document.domain="kentphp.net"; </script> 提供端proxy和消费端设置同样的document.domain <!–提供端：http://text.kentphp.net/proxy.htm –> <script> document.domain ="kentphp.net"; </script> <!–消费端：http://page.kentphp.net/page.htm–> <script> document.domain ="kentphp.net"; </script> 消费端通过proxy发起ajax请求，但使用自己的回调函数 <!–消费端：http://page.kentphp.net/page.htm–> <script> var iframe=document.getElementById(‘proxy’); var iJs=iframe.contentWindow.$; //iframe的JS根句柄；这里之所以能拿到这个句柄，是因为本页面和proxy页面都将domain显式设置成了同一个值 iJs.get("http://text.kentphp.net/dummyJson.htm",function(data){//这里的ajax get之所以能成功，是因为proxy的原生domain和dummyJson.htm的domain相同。 alert(data); }); </script> 这样就可以了。  说明，及注意事项 1. iframe页面能把’$’函数暴露给父页面，是因为两者的domain都是kentphp.net; iframe页面能顺利请求dummyJson.htm, 是因为两者的domain都是text.kentphp.net.  也就是说， iframe有两个domain name, 一个是原生的text.kentphp.net, …

利用iframe跨子域获取json数据：方案及注意事项 Read More »