用IFRAME实现网页的内嵌和预载

 更新时间:2016年9月20日 19:02  点击:1723
在HTM(HTML)文件中是否可以像PHP、ASP文件一样嵌入其他文件呢?下面笔者介绍用iframe来实现的方法。

  iframe元素的功能是在一个文档里内嵌一个文档,创建一个浮动的帧。其部分属性简介如下:

name:内嵌帧名称

width:内嵌帧宽度(可用像素值或百分比)

height:内嵌帧高度(可用像素值或百分比)

frameborder:内嵌帧边框

marginwidth:帧内文本的左右页边距

marginheight:帧内文本的上下页边距

scrolling:是否出现滚动条(“auto”为自动,“yes”为显示,“no”为不显示)

src:内嵌入文件的地址

style:内嵌文档的样式(如设置文档背景等)

allowtransparency:是否允许透明
 
  明白了以上属性后,我们可用以下代码实现,在main.htm 中把samper.htm文件的内容显示在一个高度为80、宽度为100%、自动显示边框的内嵌帧中:

〈iframe name="import_frame" width=100%

height=80 src="samper.htm" frameborder=auto〉

〈/iframe〉


  不错吧,马上“Ctrl+C”、“Ctrl+V”试试。

  有时我们为强调页面的某项内容,想让它先于页面的其他内容显示。同样用iframe即可轻松实现:

  先把要强调显示的内容另存为一个文件,如first.htm ,然后通过一个预载页index.htm,内容如下:

〈meta http-equiv="refresh" content="3,url=index2.htm"〉

〈body〉

  页面加载中,请稍候……〈iframe src="first.htm" style="display:none"〉〈/iframe〉

〈/body〉

  主文件index2.htm

〈body〉

〈iframe src="first.htm" 加入其他属性限制〉〈/iframe〉

〈/body〉

  first.htm的内容就会先于页面的其他内容出现在您的浏览器里了,是不是很简单?再“Ctrl+C”、“Ctrl+V”一次?


<

  看到上面的导航条了吗?你可以点击一下看看它的效果,请注意,这可是用表格做出来的,你相信吗?其实代码很简单,现在让我们来看看该怎么做。

  1.首先创建一个1x6的表格,参数为:border=0 cellspacing=3 cellpadding=0;

  2.在这个表格的每个单元格内分别插入一个表格,宽度和高度设为100%;

  3.建立一个css样式.up.down;代码如下:

<style>
.up{
border:4 outset royalblue;color:yellow;background:blue;cursor:hand
}
.down{
border:4 inset royalblue;color:#33ff33;background:blue;cursor:hand
}
</style>


  初学者在使用表格时,可能会遇到各种问题,由于对标记还不是很熟悉,所以往往对这些问题感到莫名其妙,一筹莫展。有时侯甚至因为在这些问题上纠缠不清而最终心烦意乱丧失了继续学习的兴趣。所以在这里,我们列出了表格使用过程中最常见的问题来加以分析,希望能给大家带来帮助

  1.表格的变形问题

  网页在不同的屏幕分辨率、或改变窗口时常出现一些页面变形情况,这也是最另人恼火的事,怎么办呢?秋实曾在天极网页陶吧撰文详细的阐述过这个问题,我们来看看他是怎么解决的。

  A、因为表格排列设置而在不同分辨率下所出现的错位

  这种变形情况是:

  1、在800*600的分辨率下时,一切正常,而到了1024*800时,则多个表格或者有的居中,有的却左排列或右排列,很难看,这是什么原因呢?

  在解决这个问题之前,我们讲一下表格的排列。表格有左、中、右三种排列方式,如果没特别进行设置,则默认为居左排列,不用说了,这就是问题之所在。在800*600的分辨率下,表格恰好就有编辑区域那么宽,不容易察觉,而到了1024*800的时候,就出现的,解决的办法比较简单,即都设置为居中,或左或右。

  2、同样是这种分辨率切换,表格的上下排列不一致。

  上边的所说的是水平错位,而这种则是纵向错位,多发生在一个表格单元里嵌入另一个表格的情况。其原因在于,嵌入的表格默认为竖向居中排列,在800*600分辨率时,这种错位看不出来,而到1024*800就出现了,解决办法如前,根据情况对排列进行设置,而不是采用其默认设置。

  B、采用百分比而出现的变形

  这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比,如在一个表格单元的宽度是600,在它里面嵌入了另外一个表格,表格宽度占表格单元的50%,则这个表格的宽度为300,依此类推,如果在一个表格不是嵌于另一个表格单元中,则其百分比是相对于当时窗口的宽度的,常出现在IE浏览器中,随便改动主页窗口的大小时,表格的内容也随之错位、变形,这是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。

  当然了,解决办法是不要设置成百分比,我提倡的是,如果表格没有外围嵌套标记,则将宽等设置成固定宽度,如有外围嵌套标记,则将外转嵌套标记的宽度设置为固定值,而表格的宽或高可设置为百分比,这样就不会出现变形了。

  

C、表格单元格之间互相干扰引起的变形

  这种变形情况通常是在工具里制作主页时没有空隙,而在浏览时却发现莫名其妙地多出一些空隙,而又不知原因在哪,很是令人讨厌。

  本人也经常遇到类似的情况,解决办法一是先看表格设置有没有上面所谈的两种情况,如没有,可能就是在划分表格时,同一行的单元格之间相互牵制所出现的问题。

  我们知道,同一行的表格单元在诸如DreamWeaver 或FrontPage中经常频繁地被拆分,所以,同一行的单元格与另一个单元格的宽与高不一致,这时,你就要注意两个单元格属性:colspan、rowspan。colspan表示的是横向扩展,而rowspan则表示的是纵向扩展,这个扩展的意思即当前表格单元相邻的横向与竖向的表格单元数,也可这样理解为表格单元的高或宽是相邻几个表格单元的高或宽的相加和,如下图。


    


  这个单元格横向所占用的宽度是3个表格单元的宽度(这里取最大值),即colspan=3;而竖向的高度是三个表格单元高度的总和,即rowspan=3。

< 随着Internet在中国的飞速发展和不断普及,越来越多的人将网络作为获取信息、学习知识的最佳工具。国内外的各种传统媒体也争先恐后地在网上推出电子版:如《电脑报》、《光明日报》、《中国青年报》等等。于是,在网上读书看报就成了网虫兼书虫们乐此不疲的开心事了。
  开启七八个浏览器窗口虽然可同时看几个网站,但浏览器窗口越开越多,机器的资源就越发紧张。对于那些喜欢在上网的同时听听MP3音乐的人来说,常常就只能忍痛割爱了(内存不够!)。有没有什么好的解决办法呢?
  最容易想到的办法就是使用HTML语言中的Frame框架。设计过主页的朋友都知道,使用Frame可以将页面划分成几个互不影响的框架,每个框架中可以加载一个页面。而且,不同框架中的页面之间可以没有任何关系。这样可以充分地利用页面空间,加大页面的信息量。但是,Frame有个缺陷:只能将浏览器的窗口进行划分,对于大于Frame大小的页面就只能加上滚动条来移动显示窗口,很不方便。虽然,利用Frame,将不同的报刊站点放在不同的Frame中显示,可以减少同时打开浏览器的数目,但是,狭小的阅读空间却让人无法忍受!
  其实,HTML语言中还有一个与Frame有着亲缘关系的标签IFRAME,利用它可以让我们达到目的。IFRAME是Inline Frame的缩写,称为内联框架。使用IFRAME,网页的设计者可以在HTML页面的任何地方插入一个内联框架,而不必像使用Frame前需要在一个主页面里用FrameSet标签为每个Frame划分空间。与一般的Frame不同的是,每个IFRAME可以独立地定义其大小,而不是瓜分本来就不大的一个浏览器窗口!也就是说,一个IFRAME可以和浏览器窗口一样大,甚至更大!这样,显示空间的问题也解决了。
  下面的一个HTML页面文件,就是用IFRAME设计的一个“网上阅览室”。在一个页面上,IFRAME实现了同时显示三个不同报刊站点的内容,而每个站点的显示空间都是一个整屏!向Frame说再见吧!
  你可以改变IFRAME的SRC属性,让它指向你所喜欢的报刊站点,定制你自己的网上阅览室!
  注:请使用IE浏览器(3.0以上),Netscape不支持该标签。
  《html》
  《head》
  《title》网上阅览室《/title》
  《/head》
  《body》
  《p align=″center″》《big》《font color=″#0000FF″ face=″楷体_GB2312″》《strong》《big》《big》我的网上阅览室《/big》《/big》《/strong》《/font》《/big》《/p》
  《p align=″center″》《font color=″#FF0000″》光明日报《/font》《/p》
  《IFRAME height=450 width=100% src=″http://www.gmd.com.cn/″》
  《/IFRAME》
  《p align=″center″》 《/p》
  《p align=″center″》《font color=″#FF0000″》电脑报《/font》《/p》
  《IFRAME height=450 width=100% src=″http://www.cpcw.com″》
  《/IFRAME》
  《p align=″center″》 《/p》
  《p align=″center″》《font color=″#FF0000″》中国青年报《/font》《/p》
  《IFRAME height=450 width=100% src=″http://www.cyd.com.cn″》
  《/IFRAME》
  《/body》
  《/html》
(陕西 陈剑)

  1、我Frontpage作网页,插入了一个下拉表单,可怎么改也不能用,不知为什么?

  答:用网页制作软件作出来的下拉表单是不能用的。因为它得需要服务器组件支持。要想能正常使用,必须再对源代码作作小手术。一年前,我经过从源文件中反复比较自己作的下拉表单和从网上找到的下拉表单,经过修改,作了一个如下形式的一个下拉表单源代码。你可将其拷贝到你网页的源文件中,再浏览一下,看看是不是你想要的效果?如果是的话,

再据自己所需修改成自己的(并可在源文件中再用拷贝的方式添加多个项并修改)。

  <select name="select" onchange="javascript:window.open(this.options[this.selectedIndex].value)" size="1" style="COLOR: #0000ff; FONT-SIZE:10pt; background-color:#FEF1DE">

  <option selected value="../index.html">***我的免费邮箱***</option>

  <option value="http://ail.sina.com.cn/">新浪免费邮箱</option>

  <option value="http://freemail.163.com/">网易个人免费邮箱</option>

  <option value="http://mail.sohu.com/">搜狐个人免费邮箱</option>

  2、我用Frontpage 2000制作网页,传到我的免费主页空间后,插入的横幅广告管理器不能用,请问该如何办?

  答:在Windows 98系统下用Frontpage作叶子,只要是利用了“插入横幅广告管理器”,就会自动在网叶的同一目录产生两个扩展名为CLASS文件(“fprotate.class”和“fprotatx.class”),是自动从Windows 中调进来的,是运行这个横幅广告管理器所必须的,这二者的修改日期都是“98-12-5”(也就是Windows 98版权日吧)!如果你在本机上你的网页所在目录下,认为这两个莫名其妙的小家伙无用而DEL掉的话,呵呵~~横幅广告管理器它就不运行了!即使你没DEL掉,也就只是在本机上还行,但你若没一块上传的话,从互联网上到你的空间浏览时也一定不显示。当然了,也有可能你所用的免费空间本身不支持用户的这一方法产生的横幅广告管理器!

  3、我在用Frontpage制作网页,怎么才能使超链接在新的窗口中打开呢?

  答:先选中你要用作超链接的元素(文本或图片),点按快捷工具栏中的超链接图标按钮(或用右键点选“超链接”命令),在随后弹出的“创建超链接”对话框中:若你要链接到的是本地机的页面文件,利用浏览按钮找到相关页面;你若要链到的是INTERNET上的页面,则须在URL中输入相关页面的路径!然后(这是你问题的关键之所在),点按“目标框架”右侧的“更改目标框架”按钮,在随后的“目标框架”对话框中选取“新建窗口”!(注意到此时,同时在下方的“目标设置”文本框中会有一个“_blank”的显示);“确定”再“确定”后预览或保存后用浏览器看一下?呵呵:)另外,其实你若懂HTML语言的话,只须到页面的源文件中,找到相关的链接语句后,在链接语句内部加一句“target=_blank”即可!

  4、我在用Frontpage制作网页,如何去掉超链接下面的横线呢?

  答:你若用的是FrontPage XP,先选中你的超链接,点击右键后在弹开的菜单中选中字体,再在弹开的表格中去掉“下划线”选项前面的“√”并确定就行了!若用的是Frontpage 2000,没有“下划线”这一项,只有在HTML中手动加入某些CSS代码!如下面是我修改好的一段CSS代码(其中的四句“TEXT-DECORATION: none”即表示无下划线),在你的网页的HTML源文件的<HEAD>与</HEAD>之间加入即可:

  <STYLE type=text/css>

  A:link {

  COLOR: #000ffff; TEXT-DECORATION: none //作了链接的文本颜色及下划线样式

  }

  A:hover {

  COLOR: #fff000; TEXT-DECORATION: none //鼠栏指向链接文本时的颜色及下划线样式

  }

  A:active {

[!--infotagslink--]

相关文章

  • php语言实现redis的客户端

    php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧,希望文章对各位有帮助。 为了更好的了解redis协议,我们用php来实现...2016-11-25
  • jQuery+jRange实现滑动选取数值范围特效

    有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
  • JS实现的简洁纵向滑动菜单(滑动门)效果

    本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考,具体如下:这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自己修改CSS代码,这个滑动门将每一...2015-10-21
  • jQuery+slidereveal实现的面板滑动侧边展出效果

    我们借助一款jQuery插件:slidereveal.js,可以使用它控制面板左右侧滑出与隐藏等效果,项目地址:https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15
  • PHP+jQuery翻板抽奖功能实现

    翻板抽奖的实现流程:前端页面提供6个方块,用数字1-6依次表示6个不同的方块,当抽奖者点击6个方块中的某一块时,方块翻转到背面,显示抽奖中奖信息。看似简单的一个操作过程,却包含着WEB技术的很多知识面,所以本文的读者应该熟...2015-10-21
  • SQLMAP结合Meterpreter实现注入渗透返回shell

    sqlmap 是一个自动SQL 射入工具。它是可胜任执行一个广泛的数据库管理系统后端指印, 检索遥远的DBMS 数据库等,下面我们来看一个学习例子。 自己搭建一个PHP+MYSQ...2016-11-25
  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • PHP实现今天是星期几的几种写法

    复制代码 代码如下: // 第一种写法 $da = date("w"); if( $da == "1" ){ echo "今天是星期一"; }else if( $da == "2" ){ echo "今天是星期二"; }else if( $da == "3" ){ echo "今天是星期三"; }else if( $da == "4"...2013-10-04
  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
  • 原生js实现fadein 和 fadeout淡入淡出效果

    js里面设置DOM节点透明度的函数属性:filter= "alpha(opacity=" + value+ ")"(兼容ie)和opacity=value/100(兼容FF和GG)。 先来看看设置透明度的兼容性代码: 复制代码 代码如下: function setOpacity(ele, opacity) { if (...2014-06-07
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • jQuery中iframe的操作(点击按钮新增窗口)

    <iframe>也应该是框架的一种形式,它与<frame>不同的是,iframe可以嵌在网页中的任意部分。本文给大家介绍jQuery中iframe的操作(点击按钮新增窗口),需要的朋友参考下吧...2016-04-22
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • javascript动态的改变IFrame的高度实现自动伸展

    动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩 原理: 在IFrame子页面一加载的时候,调用父IFrame对象,改变其高度 具体实现一: 1、在IFrame的具体页面(就是子页面),添加JavaScript...2013-10-13
  • Android中用HttpClient实现Http请求通信

    本文我们需要解决的问题是如何实现Http请求来实现通信,解决Android 2.3 版本以后无法使用Http请求问题,下面请看正文。 Android开发中使用HttpClient来开发Http程序...2016-09-20
  • mysql存储过程实现split示例

    复制代码 代码如下:call PROCEDURE_split('分享,代码,片段',',');select * from splittable;复制代码 代码如下:drop PROCEDURE if exists procedure_split;CREATE PROCEDURE `procedure_split`( inputstring varc...2014-05-31
  • 在vue中实现嵌套页面(iframe)

    这篇文章主要介绍了在vue中实现嵌套页面(iframe),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-31
  • JavaScript实现iframe自动高度调整和不同主域名跨域

    这篇文章主要介绍了JavaScript实现iframe自动高度调整和不同主域名跨域,作者通过建立一个代理来同步高度调整,需要的朋友可以参考下...2016-03-01
  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • jQuery取得iframe中元素的常用方法详解

    这篇文章主要介绍了jQuery取得iframe中元素的常用方法,结合实例形式详细分析了jQuery针对iframe中元素获取技巧及注意事项,需要的朋友可以参考下...2016-01-15