初学JavaScript--基础知识笔记(二)
来源:互联网 发布:淘宝买家号可以开店吗 编辑:程序博客网 时间:2024/06/05 18:31
window对象
window对象不但充当全局作用域,而且表示浏览器窗口。
window对象有双重角色:既是通过js访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。
所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以。
var age = 29; window.color = "red"; //throws an error in IE < 9, 在其他浏览器中返回false delete window.age; //throws an error in IE < 9, 在其他浏览器中返回true delete window.color; //returns true alert(window.age); //29 alert(window.color); //undefined
- 窗口关系
每个框架都有自己的window对象,并且保存在frames集合中。
<head> <title>Frameset Example</title></head><frameset rows="160,*"> <frame src="frame.htm" name="topFrame"> <frameset cols="50%,50%"> <frame src="anotherframe.htm" name="leftFrame"> <frame src="yetanotherframe.htm" name="rightFrame"> </frameset></frameset>
top对象始终指向最高层的框架,即浏览器窗口。与top相对的另一个window对象是parent。在没有框架的情况下,parent一定等于top
<head> <title>Frameset Example</title></head><frameset rows="100,*"> <frame src="frame.htm" name="topFrame"> <frameset cols="50%,50%"> <frame src="anotherframe.htm" name="leftFrame"> <frame src="anotherframeset.htm" name="rightFrame"> </frameset></frameset>
- 窗口位置
screenLeft和screenTop属性,分别用于表示窗口相对于屏幕左边和上边的位置。
<body> <p>This will open a new window/tab: <input type="button" value="Go to Wrox.com" onclick="window.open('http://www.wrox.com/')"></p> <p>This will open in the current window/tab: <input type="button" value="Go to Wrox.com" onclick="window.open('http://www.wrox.com/', '_self')"></p></body>
使用moveTo()和moveBy()可以将窗口精确的移动到一个新位置。都是接收2个参数,moveTo()接收的是新位置的x和y坐标值,moveBy()接收的是在水平和垂直方向上移动的像素数。
- 窗口大小
window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度。表示该容器中页面视图区的大小,内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。
对应的,还有一个outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高。返回浏览器窗口本身的尺寸。
在Chrome中,innerWidth和innerHeight与outerWidth和outerHeight返回相同的值。
虽然无法确定浏览器窗口本身的大小,但是可以取得页面视口的大小。
var pageWidth = window.innerWidth, pageHeight = window.innerHeight; if (typeof pageWidth != "number"){ if (document.compatMode == "CSS1Compat"){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } } alert("Width: " + pageWidth); alert("Height: " + pageHeight);
使用resizeATo()和resizeBy()方法可以调整浏览器窗口大小。接收2个参数,resizeTo()接收浏览器窗口的新宽度和新高度,resizeBy()接收新窗口与原窗口的宽度和高度之差。
导航和打开窗口
使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。此方法可以接收4个参数:要加载的URL、窗口目标、一个特性字符串、一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。
window.open(“http://www.baidu.com/“, “topFrame”)
//等同于
window.open()会返回一个指向新窗口的引用,调用close()方法可以关闭新打开的窗口。新创建的window对象有一个opener属性,保存着打开它的原始窗口对象。
将opener属性设置为null就是告诉浏览器新创建标签页不需要与打开它的标签页通信,可以在独立的进程中进行。
检测弹出窗口是否被屏蔽
var blocked = false; try { var wroxWin = window.open("http://www.wrox.com", "_blank"); if (wroxWin == null){ blocked = true; } } catch (ex){ blocked = true; } if (blocked){ alert("The popup was blocked!"); }
- 间歇调用和超时调用
超时调用需要使用setTimeout()方法,接收2个参数:要执行的代码和以毫秒表示的时间。
//不建议使用! setTimeout("alert('Hello world!') ", 1000); //推荐方法 setTimeout(function() { alert("Hello world!"); }, 1000);
只要在指定的时间尚未过去之前调用clearTimeout(),就可以完全取消超时调用。
//设置超时调用 var timeoutId = setTimeout(function() { alert("Hello world!"); }, 1000); //注意:把它取消 clearTimeout(timeoutId);
超时调用在全局作用域中执行的,因此函数中this值在非严格模式下指向window对象,在严格模式下是undefined。
间歇调用:按照指定的时间间隔重复执行代码,直至被取消或页面被卸载。接收2个参数:要执行的代码和每次执行之前需要等待的毫秒数。
//不建议使用! setInterval("alert('Hello world!') ", 10000); //推荐方法 setInterval(function() { alert("Hello world!"); }, 10000);
要取消尚未执行的间歇调用,可以使用clearInterval()方法并传入相应的间歇调用ID。
var num = 0; var max = 10; var intervalId = null; function incrementNumber() { num++; //如果执行次数达到max设定的值,则取消后续尚未执行的调用 if (num == max) { clearInterval(intervalId); alert("Done"); } } intervalId = setInterval(incrementNumber, 500);
变量num每半秒钟递增一次,递增到最大值时就取消调用。
var num = 0; var max = 100; function incrementNumber() { num++; //如果执行次数未达到max设定的值,则设置另一次超时调用 if (num < max) { setTimeout(incrementNumber, 500); } else { alert("Done"); } } setTimeout(incrementNumber, 500);
- 系统对话框
浏览器通过alert(),confirm(),prompt()方法调用系统对话框向用户显示消息。
- alert():接收一个字符串并将其显示给用户。
- confirm():除了显示OK外,还会显示Cancel取消按钮。
- prompt():提示框,用于提示用户输入一些文本。除了OK和Cancel按钮外,还会显示一个文本输入域,以供用户在其中输入内容。接收2个参数:要显示给用户的文本提示和文本输入域的默认值。
//显示“打印”对话框window.print();//显示“查找”对话框window.find();
location对象
location对象既是window对象的属性,也是document对象的属性。
创建一个函数,用以解析查询字符串,然后返回包含所有参数的一个对象:
function getQueryStringArgs(){ //取得查询字符串并去掉开头的问号 var qs = (location.search.length > 0 ? location.search.substring(1) : ""), //保存数据的对象 args = {}, //取得每一项 items = qs.length ? qs.split("&") : [], item = null, name = null, value = null, //在for循环中使用 i = 0, len = items.length; //逐个将每一项添加到args对象中 for (i=0; i < len; i++){ item = items[i].split("="); name = decodeURIComponent(item[0]); value = decodeURIComponent(item[1]); if (name.length){ args[name] = value; } } return args; } //假设查询的字符串是 ?q=javascript&num=10 var args = getQueryStringArgs(); alert(args["q"]); //"javascript" alert(args["num"]); //"10"
使用location对象可以通过很多方式改变浏览器位置。
- location.assign(“http://www.baidu.com“);
- window.location=”http://www.baidu.com”;
- location.href=”http://www.baidu.com”;
可以通过将hash,search,hostname,pathname,port属性设置为新值来改变URL。通过这些方法修改后,浏览器的历史记录都会生成一条新纪录,用户通过单击“后退”可导航到前一个界面。若要禁用此行为,可使用replace()方法,该方法接收一个参数:要导航到的URL,结果不会在历史记录中生成新纪录。
reload():重新加载当前显示的页面。若要强制从服务器重新加载,方法如下:
location.reload();//有可能从缓存中加载location.reload(true);//从服务器重新加载
可以用location.href获取。要获得URL各个部分的值,可以这么写:
location.protocol; // 'http'location.host; // 'www.example.com'location.port; // '8080'location.pathname; // '/path/index.html'location.search; // '?a=1&b=2'location.hash; // 'TOP'
要加载一个新页面,可以调用location.assign()。如果要重新加载当前页面,调用location.reload()方法非常方便。
navigator对象
navigator对象表示浏览器的信息,最常用的属性包括:
- navigator.appName:浏览器名称;
- navigator.appVersion:浏览器版本;
- navigator.language:浏览器设置的语言;
- navigator.platform:操作系统类型;
navigator.userAgent:浏览器设定的User-Agent字符串。
//检测插件(在IE中无效)function hasPlugin(name){ name = name.toLowerCase(); for (var i=0; i < navigator.mimeTypes.length; i++){ if (navigator.mimeTypes[i].name.toLowerCase().indexOf(name) > -1){ return true; } } return false;}//检测 flashalert(hasPlugin("Flash"));//检测 quicktimealert(hasPlugin("QuickTime"));//detect Javaalert(hasPlugin("Java"));
这个例子中hasPlugin()接收一个参数:要检测的插件名。
//检测IE中的插件 function hasIEPlugin(name){ try { new ActiveXObject(name); return true; } catch (ex){ return false; } } //检测 flash alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash")); //检测 quicktime alert(hasIEPlugin("QuickTime.QuickTime"));
这个例子中hasIEPlugin()只接收一个COM标识符作为参数。
//plugin detection - doesn't work in IE function hasPlugin(name){ name = name.toLowerCase(); for (var i=0; i < navigator.plugins.length; i++){ if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){ return true; } } return false; } //plugin detection for IE function hasIEPlugin(name){ try { new ActiveXObject(name); return true; } catch (ex){ return false; } } //detect flash for all browsers function hasFlash(){ var result = hasPlugin("Flash"); if (!result){ result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash"); } return result; } //detect quicktime for all browsers function hasQuickTime(){ var result = hasPlugin("QuickTime"); if (!result){ result = hasIEPlugin("QuickTime.QuickTime"); } return result; } //detect flash alert(hasFlash()); //detect quicktime alert(hasQuickTime());
请注意,navigator的信息可以很容易地被用户修改,所以JavaScript读取的值不一定是正确的。很多初学者为了针对不同浏览器编写不同的代码,喜欢用if判断浏览器版本,例如:
var width;if (getIEVersion(navigator.userAgent) < 9) { width = document.body.clientWidth;} else { width = window.innerWidth;}
但这样既可能判断不准确,也很难维护代码。正确的方法是充分利用JavaScript对不存在属性返回undefined的特性,直接用短路运算符||计算:
var width = window.innerWidth || document.body.clientWidth;
history对象
history对象保存了浏览器的历史记录,JavaScript可以调用history对象的back()或forward(),相当于用户点击了浏览器的“后退”或“前进”按钮。
使用go()方法可以在用户的历史记录中任意跳转,可以向后也可以向前。
history.go(-1);//后退一页history.go(1);//前进一页history.back();//后退一页history.forword();//前进一页
- 初学JavaScript--基础知识笔记(二)
- 初学 JavaScript–基础知识笔记(一)
- 初学JavaScript--基础知识笔记(三)
- 初学javascript,整理整理笔记(二)
- JavaScript基础知识(二)
- Javascript基础知识(二)
- JavaScript基础知识(二)
- css和javascript的一些笔记(二) js基础知识
- JavaScript初学笔记(1)
- JQuery初学笔记(二)
- matlab初学笔记(二)
- js初学笔记(二)
- FUZZ初学笔记(二)
- JavaScript系列(二:基础知识)
- 【JavaScript】基础知识整理(二)
- 基础知识学习笔记(二)
- Matlab基础知识笔记(二)
- Java基础知识笔记(二)
- RecyclerView简单使用
- 【Python】range和xrange
- scala断言专栏--入门
- 数据结构笔试题的笔记
- 编译gRPC(windows)和测试demo
- 初学JavaScript--基础知识笔记(二)
- ANDROID BUILDCONFIG.DEBUG的妙用
- ios-事件的产生和传递
- Spring4MVC json问题(406 Not Acceptable)解析
- Chrome 控制台实用指南
- 【Angular2】如何搭建Angular2的环境
- sssssssssssss
- Ueditor富编辑器做弹出或是某些情况第二次打开的时候会渲染失败
- 限制显示的字数,并用省略号代替省略掉的子