JAVASCRIPT

Working with IFRAME in JavaScript

This article starts by explaining the differences between FRAME, FRAMESET, and IFRAME and concludes with the concept of using JavaScript with IFRAME.

Author Info:

By: Jagadish Chaterjee

Poor Best

Rating:

/ 184

March 01, 2006

TABLE OF CONTENTS:

<html>
      <head>
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
            <script id="clientEventHandlersJS" language="javascript">
<!--
function ShowWebSite(val)
{
      document.all.myFrame.src=val;
      document.all.myFrame.style.visibility="visible";
}

function Button1_onclick() {
var v = document.all("txtWebSite").value;
ShowWebSite(v);
}
//-->
            </script>
      </head>
      <body>
            <iframe id="myFrame" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0"
                  width="100" scrolling="yes" height="100" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; Z-INDEX: 999; LEFT: 20px; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; POSITION: absolute; TOP: 100px; visibility:hidden;">
            </iframe>
            <form id="form1">
                  Enter website:<input type="text" id="txtWebSite" NAME="txtWebSite" value="http://www.yahoo.com">
                  <input type="button" value="Show" id="Button1" name="Button1" onclick="return Button1_onclick()">
            </form>
      </body>
</html>

Actually, within the above code, the “meta” tag is not necessary. Since I developed the above code using Visual Studio.NET 2003 Enterprise Architect, it was automatically added to provide its full-featured mechanisms.

The code above is explained in the next section.

Next: How to open a dynamic page in IFRAME using JavaScript: discussion >>