`

HTML 静态网页中包含外部页面的四种方法

    博客分类:
  • HTML
阅读更多

一.应用框架技术
  要在宿主页面中嵌入外部页面的方法是,在宿主页面中包含外部页面的位置插入“<IFRAME name="XXX" width=X height=X frameborder=0 src="XXX.htm"></IFRAME>”语句即可(注意: <IFRAME>标签中的各种属性含义请查阅相关技术手册)。

  如果想在嵌入的外部页面过长时不出现滚动条,在外部文件<body>标签中加入“scroll=no”或者在宿主页面<IFRAME>标签中加入“scrolling=no”即可。

  但这样做会出现一个问题,就是宿主页面和外部页面背景色不同,这样会给人造成页面不是一个整体的感觉。这时,只要在引入的外部文件中使用和宿主页面相同的背景色就可以解决这一问题。注意,如果您使用的是IE 5.5或以上版本的话,直接在标签<IFRAME>内设置属性allowTransparency="true"(即框架背景透明)即可。

  在应用框架技术时,为什么不使用框架页面(即<FRAMESET>)呢?现在有很多网站是通过使用框架页面来分割版面的,并达到了统一网站整体风格的目的,但笔者的体会是框架页面的操作灵活性较差,不像内建框架(即<IFRAME>)这样可以在宿主页面中的任何位置插入。

二.使用Scriptlets组件技术

  应用这种技术的方法是在宿主页面中包含外部页面的位置插入“<OBJECT style="border: 0px" type="text/x-scriptlet" data="XXX.htm" width=X Height=X></OBJECT>”语句即可(注意: <OBJECT>标签中的各种属性含义请查阅相关技术手册)。

  在IE 5.0及以后版本中,scriptlets和Html组件(HTCs)被重新命名为Windows脚本编程组件(WSC),其特点类似于上文所讲的框架技术。它有自己的不透明方形区域,并覆盖在宿主页面上,因此不能很平滑地用于具有纹理背景的宿主页面中,其工作方式类似于ActiveX控件,具有自己独立的事件、方法和属性。

三.使用脚本文件技术

  我们知道document.write方法可以在宿主页面中输出内容,这样就可以通过在宿主页面中引入外部脚本文件来达到嵌入外部页面的目的。方法是在宿主页面中包含外部页面的位置插入“<SCRIPT language="javascript" src="import.js"></SCRIPT>”,然后对外部页面进行改造,将每一行内容写入document.write中,并另外保存在扩展名为js的新文件中。

  这种方法的特点是外部页面不具有自己的方形区域,和宿主页面浑然一体,但由于外部页面内容全部写在脚本中,无法做到所见即所得,必须等到脚本运行时才能看到实际效果,这样就为修改调试增加了困难。

四.使用内置行为技术

  在IE 5.0及以后版本,引入了一项被称为“DHTML行为”的新功能,并在其中内置了许多默认行为。当将一种行为应用于宿主页面上的标准HTML元素时,它可以增强该元素的默认功能,并提供该行为中定义的任何新方法、属性或事件。其实大家对行为技术并不陌生,微电脑世界2001年18期的《主页加入收藏设置面面观》一文就提到了利用IE中内置的homepage行为技术进行主页设置的方法。我们同样可以利用IE 5.0内置的download行为,来达到在宿主页面中嵌入外部页面的目的,其代码如下。

<span id="outHTML"></span>
<IE:Download ID="ieDownload" STYLE="behavior:url(#default#download)"/>
<script>
function onDownloadDone(downDate){
outHTML.innerHTML=downDate
}
ieDownload.startDownload('../static/article.htm',onDownloadDone)
</script>

  其原理就是使用download行为提供的startDownload方法下载一个外部文本文件,并将文件中的文本内容作为参数传递给onDownloadDone函数,然后再由该函数对文本内容进行处理,在本例中是作为showImport对象的内容显示出来。如果在函数中对文本内容做相应的处理,并与相关技术结合,如XML,就可以实现更为复杂的功能。

  这种方法使得外部页面不再具有自己的方形区域,和宿主页面浑然一体; 提供了更大的灵活性,通过使用对象的innerHtml属性可以真正做到在宿主页面的任何位置插入外部文件内容; 修改简单,只须用可视网页编辑软件(如FrontPage 2000)将外部页面修改即可轻松改变网站整体风格。可以说这是在宿主页面中嵌入外部页面的最好方法 (注: 以上代码在Windows 98 SE/IE 5.0中测试通过)。

分享到:
评论
1 楼 FXWran 2011-08-22  
  

相关推荐

    基于Html的某大学校园网展示静态网页设计.zip

    3)除主页外,其他四个页面我们使用了统一的全局外部栏目布局框架,放置标题、文章等超链接,右下侧底部放置了置顶功能图表,以方便访问。 4)历史部分,主要运用时间轴特效,展示学校的历史事件和发展。 5)现在部分...

    HTML5网页设计

    1、网站至少由5个页面构成,除主页外,至少要包含四个主栏目,每个页面必须图文并茂,能较好地表达主题,切忌采用过多的文字、过多的图像或者过多flash,不允许添加视频。作品应体现Web的特点,网站结构完整,链接...

    gumdrop:将Markdown文档显示为静态HTML页面的脚本

    零配置脚本将Markdown文档显示为静态HTML页面 Gumdrop设计为易于使用的独立脚本,可以生成用编写的网站和文档。 它从CDN(包括Markdown解析器)以动态方式加载其所有依赖项,并且不需要任何配置或初始化。 安装 ...

    HTML5-CSS3网页设计

    1、网站至少由5个页面构成,除主页外,至少要包含四个主栏目,每个页面必须图文并茂,能较好地表达主题,切忌采用过多的文字、过多的图像或者过多flash,不允许添加视频。作品应体现Web的特点,网站结构完整,链接...

    e-comments:静态HTML页面的外部注释,一种轻量级的自托管Disqus替代品

    这是一个开放源代码的评论系统,使您可以在静态网站上添加评论,而无需担心使用诸如disqus之类的外部系统的隐私问题。 嵌入注释就像包含几个小javascript文件以及用于样式设置CSS文件一样简单。 特征: 多个后端...

    ASP.Net.Web程序设计

    在网页中使用CSS包括三种常用方式:将样式定义直接嵌入到标记符中、将样式定义嵌入到网页中以及将样式定义包含在外部CSS样式文件中. CSS(Cascading Style Sheet,层叠样式表)技术是一种格式化网页的标准方式,它扩展了...

    HTML5-CSS3

    1、网站至少由5个页面构成,除主页外,至少要包含四个主栏目,每个页面必须图文并茂,能较好地表达主题,切忌采用过多的文字、过多的图像或者过多flash,不允许添加视频。作品应体现Web的特点,网站结构完整,链接...

    wb养生设计.rar,有登录页面,不过没有导入数据库

    页面中不允许有链接错误,图片不显示错误。网站文件管理有序,无多余文件和文件夹,图片放在image文件夹中。页面首页有滚动播出的日期与时间。效果如:今天是2021年11月11日上午10点58分。(滚动效果自定义)

    JDK_API_1_6_zh_CN.RAR part3

    此 API(应用程序编程接口)文档包含对应于导航栏中的项目的页面,如下所述。 概述 概述 页面是此 API 文档的首页,提供了所有软件包的列表及其摘要。此页面也可能包含这些软件包的总体描述。 软件包 每个软件包都...

    JDK_API_1_6_zh_CN.RAR part1

    此 API(应用程序编程接口)文档包含对应于导航栏中的项目的页面,如下所述。 概述 概述 页面是此 API 文档的首页,提供了所有软件包的列表及其摘要。此页面也可能包含这些软件包的总体描述。 软件包 每个软件包都...

    JDK_API_1_6_zh_CN.RAR part2

    此 API(应用程序编程接口)文档包含对应于导航栏中的项目的页面,如下所述。 概述 概述 页面是此 API 文档的首页,提供了所有软件包的列表及其摘要。此页面也可能包含这些软件包的总体描述。 软件包 每个软件包都...

    JAVA API 函数详解

    此 API(应用程序编程接口)文档包含对应于导航栏中的项目的页面,如下所述。 概述 概述 页面是此 API 文档的首页,提供了所有软件包的列表及其摘要。此页面也可能包含这些软件包的总体描述。 软件包 每个...

    jsp中include指令静态导入和动态导入的区别详解

    静态导入指的是,将一个外部文件嵌入到当前JSP文件中,同时解析这个页面的JSP语句,它会把目标页面的其他编译指令也包含进来。include的静态导入指令使用语法: 代码如下:&lt;&#37;@include file=”relativeURLSpec...

    Tomcat6.0_API帮助文档

    此页面可以包含四个类别: 接口(斜体) 类 枚举 异常 错误 注释类型 类/接口 每个类、接口、嵌套类和嵌套接口都有各自的页面。其中每个页面都由三部分(类/接口描述、摘要表,以及详细的成员描述)组成: 类继承...

    超级有影响力霸气的Java面试题大全文档

    静态INCLUDE用include伪码实现,定不会检查所含文件的变化,适用于包含静态页面&lt;%@ include file="included.htm" %&gt; 26、什么时候用assert。 assertion(断言)在软件开发中是一种常用的调试方式,很多开发语言中都...

    WXSEVER-SMS:发送短信,并在外部浏览器拉起微信小程序的能力教程

    短信中会包含支持在微信内或微信外打开的静态网站链接,用户打开页面后可一键跳转至你的小程序。 这个链接的网页在外部浏览器是通过 URL Scheme 的方式来拉起微信打开主体小程序的。 总之,短信跳转能力的实现分为两...

    java 面试题 总结

    静态INCLUDE用include伪码实现,定不会检查所含文件的变化,适用于包含静态页面&lt;%@ include file="included.htm" %&gt; 23、什么时候用assert。 assertion(断言)在软件开发中是一种常用的调试方式,很多开发语言中都...

    php网络开发完全手册

    1.5 几种综合网络服务器系统的安装 14 1.5.1 XAMPP 14 1.5.2 WAMP 16 1.5.3 Appserv 17 1.5.4 EasyPHP 18 1.5.5 VertrigoServ 19 1.6 几种开发工具的介绍 20 1.6.1 Vi及Vim 20 1.6.2 Eclipse+PHPEclipse插件 21 ...

    织梦手机助手(PC WAP完美同步) v2.0.zip

    3、可生成HTML静态页面,易优化 4、自动识别自动调转 5、支持一键同步更新电脑手机版 织梦手机助手安装步数: ( 3分钟学会 ) 1.检测网站是否支持织梦手机助手 方法:进入网站后台 -&gt; 系统 -&gt; SQL命令行工具 -&gt; ...

    admb-project.github.io:开源ADMB Project网站存储库

    网站的存储库。 ADMB Project网站托管在。 它使用引擎将易于阅读的... 消息/ 包含用于将新闻项布置到单个页面中的页面。 支持信/ 包含David Fournier博士的Ricker奖励支持信。 工具/ 包含有关与ADMB一起使用的工具的

Global site tag (gtag.js) - Google Analytics