html 静态页面包含,这些HTML 静态页面中包含外部页面方法你知道吗?

一.Scriptlets组件技术

214f52a4105b3051b7577bc0108c37d4.png

应用这种技术的方法是在宿主页面中包含外部页面的位置插入“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控件,具有自己独立的事件、方法和属性。

二.应用框架技术

13ee3370ded182147f78d246d4b957ec.png

要在宿主页面中嵌入外部页面的方法是,在宿主页面中包含外部页面的位置插入“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)这样可以在宿主页面中的任何位置插入。

三.使用脚本文件技术

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

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

四.使用内置行为技术

c8ee529ddf7de92b69f974c704da7a3f.png在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,就可以实现更为复杂的功能。

如果你喜欢这篇文章,可以关注作者网易号,每天都会有精彩web干货与你一同分享哦!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值