Use Frame, FrameSet, iFrame._useframe-CSDN博客

博客介绍了HTML中frameSet、frame和iframe的概念、定义及区别。frame是frameset子元素，iframe可用于动态加载内容提升页面性能。还给出了使用frameset和iframe的代码示例，以及JavaScript访问框架内定义的方法，同时提及了iframe使用的注意事项。

What is frame, frameSet, iframe?

frameSet:
An HTML document that describes frame layout (called a frameset document) has a different makeup than an HTML document without frames. A standard document has one HEAD section and one BODY. A frameset document has a HEAD, and a FRAMESET in place of the BODY.

Elements that might normally be placed in the BODY element must not appear before the first FRAMESET element or the FRAMESET will be ignored.

The definition from frameset from W3C
<![ %HTML.Frameset; [
<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- window subdivision-->
<!ATTLIST FRAMESET
%coreattrs;                          -- id, class, style, title --
rows        %MultiLengths; #IMPLIED -- list of lengths,
                                          default: 100% (1 row) --
cols        %MultiLengths; #IMPLIED -- list of lengths,
                                          default: 100% (1 col) --
onload      %Script;       #IMPLIED -- all the frames have been loaded --
onunload    %Script;       #IMPLIED -- all the frames have been removed --
>
]]>

frame :
The FRAME element defines a frame--a rectangular subspace within a Frameset document. Each FRAME must be contained within a FRAMESET that defines the dimensions of the frame

<![ %HTML.Frameset; [

<!ELEMENT FRAME - O EMPTY              -- subwindow -->
<!ATTLIST FRAME
%coreattrs;                          -- id, class, style, title --
longdesc    %URI;          #IMPLIED -- link to long description
                                          (complements title) --
name        CDATA          #IMPLIED -- name of frame for targetting --
src         %URI;          #IMPLIED -- source of frame content --
frameborder (1|0)          1         -- request frame borders? --
marginwidth %Pixels;       #IMPLIED -- margin widths in pixels --
marginheight %Pixels;      #IMPLIED -- margin height in pixels --
noresize    (noresize)     #IMPLIED -- allow users to resize frames? --
scrolling   (yes|no|auto) auto      -- scrollbar or none --
>
]]>

iframe :
IFRAME is that an inline frame can act as a target for other links.
The content of the IFRAME element is used as an alternative for browsers that are not configured to show or do not support inline frames. The content may consist of inline or block-level elements, though any block-level elements must be allowed inside the containing element of IFRAME
(what is are block-level elements -- http://www.htmlhelp.com/reference/html40/block.html)

<!ELEMENT IFRAME - - (%flow;)*         -- inline subwindow -->
<!ATTLIST IFRAME
%coreattrs;                          -- id, class, style, title --
longdesc    %URI;          #IMPLIED -- link to long description
                                          (complements title) --
name        CDATA          #IMPLIED -- name of frame for targetting --
src         %URI;          #IMPLIED -- source of frame content --
frameborder (1|0)          1         -- request frame borders? --
marginwidth %Pixels;       #IMPLIED -- margin widths in pixels --
marginheight %Pixels;      #IMPLIED -- margin height in pixels --
scrolling   (yes|no|auto) auto      -- scrollbar or none --
align       %IAlign;       #IMPLIED -- vertical or horizontal alignment --
height      %Length;       #IMPLIED -- frame height --
width       %Length;       #IMPLIED -- frame width --
>

If your page contain something like a Address Book you can place it into a iframe, thus, it is not necessay to retrieve all the information from database when client request such page, you can design a link in the page to post the corresponding contact info into the iframe dynamically rather then init it when opening the page, this will make your page perform quite fast

you can use such syntax:

</form>

What is the different between frame and iframe?
frame is a sub element of frameset, in W3C document, it describe that "Each FRAME must be contained within a FRAMESET", however, iframe didn't, you can include it in a common sense document.

Another way to embed a document:
User tag Object instead.

===========================================================================================
Javascript part.

===========================================================================================
How to access the js defined within the page of frames?

http://www.quirksmode.org/js/frameintro.html

===========================================================================================
Code Example. Use FrameSet
===========================================================================================

---------------------------------------------main.html-----------------------------<html>
<head>
<script language="javascript">
var tag_main = "tag_main";

function mainFunction() {
alert("This is the function main page");
}
</script>

</head>

</html>

------------------------------------------lower.html---------------------------------------

<html>
<head>
<script language="javascript">
var tag_lower = "tag_lower"
</script>
</head>
<body>
Lower</br>
</body>t
</html>

------------------------------------------text.html---------------------------------------
<html>
<head>
<script language="javascript">
var tag_text = "tag_text"
</script>
</head>
<body>
Text</br>
</body>
</html>
---------------------------------------------logo.html-----------------------------
<html>
<head>
<script language="javascript">
var tag_logo = "tag_logo"
function onLeftPageClick(tag) {
    if (tag == "navi") {
        alert('Access a js variable in the navi window : ' + self.parent.navipage.tag_navi);
    } else if (tag == "upper") {
        alert('Access a js variable in the upper window : ' + self.parent.content.upperpage.tag_upper);
    } else if (tag == "text") {
        alert('Access a js variable in the text window : ' + self.parent.content.textpage.tag_text);
    } else if (tag == "lower") {
        alert('Access a js variable in the lower window : ' + self.parent.content.lowerpage.tag_lower);
    }
}
</script>
</head>
<body>
LOGO<br>
<button onclick="onLeftPageClick('navi')">Call Navi</button>
<button onclick="onLeftPageClick('upper')">Call Upper</button>
<button onclick="onLeftPageClick('text')">Call Text</button>
<button onclick="onLeftPageClick('lower')">Call Lower</button>
</body>
</html>

---------------------------------------------navi.html-----------------------------
<html>
<head>
<script language="javascript">
var tag_navi = "tag_navi"
function onLeftPageClick(tag) {
    if (tag == "logo") {
        alert('Access a js variable in the navi window : ' + self.parent.logopage.tag_logo);
    } else if (tag == "upper") {
        alert('Access a js variable in the upper window : ' + self.parent.content.upperpage.tag_upper);
    } else if (tag == "text") {
        alert('Access a js variable in the text window : ' + self.parent.content.textpage.tag_text);
    } else if (tag == "lower") {
        alert('Access a js variable in the lower window : ' + self.parent.content.lowerpage.tag_lower);
    }
}
</script>
</head>
<body>
Navi</br>
<button onclick="onLeftPageClick('logo')">Call Logo</button>
<button onclick="onLeftPageClick('upper')">Call Upper</button>
<button onclick="onLeftPageClick('text')">Call Text</button>
<button onclick="onLeftPageClick('lower')">Call Lower</button></body>
</html>
--------------------------------------------upper.html-----------------------------

<html>
<head>
<script language="javascript">
var tag_upper = "tag_upper"
function onLeftPageClick(tag) {
    if (tag == "logo") {
        alert('Access a js variable in the logo window : ' + self.parent.parent.logopage.tag_logo);
    } else if (tag == "navi") {
        //top will redirect to the outmost one.
        alert('Access a js variable in the navi window : ' + top.navipage.tag_navi);
    } else if (tag == "text") {
        alert('Access a js variable in the text window : ' + self.parent.textpage.tag_text);
    } else if (tag == "lower") {
        alert('Access a js variable in the lower window : ' + self.parent.lowerpage.tag_lower);
    }
}
</script>
</head>
<body>
Upper</br>
<button onclick="onLeftPageClick('navi')">Call Navi</button>
<button onclick="onLeftPageClick('logo')">Call Logo</button>
<button onclick="onLeftPageClick('text')">Call Text</button>
<button onclick="onLeftPageClick('lower')">Call Lower</button>
</body>
</html>
---------------------------------------------content.html--------------------------
<html>
<head>
</head>
    <FRAMESET ROWS="30%, 30%, *">
        <FRAME name="upperpage" SRC="upper.html">
        <FRAME name="textpage" SRC="text.html">
        <FRAME name="lowerpage" SRC="lower.html">
    </FRAMESET>
</html>

====================================================================================

Code Example : Use IFrame

====================================================================================

---------------------------iframe.html---------------------------------

<html>
<head>
<script language="javascript">
var tag_iframe = "tag_iframe";
function doAction(tag) {
    switch(tag) {
        case 1 :
            alert('[FRAME NAME].JS Variable ' + iframe_obj.tag_iframe_inc);
            break;
        case 2 :
            alert('[document.getElementById(/'iframe_obj/').src] ' + document.getElementById('iframe_obj').src);
            break;
        case 3 :
            try {
                alert('[document.getElementById(/'iframe_obj/').location.href] ' + document.getElementById('iframe_obj').location.href);
            } catch ( e) {
                alert('error occurs')
            }
            break;
        case 4 :
            alert('frames[/'iframe_obj/'] ' + frames['iframe_obj'].src);
            break;
        case 5 :
            try {
                alert('frames[/'iframe_obj/'] ' + frames['iframe_obj'].location.href);
            } catch ( e) {
                alert('error occurs')
            }
            break;
    }
}
</script>

</head>

<body>
<a href="blank.html" target="iframe_obj">Click this to show embed page</a>
<form>
<IFRAME name="iframe_obj" id="iframe_obj" src="iframe_inc.html" scrolling="no">
</IFRAME>
</br>

<button onclick="doAction(1)">Visit Child JS Variable</button>
<button onclick="doAction(2)">Compatibility Test 1</button>
<button onclick="doAction(3)">Compatibility Test 2</button>
<button onclick="doAction(4)">Compatibility Test 3</button>
<button onclick="doAction(5)">Compatibility Test 4</button>
</body>
</html>

-----------------------------------------iframe_inc.html-------------------------------------------------------------------

<html>
<head>
<script language="javascript">
var tag_iframe_inc = "tag_iframe_inc";
function doAction() {
    alert(parent.tag_iframe);
}
</script>
</head>
<body>
    This is iframe_inc.html.html</br>
    <button onclick="doAction()">Visit Parents</button>

</body>
</html>
Note:
1. In general browsers allow both views on 'real' (hard-coded) iframes, but generated iframes cannot be accessed as frames.
When you generate an iframe through the W3C DOM the iframe is never entered into the frames array, though, and the frames['testiframe'].location.href syntax will not work. but switching to the document.getElementById('testiframe').src syntax works fine.

2. The most important rule is to give any iframe you create a name attribute, even if you also use an id.
Most browsers need the name attribute to make the iframe part of the frame hierarchy. Some browsers (notably Mozilla) need the id to make the iframe accessible as an object. By assigning both attributes to the iframe you keep your options open. But name is far more important than id.

Reference:
http://www.w3.org/TR/REC-html40/present/frames.html#h-16.1
http://www.htmlhelp.com/design/frames/syntax/frame.html
http://www.quirksmode.org
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/xframe_scripting_security.asp