信息化 频道

从厦门PX化工项目谈环保信息化


二、 嵌入式框架—IFrame
    如果你在Web开发过程中尤其注重浏览器兼容性的问题,那么,你最好使用嵌入式框架。因为一些老式的浏览器支持IFRAME元素,但不支持XmlHttpRequest对象。当然,使用这种方案还有如下一些理由:
• 加载到一个IFRAME中的内容在装载的过程中被显示于浏览器中,这向终端用户显示一个可视化进程。
• 页面缓冲总是使用加载到一个IFRAME中的内容工作。注意,有关资料指出,某些版本的Opera浏览器尚不能较好地使用
XmlHttpRequest对象处理被缓冲的响应。
为此,我们可以把一个空IFRAME插入到每一个DIV容器中,并且在每一个IFRAME后添加一个简短的JavaScript语句,如下所示:
<div id="header">
<div style="height: 100px; width: 100%"></div>
<iframe id="header_iframe" style="height: 0px;"></iframe>
<script>loadIframe("header","/navigation/header.html")</script>
</div>
IFRAME的id应该等于以_iframe为后缀的占位符的id。这里的loadIframe函数使用了两个参数:占位符的id和要加载到其中的URL。
【技巧】如果你想在下载过程中使得IFRAME内容可见,那么你应该使用一个适当大小的IFRAME元素来替换在占位符内的空的DIV框。然而,如果你想使IFRAME保持不可见,那么你应该使用style属性来把它的高度设置为0以克服一些浏览器中的错误。
启动装载过程的loadIframe函数是很简单的:
function loadIframe(id,url) {
try {
var iframeObj = document.getElementById(id+"_iframe");
iframeObj.src = url ;
} catch (err) {
alert("cannot load "+url+" into "+id) ;
}
}
【注意】本文中所有示例代码都假定,浏览器兼容文档对象模型(DOM)。
然而,还没有一种机制来通知请求页面所希望的内容已经被加载到占位符IFRAME中。因此,被装载的内容必须通知父页面(经由一个JavaScript调用) 该内容已经可以使用了。实现这一操作的最好时机是在页面加载完成以后。因此,在IFRAME内容中的BODY标志应该包含一个onLoad事件:
<body onload="contentLoaded('header')" style="margin: 0px 0px;
padding: 0px 0px">
【技巧】加载到IFRAME中的内容的body部分应该总是有零尺寸的边距和填充空白;否则,当把它集成到父页面中时,它往往会产生轻微的移位。
在IFRAME的上下文中执行的contentLoaded函数将提取body部分相应的HTML内容并且把它传递到一个在父页面上下文中执行的函数,此函数将使用它来填充相应的占位符:
contentLoaded在IFRAME上下文的上下文中执行:
function contentLoaded(parentID) {
var myContent = document.body.innerHTML ;
parent.copyContent(parentID,myContent);
}
而copyContent却是在父web页面的上下文中执行:
function copyContent(id,content) {
try {
var placeholder = document.getElementById(id) ;
placeholder.innerHTML = content;
} catch (err) {
alert("无法把指定HTML内容复制到 "+id);
}
}
现在,细心的读者应该感到疑惑,为什么这么复杂?在IFRAME元素中加载导航元素不是更简单一些吗?事实证明,对于此方法还要加一些防止误解的说明为好:
• IFRAME具有固定的高度和宽度。如果内容彼此超出,则内容将被剪掉或者IFRAME要加上滚动条。然而,被复制到一个在父页面中的DIV元素中的HTML标记其大小却总是保持自动调整大小。
• 当在一个IFRAME中时,在导航内容中的链接(一个元素)将装载IFRAME中的新页面,除非你把target="_parent"添加到每一个链接之后。
• 依附到导航元素的JavaScript事件处理器将在IFRAME的上下文中工作(如果还保留这个上下文的话)。如果你把导航内容移动主页面上,那么事件处理器能够存取在主页面中定义的函数和变量。
【另注】IFRAME极大地影响到其所开发的网站的搜索引擎优化问题。如今,大多数人的观点是尽可能不要在以推广为主要目标的网站开发中使用此技术。本人也持有同样观点。因此,这种方案宜慎重选用为好。
0
相关文章