Use Frame, FrameSet, 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; [
<!-- reserved frame names start with "_" otherwise starts with letter -->
<!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 target="[iframe]" method="post">

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

<FRAMESET ROWS="25%, *">
    <FRAME name="logopage" SRC="logo.html">
    <FRAMESET COLS="25%, *">
        <FRAME name="navipage" SRC="navi.html">
        <FRAME name="content" SRC="content.html">
    </FRAMESET>
</FRAMESET>

</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 οnclick="onLeftPageClick('navi')">Call Navi</button>
<button οnclick="onLeftPageClick('upper')">Call Upper</button>
<button οnclick="onLeftPageClick('text')">Call Text</button>
<button οnclick="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 οnclick="onLeftPageClick('logo')">Call Logo</button>
<button οnclick="onLeftPageClick('upper')">Call Upper</button>
<button οnclick="onLeftPageClick('text')">Call Text</button>
<button οnclick="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 οnclick="onLeftPageClick('navi')">Call Navi</button>
<button οnclick="onLeftPageClick('logo')">Call Logo</button>
<button οnclick="onLeftPageClick('text')">Call Text</button>
<button οnclick="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 οnclick="doAction(1)">Visit Child JS Variable</button>
<button οnclick="doAction(2)">Compatibility Test 1</button>
<button οnclick="doAction(3)">Compatibility Test 2</button>
<button οnclick="doAction(4)">Compatibility Test 3</button>
<button οnclick="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 οnclick="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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值