前端开发部分总结[兼容性、DOM操作、跨域等]（持续更新）

项目背景：.Net 3.5+MySQL+jQuery+WebService
在公司做这个项目已经6个多月了，总结一些问题，也算是抛砖引玉吧，希望园子里更多的朋友一起分享一些技巧。
1、 WebService方法返回值不能为void。
当WebService方法返回值为void时，FF和Chrome会持续等待，认为这个请求没有结束，而在IE中一切是正常的。
2、当input的type="button"时或者使用button时，点击后会触发form的submit。
当时查找页面刷新的问题找了很久，最后才发现是button会自动触发form的submit，导致当前页面的刷新。
3、js设置document.domain只能从二级域名设置到顶级域名。
比如访问moozi.cnblogs.com，可以在这个页面中写document.domain='cnblogs.com';如果把域设置为cnblogs.com之后，无法再使用document.domain='moozi.cnblogs.com';。
4、使用DOM片段创建iframe，当跨域时，不能用js写iframe的域。
比如你在moozi.cnblogs.com/test.html页面用js把域设置为document.domain='cnblogs.com'，而此时你再用var ifrm=createElement('iframe') ，这时将不能用js设置iframe的域也为'cnblogs.com'，只能让ifrm.src='test2.htm'，并在test2.htm中设置域document.domain='cnblogs.com'。
5、当你修改过当前域的时候，CKEditor是正常的，而tinyMCE需要重新设置域。
CKEditor能自动识别当前域，并不出错。tinyMCE需要人为的设置。同时，如果你是用CKFinder上传文件，而需要修改它的输入代码，不然会因为域不同而出现没有权限的错误提示。
6、使用tinyMCE，尽管你的初始化代码只有一句，但是可能出现多次初如化。发生原因未知，在不确定的情况下会出现此BUG。
7、开发js组件的时候，要时刻注意闭包和this的指代，这方面之前吃了不少亏。
8、将字符串转换成jQuery对象时，要注意字符串html代码的闭合标签。
比如：var html='<span>test</span> 'var jqEl=$(html);此时，jqEl会把html里的' '丢掉。
9、jQuery1.2.6和jQuery1.3在细节的处理上有一些区别。
jQuery1.2.6处理hasClass('.className')会出错，而jQuery1.3不会。
10、尽量少用jQuery的each，多用js原生的代码，性能较高。

赞 (0)

相关推荐

  • Dom与浏览器兼容性说明

    作为一个Web前端工作者,你是否在工作中常被浏览器兼容性问题所困惑．例如Css样式? 明明在 IE浏览器里显示一切正常的网页．到了FireFox或谷歌浏览器中却乱作一团．或许你在使用JavaScript和Dom编写网页脚本时,也遇到过类似问题. 明明在FireFox浏览器里运行正常的脚本．到了IE里却出现错误． 比如说获取触发js事件的源目标．还有鼠标位置或元素位置问题．动态为元素绑定事件等．．．我将在下面列举部份Dom指令在IE和FireFox等浏览器 不兼容性的问题!限于篇幅．我不在该页对提

  • javascript firefox兼容ie的dom方法脚本

    if(!document.all){ //zzcv的ff ie兼容脚本 /*脚本没有解决的问题及处理: 2.IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.  解决方法:统一使用[]获取集合类对象.  3.IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.  解决方法:统一通过getAttribute()获取自定义属性.  4.IE

  • Dom操作之兼容技巧分享

    例如:我们在获取ul下所有li元素的时候．或者是某个元素的下一个元素时．都有可能会碰到这讨厌的空格问题．当然在IE浏览器里这些空格会被自动过滤．而FF则没有那么勤劳．FF浏览器会把这些空格也看作为一个元素．如果你对Dom中的空格元素感到疑惑,请运行下面的代码．至少使用IE和FF两种浏览器测试．你会明白一切! 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> &l

  • js学习总结之DOM2兼容处理顺序问题的解决方法

    DOM2兼容处理顺序问题的解决方法,具体如下 解决顺序问题:我们不用浏览器自带的事件池了,而是自己模拟标准浏览器的事件池实现,具体代码如下: /* bind:处理DOM2级事件绑定的兼容性问题(绑定方法) @parameter: curEle->要绑定事件的元素 evenType->要绑定的事件类型("click","mouseover") evenFn->要绑定的方法 */ function bind(curEle,evenType,evenFn

  • javascript下有关dom以及xml节点访问兼容问题

    最近整理浏览器兼容的问题,搞的实在头大,在前人的帮助之下,还是有点进展,下面帖一些代码,我想会比较有用 复制代码 代码如下: var  isIE  =   ????;  // 全局变量,判断是否ie,自完善  // new dom 方法  function  parseXML(st){       if (isIE){           var  result  =   new  ActiveXObject( "microsoft.XMLDOM" );          result

  • js学习总结之DOM2兼容处理重复问题的解决方法

    DOM2兼容处理重复问题的解决方法,具体如下 在解决this问题之后,只需要在每次往自定义属性和事件池当中添加事件的时候进行一下判断就好了,具体代码如下 /* bind:处理DOM2级事件绑定的兼容性问题(绑定方法) @parameter: curEle->要绑定事件的元素 evenType->要绑定的事件类型("click","mouseover") evenFn->要绑定的方法 */ function bind(curEle,evenType,

  • javascript 兼容所有浏览器的DOM扩展功能

    今天周五,很闲,坐在电脑前没什么事可做,产品线的人也没提什么新的需求,可能下周会有新的需求和工作安排,但那是下周的事了.今天就想写点技术的东西,也就当作是记记笔记,本人水平有限,希望大家多多指教,嘴下留情,哈哈. 有时候我们会想扩展DOM元素的功能,可以添加一些自定义的方法,以让它用起来更加灵活.方便:先来举个例子: 复制代码 代码如下: <!DOCTYPE html><html lang="zh"> <head>  <title>DOM

  • js学习总结之DOM2兼容处理this问题的解决方法

    针对上一篇提到的DOM2级存在的兼容问题,这里先说一下this的问题. /* bind:处理DOM2级事件绑定的兼容性问题(绑定方法) @parameter: curEle->要绑定事件的元素 evenType->要绑定的事件类型("click","mouseover") evenFn->要绑定的方法 */ function bind(curEle,evenType,evenFn){ if('addEventListener' in documen

  • DOM Scripting中的图片切换[兼容Firefox]

    DOM Scripting中的图片切换[兼容Firefox]

    学习过程中多分析别人的代码实现是个好的习惯,哪怕不是很明白,跟着多敲几遍代码也是很培养感觉的事情.下面是实际的效果(一般我只在firefox中测试): 鼠标滑过上面的导航链接时 下面框中图片进行流畅的切换,左右移动的效果 html结构如下:   复制代码 代码如下: <body> <h1>Web Design</h1> <p>These are the things you should know.</p> <ol id="lin

  • JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题

    先来看看现象: 复制代码 代码如下: <html> <head> <title>apply_and_call</title> </head> <body onload="init()"> <div id="testDiv" style="position: absolute; border: 1px solid gray; width:100px; height: 100px&q

随机推荐