This section provides the technical information required to use JavaScript to
communicate between a HTML document referenced via iFrame and the parent HTML
document enclosing iFrame.
Lets consider a HTML document enclosing an iFrame like this:
<BODY id="parentBody"
onClick="showParentInfo();">
<P id="parentP">Hello, this is a parent frame</P> <INPUT id="parentCode" type="hidden" value="Hello from Parent"/> <DIV id="parentDisplay"></DIV> <IFRAME id="childFrame" src="childFrame.html" scrolling="yes" frameborder="0" height="400" width="400"> <p>Your browser does not support iframes.</p> <IFRAME> </BODY>
with a JS function:
function showParentInfo()
{
var iFrame = window.parent.document.getElementById("childFrame"); var iFrameDocument = iFrame.contentDocument? iFrame.contentDocument: iFrame.contentWindow.document; iFrameDocument.getElementById('childDisplay').innerHTML = this.document.getElementById("parentCode").value;
}
And the iFrame content can be something like this: <DIV id="childBody" onClick="showchildinfo();"> <P>Hello, this is a child frame</P> <INPUT id="childCode" value= "Hello from Child"/> <DIV id="childDisplay"></DIV> </DIV> with a JS function: function showchildinfo() { var document = window.parent.document; document.getElementById('parentDisplay').innerHTML = this.document.getElementById("childCode").value; } Parent to Child Window Communication: To access the DOM elements/Javascript fucntions of the HTML document referenced from iFrame, we need to get the below references: 1. Reference to the iFrame Element var iFrame = window.parent.document.getElementById("childFrame"); 2. Reference to the Document object of the source referenced by the iFrame var iFrameDocument = iFrame.contentDocument? iFrame.contentDocument: iFrame.contentWindow.document; Once we have the DOM Element reference, any element type can be accessed and manipulated. For example, here we are pushing a hidden input's value from parent document to the HTML document's DIV Element referenced from iFrame: iFrameDocument.getElementById('childDisplay').innerHTML = this.document.getElementById("parentCode").value; And the JavaScript fucntion can be accessed in a similar way: iFrameDocument.showchildinfo(); Child to Parent Window Communication: To access the DOM elements/Javascript fucntions of the HTML document enclosing the iFrame, the parent window's document object has to be retrieved: var document = window.parent.document; Once we have the DOM object, DOM elements/JavaScript fucntions can be accessed: DOM Element: document.getElementById('parentDisplay').innerHTML = this.document.getElementById("childCode").value; Javascript Fucntion: window.parent.document.showparentinfo(); |
Showing posts with label Web App Development. Show all posts
Showing posts with label Web App Development. Show all posts
Thursday, November 8, 2012
Communication with an iFrame
Saturday, August 11, 2012
Styling for inline elements
HTML elements are displayed either in block or inline style:
Block: Always displayed with new line before and after the element consuming the whole
width available by default.
Inline: Does not force new lines before and after its placement consuming only necessary space by default.
The span tag in HTML is an inline element by default (display:inline). When applied styles using CSS for a span element, some of the styles (like width, padding, etc) did not work when opened the page on an Android browser; it was the same issue on few web browsers too (IE 8 and Firefox 14).
When the display style was overridden as "display:inline-block", the style changes worked on the Android browser.
Please note that style "display:inline-block" places the HTML element as an inline element (i.e., elements are placed without line break) and also applies the styles which were not working with inline display.
"display:block" also would work. However choosing betweem block/inline-block depends on the new line spacing requirement between HTML elements.
Block: Always displayed with new line before and after the element consuming the whole
width available by default.
Inline: Does not force new lines before and after its placement consuming only necessary space by default.
The span tag in HTML is an inline element by default (display:inline). When applied styles using CSS for a span element, some of the styles (like width, padding, etc) did not work when opened the page on an Android browser; it was the same issue on few web browsers too (IE 8 and Firefox 14).
When the display style was overridden as "display:inline-block", the style changes worked on the Android browser.
Please note that style "display:inline-block" places the HTML element as an inline element (i.e., elements are placed without line break) and also applies the styles which were not working with inline display.
"display:block" also would work. However choosing betweem block/inline-block depends on the new line spacing requirement between HTML elements.
Subscribe to:
Posts (Atom)
