In web front-end development, we often use the iframe control.
However, when controlling internal and external interactions, the keywords used by each browser are often different, which is very troublesome. In order to obtain the window object in the sub-iframe, each browser has its own specifications, some are windows, some are contentWindows, and so on, and maybe there are some that we don't know.
However, just access the parent layer page from the child page, and in the original form, everyone is window.parent.
Then through this feature, we can pass our own window object to the parent page in the child page, so that the parent page can easily access the child page, and we no longer have to worry about how to get the window object from the iframe object.
Without saying a word, let's look at the code first:
Parent page code:
window.iframeWindow = null;function frameReady(subWindow){window.iframeWindow = subWindow; //Assignment}; <iframe src = "xx" ></iframe>Subpage code:
$(function(){window.parent.frameReady(window);});Through the simple code above, you can access the iframeWindow object in the parent page, and directly get the window object of the child page, which is very brainless and very useful.
What if I have multiple iframes?
This situation will be a little more complicated, but it doesn't matter. We want to continue using the above solution, so let’s analyze the current situation:
1. We should need a collection object similar to iframeWindows to manage window objects for all subpages.
2. When each child page calls parent.frameReady, it must rely on a unique name for the parent page, so that we can accurately access each iframe in the parent page.
Then it's simple now. What the subpage needs to do is nothing more than a name, number, etc. Let's look at the code
window.subWindowName = "HelloWorldWindow";$(function(){window.parent.frameReady(window.subWindowName, window);});Then what the parent page needs to do 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:
Pages built with this scheme have the following advantages:
1. The interaction of parent pages only depends on parent keywords (and in the previous way, they not only depend on parent, but also on contentWindow, window and other uncertain keywords. The most important thing is that parent support is still very good)
2. Unified window objects, reducing the reference chain requested every time they are used, and improving the speed of operation
3. The most important point: it is that the code is much easier to write.
The above is the solution to Javascript iframe interaction and compatibility with various browsers introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!