当前位置: 代码迷 >> Web前端 >> Prototype1.6.0在IE8 9上的有关问题
  详细解决方案

Prototype1.6.0在IE8 9上的有关问题

热度:267   发布时间:2012-10-08 19:54:56.0
Prototype1.6.0在IE8 9下的问题

最近项目需要,得做一个tab的界面出来,在网上找了一个还算合适的插件,aptabs.js,http://www.javascriptkit.com/script/script2/apTabs/index.shtml

官方说是兼容?IE6-7, IE8 beta2, Opera9, Chrome 0.3, Safari 3.1 Win, and Firefox 2-3.这些浏览器,我看能兼容IE6-7一开始就没想,想当然的认为在IE 8 9 下应该也是可以的,可是当我真正把该插件用于项目后,没想到在IE8-9下测试时,出问题了一个prototype库的函数在IE8-9下竟然获取不到dom元素,在 IE 7 ff4 chrome10下都正常,这下我就纳闷了,难道IE8-9的bug比IE7还多么,调试了好久,又查看prototype文档,依然有问题。后来在寻找问题的过程中,把prototype的版本换了试试,于是下了一个最新版的prototype,这一下果然解决问题了。本人系js的初学者,也搞不太清楚这其中的问题是神马,难道是prototype本身的问题么?希望有知道的牛人们能看看 我这个例子,追究下根源,给我们这些菜鸟解解惑啊!!!

? ? 下面说下所用的版本,开始用的是prototype1.6.0.2+aptabs1.0.0,后来改用prototype1.7.0.0+aptabs1.0.0,

? ? 下面贴会出错部分代码,例子在附件里

?

	add: function(e, tab) {
		var newTab = false;
		if (typeof(e) == 'string') {
			e = $(e);
			newTab = true;			
		}

		var tabLabel = new Element('li', {
			'class': 'tabLabelActive',
			'style': 'width:' + apTabs.tabWidth + 'px'
		});
		tabLabel.onmouseover = function() {
			if (!tabLabel.firstChild.style.backgroundImage.include('tabLeftOver')) {
				tabLabel.firstChild.style.backgroundImage = 'url(' + apTabs.img['tabLeftActive'].src + ')';
				tabLabel.lastChild.style.backgroundImage = 'url(' + apTabs.img['tabRightActive'].src + ')';
			}
		};
		tabLabel.onmouseout = function() {
			if (!tabLabel.firstChild.style.backgroundImage.include('tabLeftOver')) {
				tabLabel.firstChild.style.backgroundImage = 'url(' + apTabs.img['tabLeftInactive'].src + ')';
				tabLabel.lastChild.style.backgroundImage = 'url(' + apTabs.img['tabRightInactive'].src + ')';
			}
		};
		
		var tabLabelA = new Element('div', {
			'class': 'tabLabelLeft'
		}).update(tab.title);
		tabLabelA.onclick = function() {
			apTabs.show(e, tabLabelA.parentNode);
		};		
		tabLabel.insert(tabLabelA);		

		var tabLabelClose = new Element('div', {
			'class': 'tabLabelRight',
			'style': 'background-image:url(' + apTabs.img['tabRightInactive'].src + ')'
		});
		tabLabel.insert(tabLabelClose);
		
		if (typeof(tab.close) == 'undefined' || tab.close == true) {
			var closeImg = new Element('img', {
				'src': apTabs.img['closeInactive'].src,
				'style': 'margin-top:6px'
			});
			closeImg.onclick = function() {
				apTabs.remove(e, closeImg.parentNode.parentNode);
			};
			closeImg.onmouseover = function() {
				closeImg.src = apTabs.img['closeOver'].src;
			};
			closeImg.onmouseout = function() {
				if (closeImg.parentNode.style.backgroundImage.include('tabRightOver')) {
					closeImg.src = apTabs.img['closeActive'].src;
				}
				else {
					closeImg.src = apTabs.img['closeInactive'].src;
				}
			};
			tabLabelClose.insert(closeImg);
		}

		e.down('.tabLabels').insert(tabLabel);
  /*IE8-9下抛的错误为:SCRIPT5007: 无法获取属性“insert”的值: 对象为 null 或未定义 
*/
		
		tabLabelA.style.width = parseInt(tabLabel.getWidth() - 5 - 23) + 'px';

		apTabs.updateScrollButtons(e);

		var tabContent = new Element('div', {
			'class': 'tabContent',
			'style': 'height:' + (parseInt(e.style.height) - 29 - (apTabs.contentPadding * 2)) + 'px;padding:' + apTabs.contentPadding + 'px'
		});

		apTabs.hideAll(e);
		e.down('.tabsContent').appendChild(tabContent);
		
		if (tab.html) {
			tab.type = 'html';
			tab.content = tab.html;
		}
		else if (tab.ajax) {
			tab.type = 'ajax';
			tab.content = tab.ajax;
		}
		else if (tab.iframe) {
			tab.type = 'iframe';
			tab.content = tab.iframe;
		}
		
		if (tab.type == 'html') {
			tabContent.innerHTML = tab.content;
		} else if (tab.type == 'ajax') {
			new Ajax.Updater(tabContent, tab.content, {
				evalScripts: true,
				onLoading: function() {
					tabContent.innerHTML = 'Loading...';
				}
			});
		} else if (tab.type == 'iframe') {
			var iframeHeight = parseInt(e.style.height) - 29;
			var iframeWidth = (apTabs.is_ie6) ? parseInt(e.style.width) - 2 : parseInt(e.style.width);
			tabContent.setStyle({
			  padding: '0px',
			  height: eval(parseInt(tabContent.style.height) + apTabs.contentPadding * 2) + 'px'
			});
			tabContent.innerHTML = '<iframe width="' + iframeWidth + '" height="' + iframeHeight + '" margin="0" padding="0" frameborder="0" src="' + tab.content + '"></iframe>';
		}

		apTabs.setLabelInnerWidth(e);
		
		if (newTab) {
			apTabs.scroll(e, 'last');
			apTabs.show(e, apTabs.getNbTabs(e));
		}
		apTabs.updateScrollButtons(e);
	},

?

?