Dynamically_Generate_InlineFrame_UsingJavscript_WithBrowser_Height_And_Width_DOM

2010-06-16

SUMMARY: How to dynamically generate an inline frame using Javascript.

RESULT: The dimensions of the inline frame match the browser windows dimensions.

WHY? I had to create this structure for my SCORM javascript architecture. I did not want to open a new window for the SCORM CONTENT (SCO) when it plays. I wanted the SCORM CONTENT SCO to be played in the same browser window.

Most of the Learning Management System (LMS) courses use flash (built with CAPTIVATE 4). Flash will allow you to dynamically resize SWF Object if you set the dimensions to be 100%. The problem is with Firefox. Firefox will not allow you to dynamically resize SWF files. It will also shrinks the SWF file to be tiny when a parent object does not exist as a container which surrounds the SWF object. SO to deail with firefox....We have to get the largest possible dimensions of the screen when the SWF originally loads (I need to get the "HIGHEST" resolution possible before I insert the flash object.)

HERE IS THE javascript which enable me to do this:

(OF COURSE THIS IS A PROTOTYPE and not the actual SCORM API application written in Javascript)

<title>DOUG LUBEY IFrame same dimensions as Screen 2010-06-16</title>

function showScreenSize() {

var currentWidth = document.getElementById("iFrameScorm").style.width;

var currentHeight = document.getElementById("iFrameScorm").style.height;

alert("iFrame propeties are: Width=" + currentWidth + " and Height=" + currentHeight +".[viewable area of the screen]");

}

function insertIFrameWithProperDimensions() {

//======================= THIS WILL NOT WORK (use the next function in place of this)

//because we are just inserting test and never letting the DOM know we are

var iframeString = "";

var viewableWindowWidth = window.innerWidth + "px";

var viewableWindowheight = window.innerHeight +"px";

iframeString = "<iframe style=\"width:" + viewableWindowWidth + "; height:" + viewableWindowheight + "; border-style:none;\" frameborder=0 name=\"iFrameScorm\" scrolling=\"no\" src=\"ScormStartPage.htm\" onload=\"javascript: helloDougLubey();\">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>";

document.getElementById("iFrameLocation").innerHTML = iframeString;

}

//=========================================================

// creates an inline frame which can be referenced by

// javascipt (DOM) with the same dimensions as viewable

// screen size

//=========================================================

function insertIFrameElement() {

var viewportwidth;

var viewportheight;

//=============================================================

// GET VIEWABLE SCREEN DIMENSIONS

//=============================================================

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined') {

viewportwidth = window.innerWidth;

viewportheight = window.innerHeight;

//troubleShooting alert("one1");

}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {

viewportwidth = document.documentElement.clientWidth;

viewportheight = document.documentElement.clientHeight;

//troubleShooting alert("two2");

}

// older versions of IE

else {

viewportwidth = document.getElementsByTagName('body')[0].clientWidth;

viewportheight = document.getElementsByTagName('body')[0].clientHeight;

//troubleShooting alert("three3");

}

viewportheight -= 40;

viewportwidth -= 25;

//=============================================================

// px is very important for Firefox/Mozilla browsers

//=============================================================

var viewableWindowWidth = viewportwidth + "px";

var viewableWindowheight = viewportheight + "px";

//=============================================================

// create the inline frame

//=============================================================

var locationToInsertNewElement = document.getElementById('iFrameLocation');

var newIFrame = document.createElement('iframe');

newIFrame.setAttribute('name', "iFrameScorm");

newIFrame.setAttribute('id', "iFrameScorm");

//newIFrame.setAttribute('src', "ScormStartPage.htm");

newIFrame.setAttribute('src', "scorm/DJL20100514.htm");

newIFrame.setAttribute('frameborder', "0");

newIFrame.setAttribute('scrolling', "no");

// for IE

newIFrame.style.cssText = "width:" + viewableWindowWidth + "; height:" + viewableWindowheight + "; border-style:none; border:0"

// for all other browsers

newIFrame.setAttribute('style', "width:" + viewableWindowWidth + "; height:" + viewableWindowheight + "; border-style:none; border:0");

locationToInsertNewElement.appendChild(newIFrame);

}

</script>

</head>

<body>

<a onclick="javascript: showScreenSize();">Show Properties Of Inline Frame</a>

</div>

</div>

<br />

</center>

</form>

//=========================================================================================================

//must run this at the bottom...because jscript executes from top to bottom

//if it was placed at the top. The elements which the function references would not be available yet

//=========================================================================================================

insertIFrameElement();

//=========================================================================================================

//does not work properly so that we can reference the "created" element with another function

//insertIFrameWithProperDimensions();

//=========================================================================================================

</script>

</body>

</html>

To note: the html file wihch loads the flash: I have also inserted code in that frame. so that a hard coded width and height is loaded if a mozilla browser runs it and if a IE or Chrome Browser runs it 100% is used. Plus for the Chrome and IE browsers

I also inserted a little window.onResize jscript. Which runs and resize the flash object.

SEARCH REFERENCES:

javascript how can I reference an html object created with

javascript dynamically

javascript reference html object created dynamically

javascript resize iframe

javascript resize div dynamically

javascript resize javascript dynamically for Flash SWF file

how to create a inline frame using javascript so that the child has the same demensions as the child

OTHER PAGES I USED AS A rEFERENCE:

http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content

http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

Other page of interest:

http://support.microsoft.com/kb/278469

Doug Lubey and Family