[转]web开发过程中要注意的问题(一)

1,document.getElementById方法只能获取到一个对象,即使有多个同名的对象,也只取第一个具有该名称的对象,例如在一个form(名称为myform)中,有三个id="mycheckbox"的复选框,那么使用document.getElementById("mycheckbox"),返回的是第一个checkbox对象,而不是返回一个数组,如果使用document.myform.mycheckbox则返回一个数组。

2,使用showModalDialog打开一个页面,则在这个页面中,对于任何链接和任何表单提交,都会在新的窗口中执行,即使你在链接或form中指定了target="_self"也是没有用的。例如使用showModalDialog打开一个test.html,在该页面有一段代码
<a href="test2.html" target="_seft">打开</a>
如果点击该链接,那么将会在新窗口中打开test2.html,至少在ie中是这样的。

3,在一个页面含有某个iframe,其id="myframe" name="myframe",此时使用document.getElementById("myframe")取到的是iframe标签对象,通过该对象可以获取iframe的各个属性,例如src、frameborder、style等等,但是不能获取到iframe所包含的子页面的各个对象。如果使用document.frames("myframe")取到的是iframe组件对象,通过该对象可以获取到iframe所包含的页面的子页面的各个对象,例如子页面的window对象,但是不能获得iframe标签得各个属性,例如上面说到的src等等。请参看如下类似代码:
1.html
<script>
  function check(){
    var obj1=document.getElementById("myframe");
    alert(obj1.src);
    //alert(obj1.window.document.myform.username.value);//Error
    var obj2=document.frames("myframe");
    alert(obj2.window.document.myform.username.value);
    //alert(obj2.src);//Error
  }
</script>
<body οnlοad="check()">
  <iframe id="myframe" name="myframe" src="2.html" frameborder="3" style="width:300;height:200;border-width:1;border-color:red;border-style:solid"></iframe>
</body>
2.html
<body>
  <form name="myform">
    用户名:<input type="text" name="username" value="test" />
  </form>
</body>

4,在table中,如果在table中加入border="1" bordercolor="red",那么table中所有单元格都会加上厚度为1的红色边框,但是如果在table中加入css style="border-width:1;border-color:red;border-style:solid" 那么只会在整个table的最外面加上厚度为1的红色边框,分别如下图所示:

当然第一个出现了双边框,这是因为没有设置cellspacing的缘故,只要在table中设计cellspacing="0",那么就变为单边框了。

5,许多时候我们需要在页面加载时能够通过javascript去动态操作html中的一些对象,对于这些操作我们最好是在body中定义onload操作,然后在该操作中去完成这些任务,尽量避免在html中嵌入script执行代码,因为对于比较大的页面,当这些脚本执行的时候,页面往往还没有加载完毕,因此许多页面对象还没有被生成,此时动态去改变很可能会报异常。

6,有时候我们需要在iframe子页面中调用父页面的javascript函数,例如在父窗口中定义了一个函数如下:
<html>
  <script>
    function loadImage(){
       //...
   }
 </script>
<body>
//...
</body>
</html>
那么在iframe子页面中可以通过parent.loadImage()来实现调用,这也说明用户在页面定义的所有javascript函数都属于window对象之下。那么在父窗口如何调用子窗口中的函数呢,应该很简单了,就是获得子窗口对象,然后调用子窗口对象的window对象下的这些函数即可,例如iframe的name为myframe,在子窗口定义了一个函数getUserName,那么父窗口中的调用方式为document.frames("myframe").getUsername();另外对于父窗口调用子窗口中的方法,还要注意一个问题,就是子窗口的加载有时候会比较慢,如果子窗口正在加载,那么此时它的各种页面对象都不存在,那么当在父窗口调用子窗口的方法时,为了保险可以使用借助setTimeout来实现异步调用,即通过setTimeout指定一定时间之后(例如100ms),再执行调用,调用执行总是判断子窗口页面是否加载完毕,如果没有加载完毕,则继续使用setTimeout方法,循环往复直到子窗口被完全加载,然后执行子窗口的函数调用。既然这里解释了窗口间的异步调用,后面就不专门解释了。

7,在一个网页中如何最小化窗口,当然你可能会说,网页的右上角不是有最小化、最大化和关闭三个按钮吗,当然了这里说这个问题是指,如果不点击网页右上角的最小化,如何实现网页的最小化操作,例如有些项目中,用户需要办公界面是全屏化的,这意味着网页自己提供的许多操作都不可见,更不用说去操作了。在网络上我们搜索最小化的解决方式,我们会发现千篇一律的使用如下的方式实现:
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> 
<param name="Command" value="Minimize"></object>
<input type=button value=最小化 οnclick=hh1.Click()> 
在win98和windows2000中这个方式可能是可以的,但是在windows XP中却是不再支持了,不仅如此在windows XP中对javascript不少函数做了限制。那么在XP中如何实现最小化呢,一个可以实现的方式就是自己写一个activeX控件,这个是在项目中证明可以实现的。(如要认为activeX控件很难写,也不要以为activeX控件用户不接受,在实际的项目中如果用户使用的都是ie,那么用户一般是会接受的,当然这里的项目最好是内网办公项目,对于公网项目来说,用户接不接受就很难说了)

8,注意td中nowrap的使用,这个属性是很有用的,例如如果一个td中含有多张图片,那么如果不加入nowrap,那么很可能这些图片会由于其它的td的挤压而产生细微的上下错位,这表现的页面上就是某处出现了一条横向的细缝。这一点很重要,页面中许多非常奇怪的现象都与此有关。

9,对于showModalDialog弹出的页面,不能使用右键菜单,也不支持F5和ctrl+r刷新,如果此时修改弹出页面的内容,那么必须关闭该窗口,然手重新弹出才可以。另外,对于许多web服务器,由于服务器都设置有缓存,如果修改了弹出页面的内容,那么许多时候只是关闭弹出页面还是不够的,往往还需要关闭弹出该页面的那个页面才可以。在这里多说一句,web开发许多奇怪的页面现象都和web服务器的缓存有着很大的关系,因此出现问题时考虑一下是否是由于服务器的缓存所致。

10,我们喜欢在form中定义onsubmit操作,主要是为了在表单提交之前可以做一些有意义的操作,例如检查输入域的有效性检查等等,但是一定要注意,如果我们通过点击该form中的submit按钮(type=submit或type=image)提交表单,那么该onsubmit操作会被执行,但是如果通过document.formName.submit()提交表单,那么此onsubmit操作将不被执行。

11,许多时候我们修改了页面的内容,但是我们刷新页面或重新打开该页面,却看不到修改的效果,除了前面提到过的showModalDialog和缓存的情况要考虑外,还要检查一下是否改对了地方,即你修改的那个页面是否是服务器上的那个页面,有可能你修改了其它地方的一个页面,如果不是这个原因,那么再进行其它方面的检查。

12,在没有系统规划好之前,请不要在css中定义html标签的统一行为,即下面的形式:
<style>
  TABLE{font-size:11pt;color:black;}
  INPUT{border-width:1;border-color:pink;border-style:solid}
</style>
因为一但定义了这些标签的属性,那么这将会影响页面中所有的这些标签属性,尤其在一些公用的css文件中,尽量不要定义html标签的统一行为。当然如果经过了系统的良好的规划,那么这样做将是非常好的,只是在国内在css上经过良好规划的并不多,因此虽然我们见到许多项目和产品中对html标签做了许多css的定义,但是真正起到作用的并不多。

13,在html标签中有许多属性的名称都是复合词,例如borderColor、frameBorder、readOnly等等,注意这些复合词在html的书写,一般来说我们在html标签中写为borderColor和bordercolor,各个浏览器的解析都会通过,但是我们在使用javascriopt引用这些属性时却需要注意了,一定使用正确的属性名称,严格来说,对于复合词而言,除了第一个有意义的词之外,其它任何有意义的词的首字母都要大写,例如对于上面列出的三个属性的引用,一定要使用borderColor、frameBorder、readOnly的形式。
<input type="text" id="myinput" readonly />
<script>
    var flag=document.getElementById("myinput").readOnly;//正确的方式
    //var flag=document.getElementById("myinput").readonly;//错误的方式
</script>

 

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值