日志分类“Javascript”的日志存档

如何从子窗口向父窗口传递DOM节点？

星期二, 七月 7th, 2009

注：本文不考虑跨域问题

现在在做的项目有非常多的DOM操作，而且还有从iframe或者子窗口中向父级窗口传递DOM节点的需求。一开始，按照经验都是使用innerHTML来操作，其实后来证明使用innerHTML是最可靠和行之有效的方法，不过我在这个问题上面却绕了一点远路，想尝试尝试是否可以直接用DOM节点作为参数传递给父级窗口。

过程略~~~

结果是在Firefox、Opera、Chrome、Safari都可以将clone过的node插入到父级文档中去，唯有IE系列（IE8未验证）浏览器会在appendChild方法上报一个“参数无效”的错误，即便使用YUI或者jQuery来操作也是一样的结果，看来IE完全把它认作是其他页面的东西。当然这个外来节点还是可以被操作的，至少可以获取数据，这样我想如果建一个代理节点是否可以解决呢？事实证明，是可以的，这里做了一个很猥琐的操作：

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9

if($FHD.browser.msie){
	newDom = document.createElement(dom.tagName);
	for(var i in dom){
		try{
			newDom[i] = dom[i];
		}
		catch(e){}
	}
}

不过上面这样的操作我觉得太浪费资源了，其实有innerHTML，完全没有必要这样做，试想本来就是要想让后台程序获取到innerHTML，没有必要走DOM操作的弯路。可能有人会说innerHTML在IE下会有所有标签变大写和属性丢失引号的问题，这应该属于IE恶劣行径之一，其实写两个正则表达式就可以解决这个问题：

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9

//替换大写标签为小写的正则表达式
str_html = str_html.replace(/<\/?(a|abbr|acronym|address|applet|area|b|base|basefont|bdo|biq|blockquote|body|br|button|coption|center|cite|code|col|colgroup|dd|del|dir|div|dfn|dl|dt|em|fieldset|font|form|frame|frameset|h1|h2|h3|h4|h5|h6|head|hr|html|i|iframe|img|input|ins|kbd|label|legend|li|link|map|menu|meta|noframes|noscript|object|ol|optgroup|option|p|param|pre|q|s|samp|script|select|small|span|strike|strong|style|sub|sup|table|tbody|td|textarea|tfoot|th|thead|title|tr|tt|u|ul|var)([>|\s]+)/gi, function(m, m1, m2){
	return m.toLocaleLowerCase();
});
 
//为属性加回引号，并将属性名替换为小写的正则表达式
str_html = str_html.replace(/\s(\w+)="?([^">]+)"?([>|\s]+)/gi, function(m, m1, m2, m3){
	return ' ' + m1.toLocaleLowerCase() + '="' + m2 + '"' + m3;
});

不过IE的恶劣行径还没有完，li闭合标签丢失问题让我很想抽MS开发人员巴掌，大小写也就罢了，标签丢失可是大问题，这应该属于故障级BUG，为什么从IE6到IE7都没有修正呢？再扇他们两个巴掌。为此不得不再多写一个正则表达式：

?View Code JAVASCRIPT
1

str = str.replace(/(\/|a|abbr|acronym|address|applet|area|b|base|basefont|bdo|biq|blockquote|body|br|button|coption|center|cite|code|col|colgroup|dd|del|dir|div|dfn|dl|dt|em|fieldset|font|form|frame|frameset|h1|h2|h3|h4|h5|h6|head|hr|html|i|iframe|img|input|ins|kbd|label|legend|link|map|menu|meta|noframes|noscript|object|optgroup|option|p|param|pre|q|s|samp|script|select|small|span|strike|strong|style|sub|sup|table|tbody|td|textarea|tfoot|th|thead|title|tr|tt|u|var)>([\t\r\n\s]*)

以上均为完成项目为首要目标，对问题没有深究，尤其是IE中不能插入本文档流以外的DOM节点，不知道是什么原因，有ET路过的时候希望能留下点什么。

本文例程

07 标签：  
分类：Javascript
442 次访问 & 3 条评论 »