iframe Objects and Javascript

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

Overview

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.

  mcTemp_K_UIText = document.getElementById("mcTemp_K_UIText");

 <input type="number" id="mcTemp_K_UIText" class="mcTemperature"
      value="233" size="5" maxlength="6" min=0> K

However, with iframes, the following *should* work.

Temperature_iframe = document.getElementById('mcTemperature').contentDocument; mcTemp_K_UIText = Temperature_iframe.getElementById("mcTemp_K_UIText"); <iframe src="iframes/mcTemperature.html" id="mcTemperature" width="330" height="90" frameborder="0"></iframe>

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.

Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". 
Protocols, domains, and ports must match.

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.

<script>
var mcTemperature_js_callback = parent.mcTemperature_js_callback;
</script>

Apparently - not allowed!

mcTemperature.html:37 
Uncaught SecurityError: Blocked a frame with origin "null" from accessing a 
frame with origin "null". Protocols, domains, and ports must match.

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.

temp_frame = document.getElementById('temp_frame').contentDocument;;

Well - that doesn't work either!

Insolation_Calculator.html:90 
Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': 
Blocked a frame with origin "null" from accessing a frame with origin "null". 
Protocols, domains, and ports must match.

Conclusion

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

From w3schools - IFrame contentDocument Property

The contentDocument property returns the Document object generated by a frame or iframe element.

This property can be used in the host window to access the Document object that belongs to a frame or iframe element.

Note: Because of security reasons, the contents of a document can be accessed from another document only if the two documents are located in the same domain.

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

Author: Robert Clemenzi

iframe Objects

Overview

Debug - from iframe

Debug - to iframe

Conclusion

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