Javascript IFRAME Interactive and compatible with various browser solutions _javascript tips

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

But this control, diplomatic interaction, often used in different browsers, the keyword is very troublesome, in order to be able to get the window object in the child iframe, the browser has the designation of various homes, some windows, some Contentwindow and so on maybe we do not know.

But from the child page to access the parent layer page, it is all window.parent on it.

So through this feature, we can in the child page, we can pass the window object to the parent page, so that the parent page is easy to access the child page, no longer rely on how to get the Window object from the IFrame object.

Apart, let's look at the code first:

Parent page Code:

Window.iframewindow = null;
function FrameReady (subwindow) {
Window.iframewindow = subwindow;//Assignment
}; 

Child Page Code:

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

Through the simple code above, you can access the Iframewindow object in the parent page, get the Window object of the child page directly, very no brain also very easy to use.

What if I have multiple iframe?

This situation can be a little more complicated, but it doesn't matter. We would like to continue to use the above plan, we will analyze the status quo:

1. We should need a similar Iframewindows collection object for managing All Child page window objects.

2. When calling Parent.frameready, each subpage must rely on a unique name on the parent page, allowing us to have accurate access to each iframe in the parent page

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

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

So what the parent page does is refactor FrameReady and add a parameter

Window.iframewindows = {}; This becomes an object
function FrameReady (name, window) {
window.iframewindows[name] = window;
function Getsubwindow (name) {return
window.iframewindows[name];
}

Summarize:

The following benefits are available for pages built through this scenario:

1. The interaction of a parent-child page relies solely on the parent keyword (which, in the previous approach, relies not only on parent, but also on Contentwindow, window, and other indeterminate keywords, and most importantly, the support of the parent is very good)

2.window object unification, reduce the request for each use of the reference chain, improve the running speed

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

The above is a small set to introduce the JavaScript IFRAME Interactive and compatible with a variety of browser solutions, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!