利用两层iframe跨主域获取json数据

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

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.