JavaScript DHTML/HTML/Frame FrameSet

Материал из Web эксперт
Перейти к: навигация, поиск

A blank frameset with Javascript

  
<html>
<head>
<script type="text/javascript">
<!--
function blankFrame() {
    return "<html><body></body></html>";
}
//-->
</script>
</head>
<frameset rows="50, *">
    <frame name="frame1" id="frame1" src="navSlice.html">
    <frame name="frame2" id="frame2" src="javascript:parent.blankFrame()">
</frameset>
</html>



Create frameset

  
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function blank() {
    return "<html></html>";
}
//-->
</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>



Creating a Blank Frame

  
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function blank() {
     return "<HTML></HTML>"
}
//-->
</SCRIPT>
</HEAD>
<FRAMESET>
    <FRAME NAME="Frame1" SRC="http://www.wbex.ru">
    <FRAME NAME="Frame2" SRC="javascript:parent.blank()">
</FRAMESET>
</HTML>



File: frameset.htm

  
<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>



"frameBorder" Example

  
    
<html>
<body>
<iframe id="myFrame" 
        src="http://www.wbex.ru" 
        width="300" 
        frameborder="no" 
        framespacing="5">
</iframe>
<br>
<button onclick="alert(document.all.myFrame.frameBorder);">Frame Border</button>
<button onclick="alert(document.all.myFrame.frameSpacing);">Frame Spacing</button>
</body>
</html>



Frame "cols" Example

  
    
<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>



"frameElement" Example

  
    
<html>
<head>
</head>
<body>
<SCRIPT LANGUAGE="JScript">
    var oFrame = window.frameElement;
    oFrame.src = "http://www.wbex.ru";
</SCRIPT>
</body>
</html>



Frameset for document.URL Property Reader

  
<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>



Frameset in Javascript

  
<html>
<head>
<script language="JavaScript">
<!--
function myFunc() {
  parent.frames[1].document.open();
  parent.frames[1].document.write("frame-text.");
  parent.frames[1].document.close();
}
var topFrame = "<a href="http://www.wbex.ru" " +"onClick="parent.myFunc()">Click me</a>";
var botFrame = "";  
//-->
</script>
</head>
<frameset rows="50%,*">
<frame src="javascript:parent.topFrame">
<frame src="javascript:parent.botFrame">
</frameset>
</html>



Frameset Navigator

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


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


Frameset show and hide

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


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


"frameSpacing" Example

  
    
<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>



Get frame size

  
<!-- 
     Example File From "JavaScript and DHTML Cookbook"
     Published by O"Reilly & Associates
     Copyright 2003 Danny Goodman
-->

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;
}



Handling Load Events in a Layout Document

  
<HTML>
<HEAD>
<TITLE>Handling load events in a layout document</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function selectFrames(){
 base="frames/"
 newFrames=new Array("http://www.wbex.ru","http://www.wbex.ru","http://www.wbex.ru","http://www.wbex.ru","http://www.wbex.ru")
 window.firstFrame.location=base+newFrames[Math.round(5*Math.random())%5]
 window.secondFrame.location=base+newFrames[Math.round(5*Math.random())%5]
}
//-->
</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>



Hide and Show Frame Example

  
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 
     Example File From "JavaScript and DHTML Cookbook"
     Published by O"Reilly & Associates
     Copyright 2003 Danny Goodman
-->
<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>


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


Make new frameset

  
<!-- 
     Example File From "JavaScript and DHTML Cookbook"
     Published by O"Reilly & Associates
     Copyright 2003 Danny Goodman
-->

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);
}



Multiple Search Engine

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


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


"noResize" Example

  
    
<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>



Parent window

  
    
<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>
<!--
Contents of myInnerFrame.htm:
<html>
<head>
<script language="JavaScript">
function P1() {
   alert(window.parent.mainFrame.document.all.CBP.innerText);
}
</script></head>
<body style="background-color:white;">
<input type="button" value="View Content of CBP" onclick="P1();">
</body>
</html>
-->



Reference to parent frame from inner frame

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



"rows" Example

  
    
<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>



Window top frame

  
    
<html>
<head>
<script language="JavaScript">
function function1() {
    var m = window.top.document.getElementById("myP").tagName; alert("Tag name: <"+m+">");
} 
</script>
</head>
<body> 
<div id="myP" 
      onClick="function1();" 
      style="background-color:black; color:white">
Click in this text to check its tag name.
</div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/Frame_FrameSet&oldid=2571»