JavaScript DHTML/HTML/Frame FrameSet — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
|
Текущая версия на 10:23, 26 мая 2010
Содержание
- 1 A blank frameset with Javascript
- 2 Create frameset
- 3 Creating a Blank Frame
- 4 File: frameset.htm
- 5 "frameBorder" Example
- 6 Frame "cols" Example
- 7 "frameElement" Example
- 8 Frameset for document.URL Property Reader
- 9 Frameset in Javascript
- 10 Frameset Navigator
- 11 Frameset show and hide
- 12 "frameSpacing" Example
- 13 Get frame size
- 14 Handling Load Events in a Layout Document
- 15 Hide and Show Frame Example
- 16 Make new frameset
- 17 Multiple Search Engine
- 18 "noResize" Example
- 19 Parent window
- 20 Reference to parent frame from inner frame
- 21 Frame B
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>
<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>