JavaScript开发中几个常用知识点总结
前言
最近在做项目的时候自己写了一些JavaScipt代码，于是自己又进行简单的查阅资料整理了一下，发现了如下几个比较有用的知识点：
1、三种声明函数的方式
2、jQuery $(document).ready() 与window.onload的区别
3、location.href
4、获取url中的参数
5、判断是否存在函数的方法
6、设置Iframe高度
7、解决文本框设置只读后按退键后退页面
1、三种声明函数的方式
1、声明式的函数
function functionName(arg1, arg2) {alert(arg1+arg2);}
2、匿名函数
var functionName1 = new Function("arg1", "arg2", "alert(arg1 + arg2)");
3、直接量函数
functionName2 = function (arg1, arg2) { alert(arg1 + arg2); };
三种函数调用方式
functionName("1", "22");
functionName1("2", "11");
functionName2("Hello", "World");
继续看，还可以这样写，第一次体验很不错
functionName1.love = "Hello World！"; alert(functionName1.love); functionName1.Test = function () { alert("Test"); } functionName1.Test();
2、jQuery $(document).ready() 与window.onload的区别
1、执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
2、编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个，执行后面的一个。
$(document).ready()可以同时编写多个，并且都可以得到执行。
3、简化写法
window.onload没有简化写法 。
$(document).ready(function(){})可以简写成$(function(){})。
注意：window.onload和body.onload之间的关系和区别，最好自己亲自去实践一下。
3、location.href
1、top.location.href=”url” 在顶层页面打开url（跳出框架）
2、parent.location.href=”url” 在父窗口打开Url地址
3、self.location.href=”url” 和 this.location.href=”url” 和 window.location.href=“url” 和location.href 都是在本页面打开url地址
由此我解决了一个问题：就是使用了Iframe框架，同时也控制用户超时重新登录的限制，所以有时候登录页面会出现在页面中的某部分。
处理方式就比较简单就是在登录页面通过JavaScript进行一次判断即可
<script type="text/javascript"> if (window != top) top.location.href = location.href; </script>
4、获取url中的参数
1、获取指定url指定参数的值
//获取指定url的指定参数值 //name为参数名 //url为指定的url地址 function GetQueryStringRegExp(name,url) { var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i"); if (reg.test(url)) return decodeURIComponent(RegExp.$2.replace(/\+/g, " ")); return ""; }
2、获取当前页面url指定参数的值
//获取url指定参数的值 function GetQueryStringRegExp(name) { var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i"); if (reg.test(location.href)) return decodeURIComponent(RegExp.$2.replace(/\+/g, " ")); return ""; }
5、判断是否存在函数的方法
先看代码
window.onload=function(){ try{ if(test&&typeof(test)=="function"){ test(); } else{ alert("不存在的函数"); } } catch(exception){ alert(exception); } } function test(){ alert("函数执行……"); }
第一种情况就是函数的确存在，那么就会执行该函数。
第二种情况就是函数不存在，但是在此域中存在该名称的对象或者变量，则为提示不存在的函数。
第三种情况就是函数不存在，对象或者变量也不存在，就是该名称是未定义的，则会提示函数未定义。
6、设置Iframe高度
有时候在网页中可能需要嵌入Iframe，而对Iframe的控制又不能固定，那么就可以自动根据Iframe中内容进行自动设置高度。在HTML的Iframe标签中加入一个onload事件，就是在Iframe页面加载完毕时进行计算设置高度。
function SetIFrameHeight(iFrameId) { if (iFrameId == "") {return;} var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 0; var pTar = null; if (document.getElementById) { pTar = document.getElementById(iFrameId); } else { eval('pTar=' + iFrameId + ';'); } pTar.style.display = "block"; if (Sys.ie) { if (Sys.ie == '9.0') { pTar.height = pTar.contentWindow.document.body.offsetHeight + 15 + "px"; pTar.width = pTar.contentWindow.document.body.scrollWidth + "px"; } else if (Sys.ie == '8.0') { pTar.height = pTar.Document.body.offsetHeight + 25 + "px"; pTar.width = pTar.Document.body.scrollWidth + "px"; } else { pTar.height = pTar.Document.body.scrollHeight + 25 + "px"; pTar.width = pTar.Document.body.scrollWidth + "px"; } } }
参数就是该Iframe的id传入，暂时通过的是IE8测试是没问题的。
7、解决文本框设置只读后按退键后退页面
解决方法就是定义一个全局的document.documentElement.onkeydown事件，来检测页面每次按键按下时的操作
document.documentElement.onkeydown = function (evt) { var b = !!evt, oEvent = evt || window.event; if (oEvent.keyCode == 8) { var node = b ? oEvent.target : oEvent.srcElement; var reg = /^(input|textarea)$/i, regType = /^(text|textarea)$/i; if (!reg.test(node.nodeName) || !regType.test(node.type) || node.readOnly || node.disabled) { if (b) { oEvent.stopPropagation(); } else { oEvent.cancelBubble = true; oEvent.keyCode = 0; oEvent.returnValue = false; } } } }
检测退格键时，所对应的操作进行判断，来处理禁用回退页面刷新的问题。
