这是一种很有前途的技术,可惜生不逢时,ie刚打垮网景,火狐又冒出来了。这种技术是我在设计超级数组对象时发现的。由于直接继承原生数组问题多,我只有用object与array的原型方法构建一个新类。不用说,效率不太理想。直到我已把超级数组臻至完美的今天,我还在不断寻找新的替代方案,于是我就想到用另一个文档的数组对象来构建。经测试,ie下是完美的。后来我又发现早在2006年全知全能的de大神早已做了这样的探索,在《how to subclass the javascript array object》中应用这种技术,我只不过是重新把它发挖出来而已。但是,以后就没有下文了,de大神在他的base2类库构建array2对象时也没有应用这种技术。不明真相的我一头扎下去,哎呀!de大神你真坏,有陷阱也不通报声!
下面就拿de大神的例子改一下,演示究竟出了什么状况?!
window.onload = function(){
//创建一个iframe
var iframe = document.createelement("iframe");
iframe.style.display = "none";
document.body.appendchild(iframe);
// 取得iframe文档的数组对象
frames[frames.length - 1].document.write(
"
运行代码
为了方便,我把iframe中的文档对象的javascript环境中的数组对象称之为沙箱数组,意即,它不受本地数组对象影响。对,本地数组的原型进行扩展,不会殃及沙箱数组。俗话说,龙生龙,凤生风,老鼠的儿子会打洞!事实也应该如此!看,firefox与safari做了什么好事!沙箱数组变成原生数组了,我们在沙箱数组上做的扩展成了废物了!而且现在是linux大多数系统捆绑firefox,mac捆绑safari,真不好办……
别以为跨文档调用技术只能干这事,只是它的潜力还有待发掘而已。现在再解释一下上面那段用到的长长的定语。什么叫做“iframe中的文档对象的javascript环境……”?由于框架技术的发展,一个页面并不只有一个文档对象(在html5中,有关框架的标签只死剩iframe了)。最顶层的我们称之为本地文档,iframe与frame的文档我称之为沙箱文档。由于它们的相对独立性,人们最喜欢用iframe做富文本编辑器,省得调用document.execcommand( "backcolor", "", "red" )命令,整个页面都红了。不过,本地文档也好,iframe文档也好,它们都属于html文档。另,创建html文档也不单止iframe标签(frame标签我向来无视),还有activexobject与createdocument,domparser等方法。
activexobject是指activexobject("htmlfile"),谷歌的gtalk就是用它结合其他技术实现push的技术。activexobject("htmlfile")创建的文档是一个完美的html文档,它拥有document.title,document.body等html dom专有的属性,还能运行javascript。全局变量this就是我们要找的全局对象,它还拥有我们想要的一切,array,boolean,string,date,object等等。我们需要调用它们为我们做事,问题是标准浏览器能有像ctivexobject("htmlfile")这样便捷的方法创建另一个文档吗?这些文档能拥有独立的javascript运行环境吗?这正是我们下面要讲的。
w3c还真是实现了一些创建文档的方法,不过都比较偏~~~
利用createhtmldocument(title)创建文档
title参数为tilte元素的innertext。
window.onload = function(){
try{
var doc = document.implementation.createhtmldocument('跨文本调用技术 by 司徒正美');
var html = doc.documentelement
alert(html)//测试是否存在html元素
alert(html.tagname)//注意大小写,html文档会把元素节点的tagname与nodename大写化,按理应该会返回“html”
var body = doc.body
alert(body);//测试document.body
if("title" in doc){
alert(doc.title)//测试document.title
}
var head = doc.getelementsbytagname("head")[0]
alert(head);
if(head && "innerhtml" in head){
alert("head.innerhtml = "+head.innerhtml)//测试innerhtml,html文档的元素节点都会支持这属性,及head与title是否存在套嵌关系
alert("html.innerhtml = "+html.innerhtml)
}
if("outerhtml" in html){//outerhtml也是html5的标准api
alert("html.outerhtml = "+html.outerhtml)
}
var script = doc.createelement("script");
html.insertbefore(script,null);
script.appendchild(doc.createtextnode("alert('能调用javascript')"))//测试是否能动态解析脚本,注意这里是否弹出
var xpath = doc.evaluate && doc.evaluate('//title', doc, null, 7, null);
alert("测试xpath")
alert(xpath && xpath.snapshotitem(0) )
}catch(e){
alert("不支持createhtmldocument方法")
}
}
运行代码
ie6ie8firefox3.6safari4.0.4 opera10.50chrome5.0
能否创建文档
●
●
●
●
●
●
doc.documentelement为html标签
●
●
●
●
●
●
是否支持title属性
●
●
●
●
●
●
是否支持body属性
●
●
●
●
●
●
元素节点是否支持innerhtml
●
●
●
●
●
●
元素节点是否支持outerhtml
●
●
×
●
●
●
是否支持动态解析脚本
●
●
●
●
●
●
是否支持xpath
×
×
●
●
●
●
这种技术我算毫无保留地公开出来了,如果有谁知道怎样利用它创建一个不污染本地数组的数组类,也请不吝赐教!
======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定 这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/