IFRAM的详细用法

IFRAM的详细用法:

<IFRAME>用于设置文本或图形的浮动图文框或容器。
BORDER
<IFRAME BORDER="3"></IFRAME>
设定围绕图文框的边缘宽度
FRAMEBODER
<IFRAME FRAMEBODER="0"></IFRAME>
设置边框是不否为3维（0=否，1=是）

HEIGHT,WIDTH
<IFRAME HEIGHT="31" WIDTH="88"></IFRAME>
设质边框的宽度和高度

SCROLLING
<IFRAME SCROLLING="NO"></IFRAME>
是否有滚动条（YES,NO,AUTO)

SRC
<IFRAME SRC="GIRL.GIF"></IFRAME>
指定IFRAME调用的文件或图片(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*)
-------------------------------------------------------------

“画中画”效果--谈IFRAME标签的使用

纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目图片，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效应的需要，本无可厚非，可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了，有没有办法，让这些雷同的东西一次下载后就不用再下载，而只下载那些内容有变化区域的网页内容呢？
答案很肯定：应用Iframe标记！

一、Iframe标记的使用

提起Iframe，可能你早已将之扔到“被遗忘的角落”了，不过，说起其兄弟Frame就不会陌生了。Frame标记即帧标记，我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个“上一节“、“下一节“的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌烦了，这时突发奇想，如果有一种方法让页面其它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改变教程内容部分，其它保持不变，这样，一是省时，另则以后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。 Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。

现在我们谈一下Iframe标记的使用。

Iframe标记的使用格式是:

<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
width、height："画中画"区域的宽与高；
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;
FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。

比如:

二、父窗体与浮动帧之间的相互控制在脚本语言与对象层次中，包含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对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。

试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。

有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己(网站)着了想，又为网友节省了网费，何乐而不为？

例子：
<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可以在一人表格内调用一个外部文件，是非常有用的。本网站在很多页面上都使用了iframe效果。

现在我们学一下Iframe标记的使用。

Iframe标记的使用格式是:

<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x" name="main"></iframe>
src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
width、height："内部框架"区域的宽与高；
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;
FrameBorder：区域边框的宽度，为了让“内部框架“与邻近的内容相融合，常设置为0。
name:框架的名字，用来进行识别。

比如:

当你想用父框架控制内部框架时，可以使用： target="框架的名字"来控制。

设置边框是不否为3维（0=否，1=是）

HEIGHT,WIDTH
<IFRAME HEIGHT="31" WIDTH="88"></IFRAME>
设质边框的宽度和高度

SCROLLING
<IFRAME SCROLLING="NO"></IFRAME>
是否有滚动条（YES,NO,AUTO)

SRC
<IFRAME SRC="GIRL.GIF"></IFRAME>
指定IFRAME调用的文件或图片(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*)

=================透明背景iframe=================
在嵌入iframe的页面中:

程序代码
<iframe src="abc.htm" name="iframe" width="540" height="400" scrolling="Auto" frameborder="0" id="iframe" style="border:0px"allowtransparency="true"></iframe>

在该iframe被嵌入的页面中:

程序代码
<body STYLE=" padding: 0px;"> transparent">

=================iframe任何浏览器下自动伸缩=================
<iframe marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" id="frametb" scrolling="no" src="frame.htm"onload="style.width=this.contentWindow.document.all.formfra.offsetWidth;style.height=this.contentWindow.document.all.formfra.offsetHeight"></iframe>

frame.htm

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

<html>
<body leftmargin="0" topmargin="0">
<table id=formfra width=200 border=0 bgcolor=green>
<tr><td>
胡东平在线空间
<p/>
sfsfere
</td></tr>
</table>
</body>
</html>

执行mainframe.htm就可以看到效果了。
套用修改的时候要注意mainframe.htm和frame.htm里面定义表格的ID，然后记得在frame语句中修改相对应的调用文件名称和路径，并且注意下面这句：

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

onload="style.width=this.contentWindow.document.all.formfra.offsetWidth;style.height=this.contentWindow.document.all.formfra.offsetHeight"

=========================
做相应修改
=========================

this.contentWindow.document.all.调用页面表格ID.offsetWidth
this.contentWindow.document.all.调用页面表格ID.offsetHeight
______________

01.让背景图不滚动
IE浏览器支持一个 Body 属性 bgproperties，它可以让背景不滚动:
〈Body Background="图片文件" bgproperties="fixed"〉

02.让你的网页无法另存为
<noscript><iframe src=*></iframe></noscript>

03.让IFRAME框架内的文档的背景透明
<iframe src="http://www.wzsky.net/html/Website/htmlcss/about:<body style='background:transparent'>/" allowtransparency></iframe>

04.禁止右键：
<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()">

05.进入页面后立即自动刷新？
<meta http-equiv="refresh" content="120;url=http://www.webjx.com">
http://www.webjx.com，这是你自己的网址。

06.打开窗口即最大化
<script language="JavaScript">

</script>

07.能隐藏IFRAME的滚动条吗？我知道的三种方法:
1. 设置iframe scrolling="no"
2. 被包含页body应用overflow:hidden 即在被包含页中应用15.如何控制横向和纵向滚动条的显隐？
3. 被包含页的body标签加scroll="no"

08.加入背景音乐
<bgsound src="http://www.wzsky.net/html/Website/htmlcss/mid/windblue[1].mid" loop="-1"> 只适用于IE

09.嵌入网页
<iframe name="tt" src="http://www.wzsky.net/html/Website/htmlcss/01a.html" width="450" height="287" scrolling="Auto" frameborder="0"></iframe>

10.跳转
<meta http-equiv="refresh" content="3;URL=list.htm">

11.滚动
<MARQUEE direction=up height=146 onmouseout=start() onmouseover=stop() scrollAmount=4></marquee>

12.细线分隔线
<hr noshade size=0 color=#C0C0C0>

13.过度方式
<meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=5)">
Duration的值为网页动态过渡的时间，单位为秒。
Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表：
0 盒状收缩　1 盒状放射　2 圆形收缩　3 圆形放射　4 由下往上
5 由上往下　6 从左至右　7 从右至左　8 垂直百叶窗　9 水平百叶窗
10 水平格状百叶窗　11垂直格状百叶窗　12 随意溶解　13从左右两端向中间展开
14 从中间向左右两端展开　15 从上下两端向中间展开
16 从中间向上下两端展开　17 从右上角向左下角展开
18 从右下角向左上角展开　19 从左上角向右下角展开
20 从左下角向右上角展开　21 水平线状展开
22 垂直线状展开　23 随机产生一种过渡方式

14.加入注释的格式是：　　　
〈!-［注释内容…］--〉

15.如何控制横向和纵向滚动条的显隐？
<body style="overflow-y:hidden"> 去掉x轴
<body style="overflow-x:hidden"> 去掉y轴
<body scroll="no">不显。

16.定制浏览器地址栏前的小图标：
A:在网页的〈head〉〈/head〉间加入以下语句：
〈link rel="shortcuticon" href="http://…/icon.ico"〉
即可。其中 icon.ico 为 16x16 的图标文件，颜色不要超过 16 色。

17.怎样在网页中加入 E-mail 链接并显示预定的主题?
〈A href="http://www.wzsky.net/html/Website/htmlcss/mailto:Name@Your.net?subject=主题"〉……〈/a〉

18.定义本网页关键字，可以在〈Head〉〈/Head〉中加入如下代码：　
〈meta name="Keywords" content="china,enterprise,business,net"〉　　
Content 中所包含的就是关键字,你可以自行设置。　　
这里有个技巧,你可以重复某一个单词,这样可以提高自己网站的排行位置,如：
〈meta name="Keywords" content="china,china,china,china"〉这个关键字对于Google搜索无效。

19.添加到收藏夹：
〈a href="javascript :window.external.addFavorite('http://链接','说明');"〉添加到收藏夹〈/a〉

20.设为首页：
〈a href=# onclick=this.style.behavior='url(#default#homepage)';this.setHomePage('http://链接');〉设为首页〈/a〉

21.把滚动条放在浏览器窗口的左边
A:在 <body> 中加 dir=RTL，即 <body dir=RTL>。

另附：IE5.0 的部分快捷键：
A:打开查找功能：Ctrl+F
关闭浏览器窗口：Ctrl+W
打开地址栏下拉列表框：F4
刷新：F5
将当前Web页保存到收藏夹列表：Ctrl+D
打开当前 IE 窗口的一个拷贝：Ctrl+N
停止下载当前网页：Esc
光标迅速移动到网页的开头：Home
光标迅速移动到网页的尾部：End
打开新的地址键入窗口：Ctrl+O
打开收藏夹：Ctrl+I
打开历史记录文件夹：Ctrl+H
打开浏览器设定的默认主页：Alt+HOME

IFRAM的详细用法的更多相关文章

C#播放声音的四种方法 +AxWindowsMediaPlayer的详细用法
C#播放声音的四种方法第一种是利用DirectX 1.安装了DirectX SDK(有9个DLL文件).这里我们只用到MicroSoft.DirectX.dll和 Microsoft.Directx ...
在DOS下的DEBUG命令的详细用法
在DOS下的DEBUG命令的详细用法名称解释格式 a (Assemble) 逐行汇编 a [address] c (Compare) 比较两内存块 c range address d (Dump ...
__declspec关键字详细用法
__declspec关键字详细用法 __declspec用于指定所给定类型的实例的与Microsoft相关的存储方式.其它的有关存储方式的修饰符如static与extern等是C和C++语言的ANSI ...
CString.Format的详细用法(转)
CString.Format的详细用法(转) 在MFC程序中,使用CString来处理字符串是一个很不错的选择.CString既可以处理Unicode标准的字符串,也可以处理ANSI标准的字符串.CS ...
【转】java.util.vector中的vector的详细用法
[转]java.util.vector中的vector的详细用法 ArrayList会比Vector快,他是非同步的,如果设计涉及到多线程,还是用Vector比较好一些 import java.uti ...
DOM Style样式对象的详细用法
DOM Style样式对象的详细用法 HTML Style样式比较复杂,相应访问.修改方法也有所差异.参考相关资料,整理如下. 典型Html文件如下,有三种定义方式. <head> ...
css基础之 font的简写规则以及自定义 CSS3 @font-face详细用法
Part 1 font简写 CSS的命名规则是用英文字母数字和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...
Tomcat详细用法学习（三）
本篇接上一篇<Tomcat详细用法学习(二)>,主要讲解服务器所要求的web应用的组织结构. 上一篇说到了如何使用服务器将自己的web应用映射成虚拟目录,以便于在浏览器中可以对自己开发的w ...
Tomcat详细用法学习（五）
本篇接上一篇<Tomcat详细用法学习(四)>,主要讲解Tomcat服务器的管理平台我们可能会将很多web应用交给Tomcat,那么Tomcat服务器就要对我们这些载入的web应用进行管 ...

随机推荐

chrome浏览器下用jQuery的load函数来跨域加载页面，响应状态status为(canceled)是什么情况？ JSON和JSONP，也许你会豁然开朗，含jQuery用例
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 问题来源:http://q.cnblogs.com ...
安装配置tomcat环境
安装配置tomcat环境 #所需要软件包 apache-tomcat-7.0.65.tar.gz jdk-7u80-linux-x64.gz #建立个专用账户 usradd tomcat ...
linux C 9*9
#include<stdio.h> #include<conio.h> #include <windows.h> void Gotoxy(int x, int y) ...
在编辑模式中一个ASP.NET应用详细视图显示集合属性编辑模式和只读模式
https://documentation.devexpress.com/#Xaf/CustomDocument3230
python 列表函数(转)
list函数: 功能:将字符创转化为列表,例: 列表基本函数: 1.元素赋值,例: 注意:通过list[0]= 'hel',如果原来位置上有值,会覆盖掉原来的. 2.分片操作 1)显示序列,例: 注意 ...
Quartz表达式
“*”字符代表所有可能的值因此,“*”在子表达式(月)里表示每个月的含义,“*”在子表达式(天(星期))表示星期的每一天 “/”字符用来指定数值的增量例如:在子表达式(分钟)里的“0/15”表示从 ...
Ubuntu15.04 安装Android开发环境
一.安装Java SE JKD A.下载 http://www.oracle.com/technetwork/java/javase/downloads/index.html?ssSourceSite ...
sqlserver 行转列语文,数学,物理,化学
数据库查询行转列 1.原数据库值 stdname stdsubject result 张三语文张三数学张三物理李四语文李四数学李四物理李四化学李四化学 2.要得到如下表 ...
LeetCode6 ZigZag Conversion
题意: The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows l ...
iOS系统下的手机屏幕尺寸分辨率及系统版本总结
今天我对iOS系统下的手机屏幕尺寸分辨率及系统版本做了一次系统总结供大家参考. 首先是系统: 随着iOS 系统不断升级,现在已经到iOS7.0了, 并且TA有了很多新变化,最震撼的 ...

IFRAM的详细用法

IFRAM的详细用法的更多相关文章

随机推荐

热门专题