Javascript IFRAME Interactive and compatible with a variety of browser solutions

In web front-end development, we often use the IFRAME control.

But this control, diplomacy, often various browsers used by different keywords, it is troublesome, in order to be able to get the child IFrame window object, each browser has the designation of each home, some window, some contentwindow and so on may also have we do not know.

But from the sub-page access to the parent layer page, which everyone is window.parent on it.

So through this feature, we can in the sub-page, the own window object to the parent page, so that the parent page is easy to access the child page, no longer worry about how to get the Window object from the IFrame object.

Apart, let's look at the code first:

Parent page Code:

Null;  function FrameReady (subwindow) {    // assignment};    

<></iframe>  

Sub-page code:

$ (function() {    window.parent.frameReady (window);}); 

With the simple code above, you can access the Iframewindow object in the parent page, and get the window object of the child page directly, which is very easy to use with no brains.

What if I have multiple iframe?

It's a little bit more complicated, but it doesn't matter. We want to continue using the above scenario and analyze the status quo:

1. We should need a collection object like Iframewindows, which manages the window object for all child pages.

2. Each sub-page, when calling Parent.frameready, must rely on a unique name on the parent page, allowing us to make precise access to each iframe in the parent page

Then this is simple, the sub-page to do is nothing more than a name, the number of what, we look at the code

Window.subwindowname = "Helloworldwindow"; $ (function() {    Window.parent.frameReady ( Window.subwindowname, window);});  

So what the parent page is going to do is refactor the FrameReady and add a parameter

Window.iframewindows = {};    // This becomes an object function frameready (name, window) {    window.iframewindows[name] = window;}; functionreturn window.iframewindows[name];}       

Summarize:

A page built with this scenario has the following advantages:

1. The interaction of the parent-child page depends only on the parent keyword (in the previous way, not only the parent, but also the other indeterminate keywords, such as contentwindow, window, and most importantly, the parent's support is very good)

2. The Window object is consolidated, reducing the chain of references that are requested each time it is used, increasing the speed of the operation

3. The most important point: The code is much easier to write.

In addition: for the window.subwindowname to build a lot of ways, this can be written dead, but also through the parent Layer page src use URL to pass in. How to use it depends on your needs.

The original address is http://www.zizhusoft.com/note/show.aspx?id=14520a63-c7e8-42e9-a87e-77aec7adab0a.

Javascript IFRAME Interactive and compatible with a variety of browser solutions