iframe and javascript

Introduction to Iframes

Iframes, or inline frames, allow you to load separate html files into an existing document. Iframes can be placed anywhere in the document flow. CSS and JavaScript can be used to manipulate properties of the iframe, such as its position and size. JavaScript can also be used to pass data back and forth between the document containing the iframe and the document loaded into it.

The following demonstrates an iframe with basic attribute settings:


The iframe’s src attribute specifies the URL of the document to be displayed in the iframe.

The document loaded into the iframe does not inherit styles such as font, colors or background from the containing document. Styles to be applied to iframe content need to be included in that document in the usual ways, i.e., linked, embedded, etc.

Communication to and from Iframes

The document containing the iframe can obtain references to properties and elements in the iframed document through contentDocument or contentWindow properties. The contentDocument property has broad support among current browsers, including Internet Explorer 8+, Firefox, Chrome, Safari and Opera. The contentWindow property is supported by Internet Explorer 5.5+, Firefox, Chrome, Safari and Opera.

we can have something like this

	this.getIFrameDocument = function(p_iframe)
	{
		var iframe_doc = null;
		if (p_iframe.contentDocument) {
			// Firefox
			iframe_doc = p_iframe.contentDocument;
		}
		else if (p_iframe.contentWindow.document) {
			// IE post 5.5
			iframe_doc = p_iframe.contentWindow.document;
		}
		else if (p_iframe.document) {
			// IE pre 5.5
			iframe_doc = p_iframe.document
		}
		return iframe_doc;
	}

References from Iframed Document

frameElement: A frameElement property provides access to the iframe element in which the iframed document resides. This property is supported by current browsers, including Internet Explorer 5.5+, Firefox, Chrome, Safari and Opera. The iframed document can get a reference to the id of its containing iframe element as follows:

window.frameElement.id;

The iframed document can also gain access to parentNode, previousSibling, offsetHeight, and many other properties through its frameElement; for example:

window.frameElement.offsetHeight;

parent: The document located inside the iframe can refer to any object available in the window or document containing the iframe via the parent keyword. For example, the id of a form in the containing document can be obtained using:

parent.document.getElementById('testForm');

Same Origin Policy

The same origin policy is a security feature of JavaScript that prevents access to properties and methods of documents from different domains. In other words, if the containing document and the iframed document are not from the same domain, attempts to reference each other’s objects will result in access denied or similar error messages.

The document.domain property can be set to ease the restriction somewhat. For example, if a document at http://www.example.com wants to communicate with a document at forums.example.com, the document.domain property could be set to example.com in both documents to allow JavaScript interaction between them.

example:

try {
 document.domain = 'finra.org';
 }
 catch(e) {
 }

HTML5 introduces cross-document messaging using postMessage which is designed to enable documents from separate domains to communicate with each other while still providing protection from cross-site scripting attacks.

The postMessage method is supported by Internet Explorer 8+, Firefox 3+, Opera 10, Safari and Chrome. There is a jQuery PostMessage Plugin as well as other code that provides fallback mechansims for older browsers. See an article on Cross-Domain Communication with IFrames by Michael Mahemoff for more information.

Advertisements

One comment

  1. SutoCom · January 30, 2014

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s