javascript 跨文档调用技术javascript

这是一种很有前途的技术,可惜生不逢时,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

×

×

●

●

●

●

这种技术我算毫无保留地公开出来了,如果有谁知道怎样利用它创建一个不污染本地数组的数组类,也请不吝赐教!

2ch

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/