`
Sing
  • 浏览: 61599 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

阅读更多
一.应用框架技术
要在宿主页面中嵌入外部页面的方法是,在宿主页面中包含外部页面的位置插入“<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中测试通过)。

个人感觉,还是iframe的比较好用
分享到:
评论

相关推荐

    CMS生成静态网页简单原理

    对于流量较大、内容更新频率适中的网站来说,采用静态网页生成策略是一种明智的选择。然而,值得注意的是,静态网页的生成并不适用于所有场景,特别是那些高度依赖实时交互和个性化体验的应用。因此,在选择是否采用...

    网上花店网页代码 html静态花店网页设计制作 dw静态鲜花网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

    1. **布局与样式**:本项目采用的是DIV+CSS布局方式,这是一种常见的网页布局方法,它能够灵活地调整页面元素的位置和大小,实现良好的视觉效果。CSS的应用不仅限于基本的布局,还包括字体、颜色、背景等细节的设计...

    html静态页面示例

    HTML静态页面是网页的一种形式,它在服务器上被预先生成,并且在用户请求时无需经过动态编程语言(如PHP、Python或Java)的处理,直接以已有的HTML代码发送给浏览器。这样的页面内容固定,更新时需要手动修改源文件...

    简单网页模版静态网页

    在互联网世界中,静态网页是一种常见的网页类型,它们由HTML、CSS和JavaScript等静态文件组成,不依赖服务器端的动态处理。本资源提供了一个简单的静态网页模版,适用于公司展示自身信息,无需复杂的后端编程,只需...

    后台HTML模板 20个HTML 静态页面 可以直接嵌入系统中用

    后台HTML模板是网页设计中的一种常见资源,尤其在构建企业级应用或管理系统时,它们能够为开发者提供一个快速启动的基础框架。本资源包含20个HTML静态页面,这些页面是专为后台系统设计的,可以直接嵌入到您的项目中...

    HTML静态页面

    HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言,它是互联网上静态页面的基础。HTML静态页面是指不依赖服务器端程序动态生成,而是预先编写好并以HTML文件形式存储在服务器上的网页。这些页面...

    公司静态页面模板

    在IT行业中,静态页面模板是构建网站的一种常见方式,尤其适用于小型企业或个人展示网站。"公司静态页面模板"指的是专为公司设计的、非动态交互的网页布局和设计,通常包括HTML、CSS和可能的JavaScript文件。这些...

    分页插件与静态页面管理

    静态页面是指那些无需服务器端脚本处理,直接由浏览器解析显示的网页。在Web应用开发中,静态页面通常用于展示固定的信息或者作为动态内容的基础框架。为了更好地管理和维护这些页面,通常会将它们集成到项目的某个...

    网站静态页面抓取器

    网站静态页面抓取器是一种工具或程序,用于自动下载并保存网页内容,特别是那些不涉及动态交互的HTML页面。在互联网大数据分析、搜索引擎优化(SEO)以及内容爬虫开发等领域,这种工具非常实用。了解其工作原理和...

    使用html+css实现一个静态页面【传统文化茶带音乐6页】HTML学生个人业设计.md

    - **开发工具**: 描述中列举了几种常用的HTML编辑器,如Dreamweaver、HBuilder、Vscode等。选择合适的编辑器能够提高开发效率。 - **代码库与资源**: 作者提供了多个链接指向不同的代码库和资源集合,这些资源对初学...

    闲云酒店_html+css纯静态页面_闲云旅游html_

    纯静态意味着页面不包含任何服务器端脚本,所有的内容都在客户端加载,这通常包括图片、文字、链接等元素。 【标签】"html+css纯静态页面 闲云旅游html" 是对项目技术特点和主题的关键词概括。"html+css纯静态页面...

    静态HTML网页模板源码——仿男装女装购物商城(40页功能齐全)

    - Flash动画:虽然在现代Web开发中已较少使用,但在早期网页设计中是一种常见的动态元素。 - Logo设计:对于品牌识别至关重要,这里可能提供了相关的源文件。 ### 二、网页效果 网页展示了多个不同的页面效果,...

    javaweb伪静态

    JavaWeb伪静态是一种技术,主要用于将动态网页转化为看似静态的页面,从而提高网站的SEO(搜索引擎优化)性能、减轻服务器负担以及改善用户体验。在实际应用中,动态网页的URL往往包含问号(?)、等号(=)以及参数...

    网页前端高级编程-实验报告-DIV静态页面布局.doc

    【网页前端高级编程-实验报告-DIV静态页面布局】这篇实验报告主要涵盖了网页前端开发中的几个关键知识点,包括HTML和CSS的使用,以及在实际页面布局中遇到的问题和解决方案。 1. **HTML与CSS基础**:实验中使用HTML...

    dotNET经典教程系列三:静态网页设计技术系列课程简介 (第一部分)

    #### 1.3 .NET 在静态网页开发中的应用 尽管 .NET 主要被用于开发动态网页,但它同样支持创建静态网页。开发者可以利用 .NET 的工具和技术来提高静态网页的开发效率和质量。 ### 二、层叠样式表 CSS 精要 #### 2.1...

    静态网站毕业设计论文

    超链接是网页中不可或缺的部分,可以分为内部链接和外部链接两种类型。 - **内部链接**:指向同一网站内的其他页面。 - **外部链接**:指向其他网站的页面。 在Dreamweaver中可以通过简单的操作来创建链接。 ####...

    静态网页制作

    在"我的网站"这个项目中,你可以从以下几个方面来实践和学习静态网页制作: 1. **规划页面结构**:首先,确定网页的布局和内容,用HTML创建基本框架。 2. **美化页面**:利用CSS设计页面的样式,使其美观且易于阅读...

    PHP单例模式数据库连接类与页面静态化实现方法

    - 静态方法中应包含判断实例是否存在以及创建实例的逻辑。 #### PHP单例模式数据库连接类实现 - **实例存储**:使用静态变量`$_instance`来保存类的实例。 - **构造函数**:私有化构造函数,防止外部创建实例。 - ...

    java/jsp网站实现伪静态

    在Java/JSP环境中,实现伪静态主要有以下几种方法: 1. **URL重写**:使用Apache的mod_rewrite模块或者Tomcat的RewriteFilter,通过配置规则将动态URL重定向到对应的JSP页面。例如,将`/article.html`映射到实际的`...

    Web应用开发技术实验报告-静态网页开发.docx

    ### Web应用开发技术实验报告-静态网页开发 #### 一、实验目的 本实验旨在让学生通过实际操作,深入了解和掌握Web开发的基础知识和技术。具体包括以下几个方面: 1. **熟悉HTML语言**: 学生需要掌握HTML的基本语法...

Global site tag (gtag.js) - Google Analytics