iframe Objects

I have been testing various methods to produce objects to simplify web page development. One of the "suggested" techniques is to use iframes.

The short answer is - Don't waste your time!

The more complete answer is - iframes are fine if the entire application is located in a single iframe.

Overview | Debug - from iframe to iframe | Conclusion


My plan was to define my standard temperature component as an object that could be easily used in many applications. (This is the technique I use in Delphi applications and I wanted to implement the same procedure in javascript.)

I placed the basic components and associated javascript in an html file.

This is the basic code to embed an html page as an iframe. Note that the width and height must be set - the defaults do not scale and, therefore, are worthless.

At first glance, everything worked perfectly ... until I opened a debug window. That's when I discovered that the iframe is in a separate namespace from the rest of the page. In some ways, that is actually a good thing - you simply need to specify which iframe you want to access. For example, the following worked before using iframes.

However, with iframes, the following *should* work. On the face of it, this is an improvement.

However, this is a complete disaster - the javascript security protocols don't allow the main html page to access the contents of the iframe.

Now, this may, or may not, work if I try running the page from a server. However, I prefer to develop sites locally without a server - and in that configuration, the application won't run. I also run applications locally (on a laptop without internet connectivity), and this technique won't work there either.

Debug - from iframe

To debug the problem I tried to reference the main page from some code in the iframe page. The following tries to set a local iframe variable as a pointer to the function on the main page. Apparently - not allowed! All 3 files are located on the same hard drive (though they are in 3 different directories). The specification of null indicates that this may work if I use a server - but that is not an acceptable option. As a result, I did not bother to test it.

Debug - to iframe

The next debug step was to simply move all the code to the main page leaving only the html tags in the iframe page. Then I tried to access the html objects via the following. Well - that doesn't work either!


iframes are fine for an entire application, but can not be used to create reusable objects.

From w3schools - IFrame contentDocument Property

In my opinion, 2 files located on the same computer are in the same domain - Chrome 49 obviously disagrees.

Author: Robert Clemenzi
URL: http:// mc-computing.com / Languages / Javascript / iframe_objects.html