外部文件
翻译: QQlan

(译者语: 大家都知道在HTML中导入外部文件一般用IFRAME (for IE ) , LAYER (for NS )
本文提供了完整的解决两个Browser的方案, 如果你只是简单的应用, 只需要写如IFRAME和LAYER, 但是如果你需要不仅导入外部文件, 还要动态的改变, 相信读完本教程会给你一个全面的解答. )


层的内容可以调用外部的文件. 但是写给IE和NC的代码是完全不同的,你必须分别处理.

有两个办法达到目标.

技巧1: 使用LAYER和IFRAME
CSS1没有调用外部文件的方法.但是这两个browser却各自有办法做到.

Netscape的旧的LAYER标签的(SRC)属性可以调用外部文件,下面是例子:




layer的方式和CSS类似,只不过它是layer标签属性不是样式表.

但是IE不认可Netscape独创引进的LAYER. 读到LAYER标签, IE会忽略跳过. IE有自己的IFRAME来调用外部文件, 一个内置frame, 就象frames的工作方式一样. 你可以和LAYER一样把IFRAME放在也面的任何位置:

可以把他们写在一起满足不同browser的需要.

范例: www.dansteinman.com/dynduo/examples/source1-layeriframe.html(LAYER-IFRAME 例子) 外部文件:http://www.dansteinman.com/dynduo/examples/source1-layeriframe-text.html

(译者语: 以上就是导入固定的外部文件的全部代码.
下面的教程是关于如何动态的导入不同的外部文件 )

修改源文件
在Netscape中,改变.src的属性来修改源文件.
document.layerName.src = "newfile.html"

在IE中, 你可以象改变普通的frame一样改变src
parent.frameName.document.location = "newfile.html"

现在我们可以写一个统一的function,包括了IE和Netscape:

function load(page) {
    if (ns4) document.textLayer.src = page
    else if (ie4) parent.textFrame.document.location = page
}

我们可以在页面中这样调用:
load("newpage.html")

范例:http://www.dansteinman.com/dynduo/examples/source2-change.html (允许交换内容)
外部文件: www.dansteinman.com/dynduo/examples/source2-change-text1.html
和: www.dansteinman.com/dynduo/examples/source2-change-text2.html

有利之处 :

• 在layer/div中的内容立即生效
  
• 你还可以调用javascript function, 只要你增加一点其他命令.
  

比如, 在主文档中调用function 你必须使用 parent.functionName() 代替 functionName()
. 这是因为IE中, 即使看上去不象 ,但是正文是在另一个frame中.

不利之处 :

• 和使用普通的frame一样,IFRAME有他的缺点. 他们是不透明的,并且你不能继续叠加其他的层在它上面.
  
• IFRAME不仅不透明,而且很难精确的控制它,因为当IE redrao它的时候会产生摇晃不稳定.
  

希望下一个版本将包含CSS属性象 source:URL(filename.html) 解决这些问题. 现在除了传统的方法, 你还可以尝试技巧2.

技巧2: 使用IFRAME作为缓冲器

IE里面可以使用 interHTML 特性, 你可以把内容从IFRAME中转移到常规DIV中,这样就避免了IFRAME的麻烦. 唯一的缺陷是使用这个技术你得到的不是真正的HTML,而是"virtual" 层. 这会使你的内容页面缺乏灵活性. 在这里面调用javascript难度将比较大--我几乎不想进入这个问题的研究. 推荐大家仅仅在页面内容相对静态的情况下使用.

首先需要一个IFRAME作为"缓冲器". 你可以按老习惯写:



然后你放置一个用来装载内容的DIV:

下来是javascript. 这个function可以达到目标:

function loadSource(id,nestref,url) {
    if (ns4) {
        var lyr = (nestref)? eval('document.'+nestref+'.document.'+id) : document.layers[id]
        lyr.load(url,lyr.clip.width)
    }
    else if (ie4) {
        parent.bufferFrame.document.location = url
    }
}
function loadSourceFinish(id) {
    if (ie4) document.all[id].innerHTML = parent.bufferFrame.document.body.innerHTML
}


这个function的主体部分在Netscape中立即下载DIV和外部文件. 在IE中下载名为 bufferFrame 的缓冲器和外部文件. 下一个问题是你需要检测什么时候外部文件下载完毕,然后就可以把内容放到frame,DIV中. 我意识到让这些同时在Netscape中实现也很重要,所以决定使用BODY onLoad这些外部文件. 你只要调用 loadSourseFinish() function, 以几找到哪个DIV需要被更新.

调用外部文件到此解决了. 下面是我在这个例子中使用的外部文件:








This is my text. This is my text. This is my text. This is my text.
This is my text. This is my text. This is my text. This is my text.





范例: www.dansteinman.com/dynduo/examples/source3-buffer.html (IFRAME缓冲器)





-------------------------------------------------------------
5DMedia版权所有,转载请注明出处!