JavaScript DHTML/HTML/Frame FrameSet

Материал из Web эксперт
Версия от 10:23, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

A blank frameset with Javascript

   <source lang="html4strict">

<html> <head> <script type="text/javascript">

</script> </head> <frameset rows="50, *"> 

   <frame name="frame1" id="frame1" src="navSlice.html">
   <frame name="frame2" id="frame2" src="javascript:parent.blankFrame()">

</frameset> </html> 



 </source>


Create frameset

   <source lang="html4strict">

<html> <head> <script language="JavaScript" type="text/javascript">

</script> </head> <frameset cols="100,*"> 

   <frame name="navBar" src="javascript:parent.blank()">
   <frameset rows="70%,30%">
       <frame name="main" id="main" src="javascript:parent.blank();">
       <frame name="instrux" id="instrux"  src="javascript:parent.blank();">
   </frameset>

</frameset> </html> 



 </source>


Creating a Blank Frame

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript">

</SCRIPT> </HEAD> <FRAMESET> 

   <FRAME NAME="Frame1" SRC="http://www.wbex.ru">
   <FRAME NAME="Frame2" SRC="javascript:parent.blank()">

</FRAMESET> </HTML> 



 </source>


File: frameset.htm

   <source lang="html4strict">

<HTML> <FRAMESET rows="33%,*,33%"> <FRAME name="t_frame" src="frame1.html"> <FRAME name="m_frame" src="frame2.html"> <FRAME name="b_frame" src="frame3.html"> </FRAMESET> </HTML>

File: frame1.htm <HTML> <HEAD> <SCRIPT language="JavaScript"> function twoframes(){ 

   parent.m_frame.location="frame4.html";
   parent.b_frame.location="frame5.html";

} </SCRIPT> </HEAD> <BODY> This is frame 1, the top frame: <A HREF="javascript:twoframes();">Change the two lower frames</A> </BODY> </HTML> File: frame2.htm <HTML> <BODY> This is frame 2, the middle frame. </BODY> </HTML> File: frame4.htm <HTML> <BODY> This is frame 4, the new middle frame. </BODY> </HTML>

File: frame5.htm <HTML> <BODY> This is frame 5, the new bottom frame. </BODY> </HTML> 


 </source>


"frameBorder" Example

   <source lang="html4strict">

<html> <body> <iframe id="myFrame" 

       src="http://www.wbex.ru" 
       width="300" 
       frameborder="no" 
       framespacing="5">

</iframe>
<button onclick="alert(document.all.myFrame.frameBorder);">Frame Border</button> <button onclick="alert(document.all.myFrame.frameSpacing);">Frame Spacing</button> </body> </html> 



 </source>


Frame "cols" Example

   <source lang="html4strict">

<html> <body> <frameset onmouseover="alert(this.cols);" 

         cols="20%,*" 
         border="15px" 
         framespacing="0"> 
   <frame name="topFrame" noresize scrolling="NO" src="http://www.wbex.ru">
   <frame name="mainFrame" src="http://www.wbex.ru">

</frameset> </body> </html> 



 </source>


"frameElement" Example

   <source lang="html4strict">

<html> <head> </head> <body> <SCRIPT LANGUAGE="JScript"> 

   var oFrame = window.frameElement;
   oFrame.src = "http://www.wbex.ru";

</SCRIPT> </body> </html> 



 </source>


Frameset for document.URL Property Reader

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>document.URL Reader</TITLE> </HEAD> <FRAMESET ROWS="60%,40%"> 

   <FRAME NAME="Frame1" SRC="http://www.wbex.ru">
   <FRAME NAME="Frame2" SRC="http://www.wbex.ru">

</FRAMESET> </HTML> 


 </source>


Frameset in Javascript

   <source lang="html4strict">

<html> <head> <script language="JavaScript">

</script> </head> <frameset rows="50%,*"> <frame src="javascript:parent.topFrame"> <frame src="javascript:parent.botFrame"> </frameset> </html> 



 </source>


Frameset Navigator

   <source lang="html4strict">

/* JavaScript Application Cookbook By Jerry Bradenbaugh Publisher: O"Reilly Series: Cookbooks ISBN: 1-56592-577-7

  • / 



 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/FramesetNavigator.zip">FramesetNavigator.zip( 1 k)</a>


Frameset show and hide

   <source lang="html4strict">

/* JavaScript Application Cookbook By Jerry Bradenbaugh Publisher: O"Reilly Series: Cookbooks ISBN: 1-56592-577-7

  • / 



 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/FramesetShowHide.zip">FramesetShowHide.zip( 1 k)</a>


"frameSpacing" Example

   <source lang="html4strict">

<html> <body> <frameset id="myFrameset" 

         onload="alert(window.myFrameset.frameSpacing);" 
         rows="200,*" 
         border="15px" 
         framespacing="2">

<frame name="topFrame" noresize scrolling="NO" src="http://www.wbex.ru"> <frame name="mainFrame" src="http://www.wbex.ru"> </frameset> </body> </html> 



 </source>


Get frame size

   <source lang="html4strict">


function getFrameSize(frameID) { 

   var result = {height:0, width:0};
   if (document.getElementById) {
       var frame = parent.document.getElementById(frameID);
       if (frame.scrollWidth) {
           result.height = frame.scrollHeight;
           result.width = frame.scrollWidth;
       }
   }
   return result;

} 



 </source>


Handling Load Events in a Layout Document

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Handling load events in a layout document</TITLE> <SCRIPT LANGUAGE="JavaScript"> </SCRIPT> </HEAD> <FRAMESET COLS="*,*" ONLOAD="selectFrames()" ONUNLOAD="alert("Thanks for stopping by!")"> <FRAME SRC="http://www.wbex.ru" NAME="firstFrame"> <FRAME SRC="http://www.wbex.ru" NAME="secondFrame"> </FRAMESET> </HTML> 


 </source>


Hide and Show Frame Example

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

 "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">

<html> <head> <title>Hide/Show Frame Example</title> <script language="JavaScript" type="text/javascript"> /* cookies.js */ /* 

    Example File From "JavaScript and DHTML Cookbook"
    Published by O"Reilly & Associates
    Copyright 2003 Danny Goodman
  • /

// utility function to retrieve a future expiration date in proper format; // pass three integer parameters for the number of days, hours, // and minutes from now you want the cookie to expire; all three // parameters required, so use zeros where appropriate function getExpDate(days, hours, minutes) { 

   var expDate = new Date();
   if (typeof days == "number" && typeof hours == "number" && typeof hours == "number") {
       expDate.setDate(expDate.getDate() + parseInt(days));
       expDate.setHours(expDate.getHours() + parseInt(hours));
       expDate.setMinutes(expDate.getMinutes() + parseInt(minutes));
       return expDate.toGMTString();
   }

} // utility function called by getCookie() function getCookieVal(offset) { 

   var endstr = document.cookie.indexOf (";", offset);
   if (endstr == -1) {
       endstr = document.cookie.length;
   }
   return unescape(document.cookie.substring(offset, endstr));

} // primary function to retrieve cookie by name function getCookie(name) { 

   var arg = name + "=";
   var alen = arg.length;
   var clen = document.cookie.length;
   var i = 0;
   while (i < clen) {
       var j = i + alen;
       if (document.cookie.substring(i, j) == arg) {
           return getCookieVal(j);
       }
       i = document.cookie.indexOf(" ", i) + 1;
       if (i == 0) break; 
   }
   return null;

} // store cookie value with optional details as needed function setCookie(name, value, expires, path, domain, secure) { 

   document.cookie = name + "=" + escape (value) +
       ((expires) ? "; expires=" + expires : "") +
       ((path) ? "; path=" + path : "") +
       ((domain) ? "; domain=" + domain : "") +
       ((secure) ? "; secure" : "");

} // remove the cookie by setting ancient expiration date function deleteCookie(name,path,domain) { 

   if (getCookie(name)) {
       document.cookie = name + "=" +
           ((path) ? "; path=" + path : "") +
           ((domain) ? "; domain=" + domain : "") +
           "; expires=Thu, 01-Jan-70 00:00:01 GMT";
   }

}

</script> <script language="JavaScript" type="text/javascript"> var origCols; function toggleFrame(elem) { 

   if (origCols) {
       elem.firstChild.nodeValue = "<<Hide Navbar";
       setCookie("frameHidden", "false", getExpDate(180, 0, 0));
       showFrame();
   } else {
       elem.firstChild.nodeValue = "Show Navbar>>";
       setCookie("frameHidden", "true", getExpDate(180, 0, 0));
       hideFrame();
   }

} function hideFrame() { 

   var frameset = document.getElementById("masterFrameset");
   origCols = frameset.cols;
   frameset.cols = "0, *";

} function showFrame() { 

   document.getElementById("masterFrameset").cols = origCols;
   origCols = null;

} // set frame visibility based on previous cookie setting function setFrameVis() { 

   if (document.getElementById) {
       if (getCookie("frameHidden") == "true") {
           hideFrame()
       }  
   }

} </script> </head> <frameset id="masterFrameset" frameborder="no" cols="150,*" onload="setFrameVis()"> 

   <frame id="controls" name="controlsFrame" src="toc.html" />
   <frame id="content" name="contentFrame" src="content.html" />

</frameset> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/FrameSetOnOff.zip">FrameSetOnOff.zip( 3 k)</a>


Make new frameset

   <source lang="html4strict">


function makeNewFrameset() { 

   var newFrame1 = document.createElement("frame");
   newFrame1.id = "newFrame1";
   newFrame1.name = "newFrame1";
   newFrame1.src = "altNavBar.html"
   var newFrame2 = document.createElement("frame");
   newFrame2.id = "newFrame2";
   newFrame2.name = "newFrame2";
   newFrame2.src = "altHome.html"
   
   var frameset = document.getElementById("masterFrameset");
   while (frameset.childNodes.length > 0) {
       frameset.removeChild(frameset.firstChild);
   }
   frameset.cols = null;
   frameset.rows = "80, *";
   frameset.appendChild(newFrame1);
   frameset.appendChild(newFrame2);

}

function makeNewFrameset() { 

   var frag = document.createDocumentFragment();
   var newFrame= document.createElement("frame");
   newFrame.id = "newFrame1";
   newFrame.name = "newFrame1";
   newFrame.src = "altNavBar.html"
   frag.appendChild(newFrame);
   newFrame = document.createElement("frame");
   newFrame.id = "newFrame2";
   newFrame.name = "newFrame2";
   newFrame.src = "altHome.html"
   frag.appendChild(newFrame);
   
   var frameset = document.getElementById("masterFrameset");
   while (frameset.childNodes.length > 0) {
       frameset.removeChild(frameset.firstChild);
   }
   frameset.cols = null;
   frameset.rows = "30%, *";
   frameset.appendChild(frag);

} 



 </source>


Multiple Search Engine

   <source lang="html4strict">

/* JavaScript Application Cookbook By Jerry Bradenbaugh Publisher: O"Reilly Series: Cookbooks ISBN: 1-56592-577-7

  • / 



 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/MultipleSearchEngine.zip">MultipleSearchEngine.zip( 134 k)</a>


"noResize" Example

   <source lang="html4strict">

<html> <frameset rows="50,*" frameborder="yes" border="20px" framespacing="5" cols="*"> <frame id="myFrame" name="topFrame" scrolling="NO" src="http://www.wbex.ru"> <script language="javascript"> 

   document.getElementById("myFrame").noResize = true;

</script> <frameset cols="25%,*" border="15px" framespacing="0"> <frame name="leftFrame" marginheight="15" noresize scrolling="NO" src="http://www.wbex.ru"> <frame name="mainFrame" src="http://www.wbex.ru"> </frameset></frameset> </html> 



 </source>


Parent window

   <source lang="html4strict">

<html> <frameset rows="100,*" frameborder="yes" border="20px" framespacing="5" cols="*"> 

  <frame name="topFrame" scrolling="NO" noresize src="http://www.wbex.ru">
  <frameset cols="41%,*" border="15px" framespacing="0" rows="*"> 
      <frame name="topFrame" src="myInnerFrame.htm">
      <frame name="mainFrame" src="http://www.wbex.ru">
  </frameset>

</frameset> </html> 



 </source>


Reference to parent frame from inner frame

   <source lang="html4strict">

<html> <body>

Frame B

<a href="javascript:parent.framea.location.replace("frameb.html")">Change sibling</a>

</body> </html> 


 </source>


"rows" Example

   <source lang="html4strict">

<html> <head> <script language="JavaScript"> 

   document.getElementById("yourFrameset").rows = 600;

</script> </head> <frameset id="yourFrameset" frameborder="yes" border="20px" framespacing="5" cols="*"> <frame id="topF" name="topFrame" scrolling="NO" noresize src="http://www.wbex.ru"> <frame name="leftFrame" marginwidth="15" noresize scrolling="NO" src="http://www.wbex.ru"> <frame name="mainFrame" src="http://www.wbex.ru"> </frameset> </html> 



 </source>


Window top frame

   <source lang="html4strict">

<html> <head> <script language="JavaScript"> function function1() { 

   var m = window.top.document.getElementById("myP").tagName; alert("Tag name: <"+m+">");

} </script> </head> <body>

Click in this text to check its tag name.

</body> </html> 



 </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/Frame_FrameSet&oldid=2571»