基于AJAX技术提高搜索引擎排名（3）

三、嵌入式框架

如果你关心浏览器兼容性的话，你应该使用嵌入式框架。一些老式的浏览器支持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属性来把它的高度设置为０以克服一些浏览器中的错误。

启动装载过程的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("Cannot copy HTML content into "+id);
　}
}

现在，细心的读者应该感到疑惑，为什么这么复杂？在IFRAME元素中加载导航元素不是更简单一些吗？事实证明，对于此方法还要加一些防止误解的说明为好：

·IFRAME具有固定的高度和宽度。如果内容彼此超出，则内容将被剪掉或者IFRAME要加上滚动条。然而，被复制到一个在父页面中的DIV元素中的HTML标记其大小却总是保持自动调整大小。

·当在一个IFRAME中时，在导航内容中的链接(一个元素)将装载IFRAME中的新页面，除非你把target="_parent"添加到每一个链接之后。

·依附到导航元素的JavaScript事件处理器将在IFRAME的上下文中工作（如果还保留这个上下文的话）。如果你把导航内容移动主页面上，那么事件处理器能够存取在主页面中定义的函数和变量。