http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FHTML%2FFrame_FrameSet
JavaScript DHTML/HTML/Frame FrameSet - История изменений
2026-04-04T21:22:00Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/Frame_FrameSet&diff=2570&oldid=prev
в 10:02, 26 мая 2010
2010-05-26T10:02:41Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 10:02, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/Frame_FrameSet&diff=2571&oldid=prev
Admin: 1 версия
2010-05-26T07:23:02Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==A blank frameset with Javascript==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript"><br />
<!--<br />
function blankFrame() {<br />
return "<html><body></body></html>";<br />
}<br />
//--><br />
</script><br />
</head><br />
<frameset rows="50, *"><br />
<frame name="frame1" id="frame1" src="navSlice.html"><br />
<frame name="frame2" id="frame2" src="javascript:parent.blankFrame()"><br />
</frameset><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Create frameset==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script language="JavaScript" type="text/javascript"><br />
<!--<br />
function blank() {<br />
return "<html></html>";<br />
}<br />
//--><br />
</script><br />
</head><br />
<frameset cols="100,*"><br />
<frame name="navBar" src="javascript:parent.blank()"><br />
<frameset rows="70%,30%"><br />
<frame name="main" id="main" src="javascript:parent.blank();"><br />
<frame name="instrux" id="instrux" src="javascript:parent.blank();"><br />
</frameset><br />
</frameset><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Creating a Blank Frame==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<HEAD><br />
<SCRIPT LANGUAGE="JavaScript"><br />
<!--<br />
function blank() {<br />
return "<HTML></HTML>"<br />
}<br />
//--><br />
</SCRIPT><br />
</HEAD><br />
<FRAMESET><br />
<FRAME NAME="Frame1" SRC="http://www.wbex.ru"><br />
<FRAME NAME="Frame2" SRC="javascript:parent.blank()"><br />
</FRAMESET><br />
</HTML><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==File: frameset.htm==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<FRAMESET rows="33%,*,33%"><br />
<FRAME name="t_frame" src="frame1.html"><br />
<FRAME name="m_frame" src="frame2.html"><br />
<FRAME name="b_frame" src="frame3.html"><br />
</FRAMESET><br />
</HTML><br />
<br />
File: frame1.htm<br />
<HTML><br />
<HEAD><br />
<SCRIPT language="JavaScript"><br />
function twoframes(){<br />
parent.m_frame.location="frame4.html";<br />
parent.b_frame.location="frame5.html";<br />
}<br />
</SCRIPT><br />
</HEAD><br />
<BODY><br />
This is frame 1, the top frame: <A HREF="javascript:twoframes();">Change the two lower frames</A><br />
</BODY><br />
</HTML><br />
File: frame2.htm<br />
<HTML><br />
<BODY><br />
This is frame 2, the middle frame. <br />
</BODY><br />
</HTML><br />
File: frame4.htm<br />
<HTML><br />
<BODY><br />
This is frame 4, the new middle frame. <br />
</BODY><br />
</HTML><br />
<br />
File: frame5.htm<br />
<HTML><br />
<BODY><br />
This is frame 5, the new bottom frame. <br />
</BODY><br />
</HTML><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
=="frameBorder" Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<iframe id="myFrame" <br />
src="http://www.wbex.ru" <br />
width="300" <br />
frameborder="no" <br />
framespacing="5"><br />
</iframe><br />
<br><br />
<button onclick="alert(document.all.myFrame.frameBorder);">Frame Border</button><br />
<button onclick="alert(document.all.myFrame.frameSpacing);">Frame Spacing</button><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Frame "cols" Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<frameset onmouseover="alert(this.cols);" <br />
cols="20%,*" <br />
border="15px" <br />
framespacing="0"> <br />
<frame name="topFrame" noresize scrolling="NO" src="http://www.wbex.ru"><br />
<frame name="mainFrame" src="http://www.wbex.ru"><br />
</frameset><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
=="frameElement" Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
</head><br />
<body><br />
<SCRIPT LANGUAGE="JScript"><br />
var oFrame = window.frameElement;<br />
oFrame.src = "http://www.wbex.ru";<br />
</SCRIPT><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Frameset for document.URL Property Reader==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<HEAD><br />
<TITLE>document.URL Reader</TITLE><br />
</HEAD><br />
<FRAMESET ROWS="60%,40%"><br />
<FRAME NAME="Frame1" SRC="http://www.wbex.ru"><br />
<FRAME NAME="Frame2" SRC="http://www.wbex.ru"><br />
</FRAMESET><br />
</HTML><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Frameset in Javascript==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function myFunc() {<br />
parent.frames[1].document.open();<br />
parent.frames[1].document.write("frame-text.");<br />
parent.frames[1].document.close();<br />
}<br />
var topFrame = "<a href="http://www.wbex.ru" " +"onClick="parent.myFunc()">Click me</a>";<br />
var botFrame = ""; <br />
//--><br />
</script><br />
</head><br />
<frameset rows="50%,*"><br />
<frame src="javascript:parent.topFrame"><br />
<frame src="javascript:parent.botFrame"><br />
</frameset><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Frameset Navigator==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
/*<br />
JavaScript Application Cookbook<br />
By Jerry Bradenbaugh<br />
Publisher: O"Reilly <br />
Series: Cookbooks<br />
ISBN: 1-56592-577-7<br />
*/ <br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/FramesetNavigator.zip">FramesetNavigator.zip( 1 k)</a><br />
<br />
<br />
==Frameset show and hide==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
/*<br />
JavaScript Application Cookbook<br />
By Jerry Bradenbaugh<br />
Publisher: O"Reilly <br />
Series: Cookbooks<br />
ISBN: 1-56592-577-7<br />
*/ <br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/FramesetShowHide.zip">FramesetShowHide.zip( 1 k)</a><br />
<br />
<br />
=="frameSpacing" Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<frameset id="myFrameset" <br />
onload="alert(window.myFrameset.frameSpacing);" <br />
rows="200,*" <br />
border="15px" <br />
framespacing="2"> <br />
<frame name="topFrame" noresize scrolling="NO" src="http://www.wbex.ru"><br />
<frame name="mainFrame" src="http://www.wbex.ru"><br />
</frameset><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Get frame size==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!-- <br />
Example File From "JavaScript and DHTML Cookbook"<br />
Published by O"Reilly & Associates<br />
Copyright 2003 Danny Goodman<br />
--><br />
<br />
function getFrameSize(frameID) {<br />
var result = {height:0, width:0};<br />
if (document.getElementById) {<br />
var frame = parent.document.getElementById(frameID);<br />
if (frame.scrollWidth) {<br />
result.height = frame.scrollHeight;<br />
result.width = frame.scrollWidth;<br />
}<br />
}<br />
return result;<br />
}<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Handling Load Events in a Layout Document ==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<HEAD><br />
<TITLE>Handling load events in a layout document</TITLE><br />
<SCRIPT LANGUAGE="JavaScript"><!--<br />
function selectFrames(){<br />
base="frames/"<br />
newFrames=new Array("http://www.wbex.ru","http://www.wbex.ru","http://www.wbex.ru","http://www.wbex.ru","http://www.wbex.ru")<br />
window.firstFrame.location=base+newFrames[Math.round(5*Math.random())%5]<br />
window.secondFrame.location=base+newFrames[Math.round(5*Math.random())%5]<br />
}<br />
//--><br />
</SCRIPT><br />
</HEAD><br />
<FRAMESET COLS="*,*" ONLOAD="selectFrames()" ONUNLOAD="alert("Thanks for stopping by!")"><br />
<FRAME SRC="http://www.wbex.ru" NAME="firstFrame"><br />
<FRAME SRC="http://www.wbex.ru" NAME="secondFrame"><br />
</FRAMESET><br />
</HTML><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Hide and Show Frame Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<!-- <br />
Example File From "JavaScript and DHTML Cookbook"<br />
Published by O"Reilly & Associates<br />
Copyright 2003 Danny Goodman<br />
--><br />
<html><br />
<head><br />
<title>Hide/Show Frame Example</title><br />
<script language="JavaScript" type="text/javascript"><br />
/* cookies.js */<br />
/*<br />
Example File From "JavaScript and DHTML Cookbook"<br />
Published by O"Reilly & Associates<br />
Copyright 2003 Danny Goodman<br />
*/<br />
// utility function to retrieve a future expiration date in proper format;<br />
// pass three integer parameters for the number of days, hours,<br />
// and minutes from now you want the cookie to expire; all three<br />
// parameters required, so use zeros where appropriate<br />
function getExpDate(days, hours, minutes) {<br />
var expDate = new Date();<br />
if (typeof days == "number" && typeof hours == "number" && typeof hours == "number") {<br />
expDate.setDate(expDate.getDate() + parseInt(days));<br />
expDate.setHours(expDate.getHours() + parseInt(hours));<br />
expDate.setMinutes(expDate.getMinutes() + parseInt(minutes));<br />
return expDate.toGMTString();<br />
}<br />
}<br />
// utility function called by getCookie()<br />
function getCookieVal(offset) {<br />
var endstr = document.cookie.indexOf (";", offset);<br />
if (endstr == -1) {<br />
endstr = document.cookie.length;<br />
}<br />
return unescape(document.cookie.substring(offset, endstr));<br />
}<br />
// primary function to retrieve cookie by name<br />
function getCookie(name) {<br />
var arg = name + "=";<br />
var alen = arg.length;<br />
var clen = document.cookie.length;<br />
var i = 0;<br />
while (i < clen) {<br />
var j = i + alen;<br />
if (document.cookie.substring(i, j) == arg) {<br />
return getCookieVal(j);<br />
}<br />
i = document.cookie.indexOf(" ", i) + 1;<br />
if (i == 0) break; <br />
}<br />
return null;<br />
}<br />
// store cookie value with optional details as needed<br />
function setCookie(name, value, expires, path, domain, secure) {<br />
document.cookie = name + "=" + escape (value) +<br />
((expires) ? "; expires=" + expires : "") +<br />
((path) ? "; path=" + path : "") +<br />
((domain) ? "; domain=" + domain : "") +<br />
((secure) ? "; secure" : "");<br />
}<br />
// remove the cookie by setting ancient expiration date<br />
function deleteCookie(name,path,domain) {<br />
if (getCookie(name)) {<br />
document.cookie = name + "=" +<br />
((path) ? "; path=" + path : "") +<br />
((domain) ? "; domain=" + domain : "") +<br />
"; expires=Thu, 01-Jan-70 00:00:01 GMT";<br />
}<br />
}<br />
<br />
</script><br />
<script language="JavaScript" type="text/javascript"><br />
var origCols;<br />
function toggleFrame(elem) {<br />
if (origCols) {<br />
elem.firstChild.nodeValue = "<<Hide Navbar";<br />
setCookie("frameHidden", "false", getExpDate(180, 0, 0));<br />
showFrame();<br />
} else {<br />
elem.firstChild.nodeValue = "Show Navbar>>";<br />
setCookie("frameHidden", "true", getExpDate(180, 0, 0));<br />
hideFrame();<br />
}<br />
}<br />
function hideFrame() {<br />
var frameset = document.getElementById("masterFrameset");<br />
origCols = frameset.cols;<br />
frameset.cols = "0, *";<br />
}<br />
function showFrame() {<br />
document.getElementById("masterFrameset").cols = origCols;<br />
origCols = null;<br />
}<br />
// set frame visibility based on previous cookie setting<br />
function setFrameVis() {<br />
if (document.getElementById) {<br />
if (getCookie("frameHidden") == "true") {<br />
hideFrame()<br />
} <br />
}<br />
}<br />
</script><br />
</head><br />
<frameset id="masterFrameset" frameborder="no" cols="150,*" onload="setFrameVis()"><br />
<frame id="controls" name="controlsFrame" src="toc.html" /><br />
<frame id="content" name="contentFrame" src="content.html" /><br />
</frameset><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/FrameSetOnOff.zip">FrameSetOnOff.zip( 3 k)</a><br />
<br />
<br />
==Make new frameset==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!-- <br />
Example File From "JavaScript and DHTML Cookbook"<br />
Published by O"Reilly & Associates<br />
Copyright 2003 Danny Goodman<br />
--><br />
<br />
function makeNewFrameset() {<br />
var newFrame1 = document.createElement("frame");<br />
newFrame1.id = "newFrame1";<br />
newFrame1.name = "newFrame1";<br />
newFrame1.src = "altNavBar.html"<br />
var newFrame2 = document.createElement("frame");<br />
newFrame2.id = "newFrame2";<br />
newFrame2.name = "newFrame2";<br />
newFrame2.src = "altHome.html"<br />
<br />
var frameset = document.getElementById("masterFrameset");<br />
while (frameset.childNodes.length > 0) {<br />
frameset.removeChild(frameset.firstChild);<br />
}<br />
frameset.cols = null;<br />
frameset.rows = "80, *";<br />
frameset.appendChild(newFrame1);<br />
frameset.appendChild(newFrame2);<br />
}<br />
----------<br />
function makeNewFrameset() {<br />
var frag = document.createDocumentFragment();<br />
var newFrame= document.createElement("frame");<br />
newFrame.id = "newFrame1";<br />
newFrame.name = "newFrame1";<br />
newFrame.src = "altNavBar.html"<br />
frag.appendChild(newFrame);<br />
newFrame = document.createElement("frame");<br />
newFrame.id = "newFrame2";<br />
newFrame.name = "newFrame2";<br />
newFrame.src = "altHome.html"<br />
frag.appendChild(newFrame);<br />
<br />
var frameset = document.getElementById("masterFrameset");<br />
while (frameset.childNodes.length > 0) {<br />
frameset.removeChild(frameset.firstChild);<br />
}<br />
frameset.cols = null;<br />
frameset.rows = "30%, *";<br />
frameset.appendChild(frag);<br />
}<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Multiple Search Engine==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
/*<br />
JavaScript Application Cookbook<br />
By Jerry Bradenbaugh<br />
Publisher: O"Reilly <br />
Series: Cookbooks<br />
ISBN: 1-56592-577-7<br />
*/ <br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/MultipleSearchEngine.zip">MultipleSearchEngine.zip( 134 k)</a><br />
<br />
<br />
=="noResize" Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<frameset rows="50,*" frameborder="yes" border="20px" framespacing="5" cols="*"><br />
<frame id="myFrame" name="topFrame" scrolling="NO" src="http://www.wbex.ru"><br />
<script language="javascript"><br />
document.getElementById("myFrame").noResize = true;<br />
</script><br />
<frameset cols="25%,*" border="15px" framespacing="0"><br />
<frame name="leftFrame" marginheight="15" noresize scrolling="NO" src="http://www.wbex.ru"><br />
<frame name="mainFrame" src="http://www.wbex.ru"><br />
</frameset></frameset><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Parent window==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<frameset rows="100,*" frameborder="yes" border="20px" framespacing="5" cols="*"> <br />
<frame name="topFrame" scrolling="NO" noresize src="http://www.wbex.ru"><br />
<frameset cols="41%,*" border="15px" framespacing="0" rows="*"> <br />
<frame name="topFrame" src="myInnerFrame.htm"><br />
<frame name="mainFrame" src="http://www.wbex.ru"><br />
</frameset><br />
</frameset><br />
</html><br />
<!--<br />
Contents of myInnerFrame.htm:<br />
<html><br />
<head><br />
<script language="JavaScript"><br />
function P1() {<br />
alert(window.parent.mainFrame.document.all.CBP.innerText);<br />
}<br />
</script></head><br />
<body style="background-color:white;"><br />
<input type="button" value="View Content of CBP" onclick="P1();"><br />
</body><br />
</html><br />
--><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Reference to parent frame from inner frame==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<body><br />
<h1>Frame B</h1><br />
<p><a href="javascript:parent.framea.location.replace("frameb.html")">Change sibling</a></p><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
=="rows" Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script language="JavaScript"><br />
document.getElementById("yourFrameset").rows = 600;<br />
</script><br />
</head><br />
<frameset id="yourFrameset" frameborder="yes" border="20px" framespacing="5" cols="*"><br />
<frame id="topF" name="topFrame" scrolling="NO" noresize src="http://www.wbex.ru"><br />
<frame name="leftFrame" marginwidth="15" noresize scrolling="NO" src="http://www.wbex.ru"><br />
<frame name="mainFrame" src="http://www.wbex.ru"><br />
</frameset><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Window top frame==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script language="JavaScript"><br />
function function1() {<br />
var m = window.top.document.getElementById("myP").tagName; alert("Tag name: <"+m+">");<br />
} <br />
</script><br />
</head><br />
<body> <br />
<div id="myP" <br />
onClick="function1();" <br />
style="background-color:black; color:white"><br />
Click in this text to check its tag name.<br />
</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source></div>
Admin