Elegant and elegant JavaScript cross-origin Problem Solution

The solution to the Cross-origin JavaScript problem is already in the previous section.ArticleFor details, see http://blog.csdn.net/sfdev/archive/2009/02/13/3887006.aspx;

In addition to the three solutions mentioned in this article, Huang fangrong's "Web Data Interaction art" at this year's Baidu salon sharing conference mentioned a very elegant and brilliant solution! If you don't talk much about it, go directly to the solution schematic:

The problems to be solved in this figure are described as follows:
Any DOM object or JS function in callback, because of cross-origin, but we often need to do something about parameter return. What should we do? The above implementation method can solve this problem well;

The key elegance of the solution is that although the browser will prohibit objects in the JS cross-origin access page, there is no restriction on hierarchical link reference of IFRAME, that is, parent is still available; this solution uses the layer-2 embedded IFRAME and the page and parent in the level-2 IFRAME. parent pages are in the same domain name relationship, so as to avoid cross-domain issues and implement data transmission between two pages,In essence, callback for Js in the parent page is implemented using parent. Parent!

Let's take a practical case:
Function Description:
Renewal page?

solution :
1. Declare a JS function process (height, width) on the index.htm page ); used to set the IFRAME height and width on the page.
Why? Height=xx&width=yy. this page does not have any content, but is used to transmit the data of the width and height after the sub-index.htm page is loaded. js in the page calls the parent directly after obtaining the parameters in the request. parent. process (height, width); finish setting the width and height of the parent page.
see the following sequence chart: