首页 - 标签 - 登陆 | emlog - 我们的动漫

IE的document.getElementById混淆name和id属性的BUG

2008-10-15 22:54 Wednesday
作者：朦朧中的罪惡 | 标签: JavaScript 原创

前不久我在开发中遇到了在IE下Form.submit()的一个BUG,没想到IE的BUG还不只这么一个,下面我来介绍我遇到的另外一个关于document.getElementById的BUG.

BUG演示

页面演示在这里,代码在下面

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>IE document.getElementById BUG DEMO</title> 
  6. </head> 
  7.  
  8. <body> 
  9. <script language="javascript"> 
  10. /*  
  11.     IE document.getElementById BUG 演示DEMO  
  12.     作者:朦朧中的罪惡  
  13.     博客:http://be-evil.org  
  14. */  
  15. function changeValue()  
  16. {  
  17.     var username = document.getElementById('username');  
  18.     username.value = 'Whahaha';  
  19. }  
  20. </script> 
  21. <form action="IE_BUG2.html" method="get"> 
  22. <p>name:<input type="text" name="username" /></p> 
  23. <p>name2:<input type="text" id="username" name="name" /></p> 
  24. <p><input type="button" value="改变" onclick="changeValue();" /></p> 
  25. </form> 
  26. </body> 
  27. </html> 

很简单的一段代码,看上去似乎没有任何错误,但是在IE下点击改变按钮后,被改变值的对象居然是第一个name属性为username的input对象.而不是第二个id属性为username的对象. 

 

阅读全文>>

评论(0) | 引用(0) | 65次阅读

IE中使用JavaScript中调用form.submit()提示“对象不支持此属性和方法”问题研究

2008-8-20 17:32 Wednesday
作者：朦朧中的罪惡 | 标签: JavaScript 原创

今天在项目中无意中遇到的一个神奇的问题，特此记录。 

首先我们看看以下代码，测试页面可以看这里,页面的功能和逻辑很简单。

这段代码从逻辑上看没有任何错误和BUG，理论上是可以完全执行的。

<html>
    <head>IE 测试</head>
<body>
<script language="javascript">
/*
======================================
    IE 下 submit 重名测试
    作者：朦朧中的罪惡
    博客：http://be-evil.org
======================================
*/
function dosubmit()
{
    var theform = document.getElementById('theform');
    theform.submit();
}
</script>
    <form method="post" id="theform">
        <table width="800">
            <tr>
                <td><input type="text" value="测试"></td>
            </tr>
            <tr>
                <td><input type="button" name="submit" value="提交" onclick="dosubmit()"></td>
            </tr>
        </table>
    </form>
</body>
</html>

 

 

==================================================================

本文系原创文章，转载请注明文章源自思想之地 http://be-evil.org，作者：朦胧中的罪恶

==================================================================

如果用Firefox查看这个页面并点击提交按钮，表单会正常提交，但是我们换到IE下面，IE却会提示“对象不支持此属性和方法“ 而停止提交的操作。

这是怎么回事呢？经过我多方的查找资料，发现是提交按钮的name="submit"的属性在捣乱。

此时我们将theform.submit();注释掉，新起一行输入alert(theform.submit.value);刷新页面后再次点击提交，弹出的窗口上会显示”提交“两个字，神奇了！theform.submit居然是提交按钮而不是theform的方法了!

为什么会出现这个问题呢，因为在IE下可以通过 表单.表单元素名称 这样的方式获得一个表单下的所有表单元素，但是巧就巧在这里，如果某个表单元素的名称和表单的方法名重名的话那么IE就会优先将名称解析为某个表单元素，而不是表单的方法，此时就会出现这个神奇的问题了。

评论(0) | 引用(0) | 100次阅读

Discuz!编辑器附件添加原理不完全研究

2008-6-13 13:39 Friday
作者：朦朧中的罪惡 | 标签: JavaScript php 原创 Discuz!

Discuz!在6.0版的时候推出了自己的编辑器,除了它常用的编辑功能之外有一个很有特色的功能就是附件无上传插入.

用这个这个功能人都会发现在编辑时只要在本地选择了文件附件无需上传即可将它插入到帖子内容中,图文并排在第一次发贴的时候就可以实现,而不像一些传统程序必须上传了附件才可以插入到编辑器中.

作为开发者的我对这个功能实现的方式非常感兴趣,花了一点时间来研读了一下Discuz!编辑器此功能的代码.

本文分析的Discuz!版本为6.0,涉及的javascript和php文件包括

include/javascript/post_attach.js

include/javascript/post_editor.js

include/javascript/bbcode.js

include/newthread.inc.php

代码版权归康盛创想公司所有

阅读全文>>

评论(1) | 引用(0) | 466次阅读

在线正则表达式测试工具Regex Tester

2008-6-8 23:20 Sunday
作者：朦朧中的罪惡 | 标签: JavaScript

最近无意中发现一个在线测试正则表达式的网站http://regexpal.com/

它提供所见即所得的正则表达式匹配方式,将你写的正则和匹配的字符串直接高亮标出,非常方便快捷..

 附件[ematt:94]

和emlog 一样 Regex Tester 是开源的,它对于经常要调试正则表达式的程序员来说是开发编程,居家旅行之必备工具...

好东西 收了~!

评论(0) | 引用(0) | 285次阅读

Pro JavaScript系列讲座(2):对象基础

2008-6-5 21:38 Thursday
作者：朦朧中的罪惡 | 标签: JavaScript Pro JavaScript系列讲座

JavaScript世界中对于对象的定义：（来自ECMAScript规范）

“unordered collection of properties each of which contains a primitive value, object, or function.” （也就是无次序的一组值）

阅读全文>>

评论(1) | 引用(0) | 144次阅读

Pro JavaScript系列讲座(1)

2008-6-4 19:32 Wednesday
作者：朦朧中的罪惡 | 标签: JavaScript Pro JavaScript系列讲座

本文系转载,来源和出处不明

阅读全文>>

评论(0) | 引用(0) | 115次阅读

IE6和IE7中document.getElementsByName用法问题

2008-5-27 15:21 Tuesday
作者：朦朧中的罪惡 | 标签: JavaScript

今天在前台开发项目中发现一个费解的问题:
我想使用document.getElementsByName获得页面中一些拥有相同name属性的TD标签元素.
该功能代码在FireFox下调试的一切正常,但是转到IE下无论是IE6还是IE7无法正确获得这些元素,调试时发现得到的返回的数组长度为0.既然FF下正常工作,那么这很明显是一个浏览器兼容问题,查找资料后得到如下结论:

在IE下只有以下标签支持Name属性
A, APPLET, BUTTON, FORM, FRAME, IFRAME, IMG, INPUT, OBJECT, MAP, META, PARAM, TEXTAREA ,SELECT

其他的如DIV,TD等标签是无法用getElementsByName方法来获得的.

囧....

看来得想其他的方法来解决这个问题了

评论(0) | 引用(0) | 321次阅读

JavaScript得到当前窗口的所有大小值

2008-1-21 14:09 Monday
作者：朦朧中的罪惡 | 标签: JavaScript

  var     s   =   "";  
  s   +=   "\r\n网页可见区域宽："+   document.body.clientWidth;  
  s   +=   "\r\n网页可见区域高："+   document.body.clientHeight;  
  s   +=   "\r\n网页可见区域宽："+   document.body.offsetWidth     +"   (包括边线和滚动条的宽)";  
  s   +=   "\r\n网页可见区域高："+   document.body.offsetHeight   +"   (包括边线的宽)";  
  s   +=   "\r\n网页正文全文宽："+   document.body.scrollWidth;  
  s   +=   "\r\n网页正文全文高："+   document.body.scrollHeight;  
  s   +=   "\r\n网页被卷去的高："+   document.body.scrollTop;  
  s   +=   "\r\n网页被卷去的左："+   document.body.scrollLeft;  
  s   +=   "\r\n网页正文部分上："+   window.screenTop;  
  s   +=   "\r\n网页正文部分左："+   window.screenLeft;  
  s   +=   "\r\n屏幕分辨率的高："+   window.screen.height;  
  s   +=   "\r\n屏幕分辨率的宽："+   window.screen.width;  
  s   +=   "\r\n屏幕可用工作区高度："+   window.screen.availHeight;  
  s   +=   "\r\n屏幕可用工作区宽度："+   window.screen.availWidth;  
  s   +=   "\r\n你的屏幕设置是   "+   window.screen.colorDepth   +"   位彩色";  
  s   +=   "\r\n你的屏幕设置   "+   window.screen.deviceXDPI   +"   像素/英寸";

评论(0) | 引用(201) | 503次阅读

JavaScript在IE下设置innerHTML时出现"未知的运行时错误"

2008-1-14 14:31 Monday
作者：朦朧中的罪惡 | 标签: JavaScript

今天在项目开发中遇到的比较郁闷的问题，特此记录：

程序代码思路大致如下,想动态的改变tr标签的innerHTML内容,但是IE却报"未知的运行时错误",让我百思不得其解.

<script>

document.getElementById('trone').innerHTML = '<td>haha</td>';

</script>

<tr id=‘trone’></tr>

在网上一段查找获得以下解法:

在Ajax里经常会通过innerHTML来改变界面，这个比使用DOM要简单一些。
比如：
element.innerHTML = "<b>something</b>"
不过，在IE中，有时候会出现"未知的运行时错误(unknown runtime error)",而在firefox里不会。

这主要是IE在对innerHTML进行写操作的时候会检查element是否具备做为这些内容中html对象容器的要求，比如如果你是在一个p里加入包含<li>的html代码，这是会出错的。所以如果你发现这些错误出现，尝试做两件事情：

1、检查你尝试加到innerHTML的html代码是否包含破损的html标签，如没有<ul></ul>包围的<li></li>.
2、把你的容器改成那些比较“包容”的标签，如<span></span>,<div></div>

特别注意的是<tbody>,<table>,<tr>标签里面加正确格式的<td>标签都有可能出错，所以应该避免使用这些标签作为容器，必要时可以用<td>作为容器，再锲套一层表格。

评论(0) | 引用(204) | 815次阅读

JavaScript生成ifame导致IE报无法打开搜索页的解决办法

2007-11-29 20:28 Thursday
作者：朦朧中的罪惡 | 标签: JavaScript iframe 错误

今天修改客户网站时遇到一个奇怪的问题，情况如下：

用JavaScript动态生成一个浮动层浮动层内嵌一个<iframe>标签显示相关内容，页面载入后显示，一分钟后自动消失，一分钟后再次出现。但是奇怪的问题出现了，每次页面载入后，IE浏览器弹出信息框提示“internet explorer 无法打开 internet 站点”的提示。运行的JavaScript如下：

var flying;
Creatimg_div();
function Creatimg_div()
{
 if (document.readyState!="complete") return ;
 var span = document.createElement('span');
 span.setAttribute('id','haha');
 span.innerHTML = '<DIV id="followDiv2" style="Z-INDEX: 10; POSITION: absolute;  width:80px; height:60px;left:450;top:300"><iframe name="book" src="index_image.asp" frameborder="0" width="124" height="188" scrolling="no"></iframe></DIV>';
 document.body.appendChild(span);
 flying = setInterval('fly()',1);
 setTimeout('Close_div()',60000);
}
function Close_div() {
 var div = document.getElementById('haha');
 div.parentNode.removeChild(div);
 clearInterval(flying);
 setTimeout('Creatimg_div()',60000);

}
function fly()
{
 var followObj  = document.getElementById('followDiv2');
 var x = document.body.clientWidth-600;
 var y = document.body.clientHeight-400;;
 var followObj_x  = (typeof(x) == 'string' ? eval(x): x );
 var followObj_y  = (typeof(y) == 'string' ? eval(y): y );

 if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x) ) {
  var dx = (document.body.scrollLeft + followObj_x-followObj.offsetLeft)*delta;
  dx = (dx>0?1:-1) * Math.ceil(Math.abs(dx));
  followObj.style.left=followObj.offsetLeft+dx;
 }

 if(followObj.offsetTop!=(document.body.scrollTop + followObj_y)) {
  var dy = (document.body.scrollTop+followObj_y - followObj.offsetTop)*delta;
  dy = (dy>0?1:-1) * Math.ceil(Math.abs(dy));
  followObj.style.top = followObj.offsetTop + dy;
 }
}

经过检查，脚本完全无错，但是每次页面载入都是报错，让我百思不得其解。参考相关资料后我得出以下结论：在页面载入时运行这段脚本生成了一个<iframe ，但是页面并没有完全载入完成就开始解析<iframe ，<iframe 还没引发完成就跳转，导致游览器中断，所以就出现了 “internet explore 无法打开internet站点...，已终止操作”的结果。

文件原因找到了，解决的方法也很简单：

延缓调用生成浮动层的函数，这样可以等待页面载入完毕后再生成<iframe，这样就可以避免导致浏览器解析中断。

代码修改：

将直接运行

Creatimg_div()

修改为

setTimeout('Creatimg_div()',1500);

用setTimeout延时1.5秒启动函数即可。

评论(0) | 引用(201) | 837次阅读