An iframe pubic function
Testing an iframe's pubic function. window.print()
HTML
<h1>An iframe report viewer</h1>
<iframe id="myFrame" src="about:blank"></iframe>
<p>Print button inside iframe onclick() event handler calls "window.print()" and this prints entire contents of the iframe and the page contents outside the iframe do not print. (CSS style included in the Javascript myContent variable styles the printing of the iframe contents and allows for the removal of the print button.)</p>
<!-- <a class="fancybox" href="#">Open FanceyBox</a> //-->
<button onclick="call_iframe_Function();">Print contents of iframe</button>
<button onclick="call_getTitle_Function();">Get iframe title</button>
<p>The below issue may be only a problem with IE and with IE8 at that.</p>
<p>The print button on the parent page calls the public function "printContent" which, like the "onclick() event handler", also calls "window.print() but now the content of the parent window is printed.</p>
<p>What I find interesting is the call to the public function "getDocTitle()" which returns "window.document.title" DOES return the title of the document displayed in the iframe. For the behavior to be consistent, would you not expect the title of the parent window's document to be returned?</p>
<p>The fix for the IE issue is to add a call to "window.focus();" prior to the call to "window.print()" in the "printContent()" function.</p>
CSS
#myFrame { margin:20px 0 0 20px; }
h1, p, a, button{margin:20px;}
h1{font-weight:bold; font-size:20px;}
JavaScript
var myContent = '<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><title>iframe document title</title><style type=\"text/css\">@media screen{html,body{margin:0;padding:0;height:100%;width:100%}p{padding:5px;}#btn{margin:5px 0 0 5px;}}@media print{#btn{display:none;}p{margin:100px;}}</style></head><body><button onclick=\"window.print(); return false;\" id=\"btn\">Print styled contents of this iframe</button><p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Pellentesque ante felis, euismod ac volutpat vitae, viverra quis augue. Sed purus ligula, volutpat sed vehicula ornare, sodales sit amet enim. Vivamus quis ultrices turpis. In suscipit gravida metus posuere dignissim. In non urna nisl. Vivamus leo odio, semper vitae sagittis eget, venenatis non magna. Nulla nibh dolor, malesuada eget vulputate a, imperdiet ac neque. Praesent velit quam, sollicitudin ut lobortis vitae, consectetur eget eros. Integer iaculis lobortis tellus, non ornare nulla faucibus et. Vivamus elit eros, feugiat quis mollis vitae, condimentum a lectus. In eu diam consequat dui lobortis iaculis sit amet at neque.</p><script type=\"text/javascript\">window.printContent = function(){/*window.focus();*/window.print();alert(\"Finished\");};function getDocTitle(){return window.document.title}<\/script></body></html>';
// Init the iframe
var oIframe = document.getElementById('myFrame');
var iframeDoc = (oIframe.contentWindow.document || Iframe.contentDocument );
iframeDoc.open();
iframeDoc.write(myContent);
iframeDoc.close();
// iframe initialized
// call to public function
function call_iframe_Function() {
//var iframe = document.getElementById("myFrame");
//iframe.contentWindow.printContent();
var el = document.getElementById('myFrame');
if(el.contentWindow) {
el.contentWindow.printContent();
} else...