当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > HTML iframe 用法总结收藏

HTML/XHTML教程
一些不太常用的XHTML标签用法以及实例
网页中图片的设置涉及的三个问题
商业HTML邮件的制作建议
HTML Marquee 字符片段滚动
DOCTYPE 文档类型声明(网页爱好者必看)
纯HTML标签你熟悉多少?
HTML元素的ID和Name属性的区别
HTML meta的大作用
HTML标签tbody的用法与说明
HTML 特殊字符转换表
HTML基础 HTML的组成结构
HTML基础之HTML内容细则
Shtml 精简教程
浅谈html table 标签
html Frame、Iframe、Frameset 的区别
HTML 网页页面切换的各种变换效果
HTML的10个表格相关标记
让IE8启动IE7兼容模式的代码
HTML 结构化实现方法
xhtml的块级标记小结

No. « 64 65 66 67 »

技术文章搜索

关键字

HTML/XHTML教程 中的 HTML iframe 用法总结收藏

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 57 ::
收藏到网摘: n/a

<iframe>是框架的一种形式，也比较常用到。
　　例子1。
<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>
不用多说了。
　　width插入页的宽；height插入页的高；scrolling 是否显示页面滚动条（可选的参数为 auto、yes、no，如果省略这个参数，则默认为auto）；frameborder 边框大小；
　　注意：URL建议用绝对路径
　　传说中百DU用：<iframe width=0 height=0 frameborder=0 scrolling=auto src=http://WWW.ruanchen.com></iframe>
黑了88*8。。。
　　例子2。
　　如果一个页面里面有框架。。随便点页面里的连接，要求在这个<iframe> 里打开。在iframe 中加入name=** （**自己设定）
<iframe name=** ></iframe>
　　然后在修改默认打开模式，：网页HEAD中加上<a href=URL target=**>或部分连接的目标框架设为（**）
　　例子3。
　　要插入一个页面。要求只拿中间一部分。其他的都不要。，。。
　　代码：
<iframe name=123 align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src="http://www.ruanchen.com/'background-color:red' onload='setBG()'>
<iframe src='about:blank' name=frm></iframe>
难点2：
窗口与浮动帧之间的相互控制
在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。
　　1、在父窗体中访问并控制子窗体中的对象
　　在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。
　　现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。
　　比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：
　　<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm文件代码为:
　　<html>
　　　<body>
　　　　<h1 id="myH1">hello,my boy</h1>
　　　</body>
　　</html>
　　如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:
　　document.myH1.innerText="hello,my dear"(其中，document可省)
　　在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
　　2、在子窗体中访问并控制父窗体中对象
　　在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
　　如example.htm：
　　<html>
　　　<body onclick="alert(tt.myH1.innerHTML)">
　　　　<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
　　　　<h1 id="myH2">hello,my wife</h1>
　　　</body>
　　</html>
　　如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：
　　parent.myH2.innerText="hello,my friend"
或者parent.document.getElementById("myH2").innerText="hello,my friend"
　　这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。
3:frame的一个子元素访问frame的另一个子元素
例如：框架文件frame.html中嵌入了另外两个html文件
<div styleClass="basewnd">
<!-- 搜索 -->
<div id="search" name="test" align="center" class="top_list_home">
<iframe id="frameSearch" name="search" src="Search.html" frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>
</div>
<!-- 单位目录树 -->
<div align="center" class="welcome_tag_home">
<iframe src="DirectoryTree.html" frameBorder="0" scrolling="no" width="195px" height="427px" marginheight="0" marginwidth="0"></iframe>
</div>
</div>
那么现在要在DirectoryTree.html文件中访问Search.html文件中的一个id为section的<font></font>标签的innerHTML属性，则可以这样：
alert(parent.document.search.section.innerHTML),
其中search是“搜索”div的id，或者：
alert(parent.document.getElementById("search").section.innerHTML),
或者也可以这样：
alert(parent.document.frames["frameSublist"].name)(这是直接访问iframe)
　　Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。
　　试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。
　　要注意的是，Nestscape6.0之前版本不支持Iframe标记。
　　例子：
1:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
<iframe src="页面" width="宽度" height="高度" align="排列可以是left或right,center" scrolling="是否有滚动条可以填no或yes"></iframe>
<IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="/bgm/bgm.html" width=300></IFRAME>
2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
用了iframe后 发现滚动条不漂亮 想用2个图片来代替↑↓
应该怎么实现呢？
回答：
用下列代码替换网页的<title>..</title>
<SCRIPT LANGUAGE="javascript">
function scroll(n)
{temp=n;
Out1.scrollTop=Out1.scrollTop+temp;
if (temp==0) return;
setTimeout("scroll(temp)",80);
}
</SCRIPT>
<TABLE WIDTH="330">
<TR>
<TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >
<DIV ID=Out1 STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width: 1px,1px,1px,1px;">
文字<BR> 文字<BR>
文字<BR>
文字<BR>
文字
<BR>
<BR>
</DIV>
</TD>
<TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" WIDTH="14" HEIGHT="20" onmouseover="scroll(-1)" onmouseout="scroll(0)" onmousedown="scroll(-3)" BORDER="0" ALT="按下鼠标速度会更快！"></TD>
</TR>
<TR>
<TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" onmouseover="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" BORDER="0" WIDTH="15" HEIGHT="21" ALT="按下鼠标速度会更快！"></TD>
</TR>
</TABLE>
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
下面这段代码可以实现IFrame自适应高度，即随着页面的长度，自动适应以免除页面和IFrame同时出现滚动条。
源代码如下
<script type="text/javascript">
//** iframe自动适应页面 **//
//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。
//定义iframe的ID
var iframeids=["test"]
//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏
var iframehide="yes"
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids);
if (dyniframe && !window.opera)
{
dyniframe.style.display="block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
</script>
HTML <iframe> 标签
定义和用法
iframe 元素会创建一个包含另外一个文档的内联框架。
HTML 与 XHTML 之间的差异
NONE
可选的属性
DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.
属性 值 描述 DTD
align left
right
top
middle
bottom
规定如何根据周围的文本来排列此框架。 TF
frameborder 1
0
规定是否显示框架的边框。 TF
height pixels
%
定义 iframe 的高度。 TF
longdesc URL 描述此框架内容的长描述的URL。 TF
marginheight pixels 定义 iframe 的顶部和底部的边距。 TF
marginwidth pixels 定义 iframe 的左侧和右侧的边距。 TF
name frame_name 规定 iframe 的唯一名称 （以便在脚本中使用）。 TF
scrolling yes
no
auto
定义滚动条。 TF
src URL 在 iframe 中显示文档的 URL。 TF
width pixels
%
定义 iframe 的宽度。 TF
以下是本人自己在实际项目开发时利用frame写的一段源代码，仅供参考：
主文件（框架）：
<html>
<head>
<title>教育局资源管理系统</title>
<script src="resources/js/DirectoryTree/DirectoryTree.js"></script>
<script src="resources/js/date.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/frame.css">
<link rel="stylesheet" type="text/css" href="resources/css/global.css">
<script language="javascript">
function setBgColor()
{
var bg=document.bgColor
bottom.document.bgColor=bg
}
</script>
</head>
<body bgcolor="#f9edff" onload="setBgColor()">
<div styleClass="basewnd">
<!-- LOGO -->
<div align="center" class="flag">
<iframe src="resources/HTMLFolders/Logo.html" frameBorder="0" scrolling="no" width="950px" height="115px" marginheight="0"></iframe>
</div>
<!-- 用户登陆 -->
<div align="center" class="user">
<iframe src="resources/HTMLFolders/UserLogin.html" frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>
</div>
<!-- 搜索 -->
<div id="search" name="test" align="center" class="top_list_home">
<iframe id="frameSearch" name="search" src="resources/HTMLFolders/Search.html" frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>
</div>
<!-- 导航条 -->
<div align="center" class="navigation">
<iframe src="resources/HTMLFolders/Navigation.html" frameBorder="0" scrolling="no" width="950px" height="25px" marginheight="0" marginwidth="0"></iframe>
</div>
<!-- 最新主题列表 -->
<div align="center" class="newest_topic">
<iframe src="resources/HTMLFolders/Sublist.html" frameBorder="0" scrolling="no" width="540px" height="427px" marginheight="0" marginwidth="0"></iframe>
</div>
<!-- 单位目录树 -->
<div align="center" class="welcome_tag_home">
<iframe src="resources/HTMLFolders/DirectoryTree.html" frameBorder="0" scrolling="no" width="195px" height="427px" marginheight="0" marginwidth="0"></iframe>
</div>
<!-- 页尾 -->
<div align="center" class="rights_home">
<iframe id="bottom" name="bottom" src="resources/HTMLFolders/Bottom.html" frameBorder="0" scrolling="no" width="950px" height="100px" marginheight="0" marginwidth="0" allowTransparency="true" style="background-color: red"></iframe>
</div>
</div>
</body>
</html>
被引用的文件UserLogin.html：
<link rel="stylesheet" type="text/css" href="../css/global.css">
<table border="0" align="left" width="193" cellpadding="1" cellspacing="0" style="border-style:solid;border-width:1px;border-color:#eeeeee;">
<tr><td>
<table border="0" align="left" width="190" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="middle" width="20" height="25" class="tdfnt12px" background="../images/title_bar2.png" >
</td>
<td align="left" valign="bottom" height="25" class="tdfnt12px" background="../images/title_bar2.png">
<font style="height:18px;font-family:宋体;font-size:14px;">&nbsp;<b>会员登录</b></font>
</td>
</tr>
</table>
</td></tr>
</table>
<div id="divLogin" style="visibility:visible;position:absolute;left:10px;top:30px">
<table border="0" align="left" width="193" cellpadding="1" cellspacing="0" style="border-style:solid;border-width:0px;border-color:#eeeeee;">
<tr>
<td align="left" valign="bottom" height="45"><font class="normal">用户名：</font>
<td valign="bottom"><input type="text" name="userAreaUserName" id="userAreaUserName" class="id" maxlength="16"/></td>
</tr>
<tr>
<td align="left" height="40"><font class="normal">密码：</font>
<td><input type="password" name="userAreaUserPwd" id="userAreaUserPwd" class="pwd" maxlength="16"/></td>
</tr>
<tr>
<td align="center" colspan="2" class="tdfnt12px">
<input type="submit" value="登录" style="color:black;border-color:skyblue;border-style:solid;border-width:0px;vertical-align:middle;font-family:宋体;width:68px;height:24px;background:url(resources/images/ButtonBg02.png);"/>
</td>
</tr>
</table>
</div>
现在假设“最新主题列表”文件中有一个超链接，点击其，包含“最新主题列表”的iframe就重新加载，此时需要利用javascript来实现：
<a href="" onclick="redirect(); return false">www.baidu.com</a>
<script language="javascript">
function redirect()
{
parent.document.frames["frameSublist"].location.href="www.baidu.com"
}
</script>