JavaScript高级程序设计 阅读笔记(十五) 浏览器中的JavaScript

Window对象

窗口操作
  Window对象对操作浏览器窗口非常有用,开发者可以移动或调整浏览器窗口的大小。可用四种方法实现这些操作:
  moveBy(dx,dy):把浏览器窗口相对当前位置水平移动dx个像素,垂直移动dy个像素。dx值为负左移,dy为负上移。
  moveTo(x,y):移动浏览器窗口,使它的左上角位于用户屏幕的(x,y)处。可以使用负数,不过这样会把部分窗口移出屏幕的可视区域。
  resizeBy(dw,dh):相对浏览器窗口当前大小,把窗口的宽度调整dw个像素,高度调整dy个像素。dw、dy为负时缩小窗口。
  resizeTo(w,h):把窗口的宽度调整为w,高度调整为h,不能使用负数。

注,FireFox跟Chrome默认不允许进行此操作,要在安全设置里更改

效果(在IE浏览器中有效果):

JavaScript窗口操作

function moveByF(){
top.window.moveBy(100,100);
}

function moveToF(){
top.window.moveTo(100,100);
}

function resizeByF(){
top.window.resizeBy(100,100);
}

function resizeToF(){
top.window.resizeTo(100,100);
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

导航和打开新窗口

  导航和打开新窗口用 window.open() 方法,该方法接受四个参数,即要载入新窗口的页面的URL,新窗口名字,特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。一般只用前三个参数,最后一个参数只有在window.open()打不开新窗口时才有效。

  第三个参数可选值如下:

top=pixels窗口的 y 坐标。


























left=pixels 窗口的 x 坐标。以像素计。
height=pixels 窗口文档显示区的高度。以像素计。
width=pixels 窗口的文档显示区的宽度。以像素计。
resizable=yes|no 窗口是否可调节尺寸。默认是 yes。
scrollable=yes|no 是否显示滚动条。默认是 yes。
location=yes|no 是否显示地址字段。默认是 yes。
status=yes|no 是否添加状态栏。默认是 yes。
toolbar=yes|no 是否显示浏览器的工具栏。默认是 yes。

特性字符串是以逗号分隔的,所以在逗号或等号后不能有空格。

示例:

JavaScript打开新窗口

function open_win()
{
window.open("http://www.cnblogs.com","_blank","width=800,height=400,left=100,top=100")
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

document对象

  用document的open、write、close等方法可以向新打开的窗口中写入内容,如下所示:


代码如下:

<script type="text/javascript">
function run(){
var oNewWin=window.open("about:blank","newwindow","height=300,width=400");
oNewWin.document.open();
oNewWin.document.write("<html><body><script>function test(){alert('test');}</scr"+"ipt><input type='button' value='test' onclick='test()'/></body></html>");
oNewWin.document.close();
}
</script>
<input type='button' value='run' onclick='run()'/>

location对象

  location对象可以用来解析URL,例如 URL为:http://www.jb51.net/2012/04/14/2446762.html#top?id=1,则:
  hash:#top
  host:www.cnblogs.com
  hostname:www.cnblogs.com
  href:http://www.jb51.net/2012/04/14/2446762.html#top?id=1
  pathname:/artwl/archive/2012/04/14/2446762.html
  port:空白
  protocol:http:
  search:?id=1

作者:Artwl
出处:http://artwl.cnblogs.com

(0)

相关推荐

  • JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句

    if语句 语法: 复制代码 代码如下: if(condition){ statement1; } else{ statement2; } 迭代语句 1.do-while语句 语法: 复制代码 代码如下: do{ statement }while(expression); 2.while语句 语法: 复制代码 代码如下: while(expression){ statement } 3.for语句 语法: 复制代码 代码如下: for(initialization;expression;post-

  • JavaScript高级程序设计 读书笔记之十 本地对象Date日期

    创建 var d=new Date(); 要注意的是在JavaScript中月份的值是从0到11(0表示1月). 设置日期和时间值 设置日期和时间值有两种方法: 1.只声明距离1970年1月1日凌晨12点的毫秒数 a.直接用距离1970年1月1日凌晨12点的毫秒数 var d=new Date(0); b.parse方法: parse方法接受字符串为参数,把该字符串转换成日期值,返回的是毫秒数. 例如为2012年2月27日创建Date对象: var d=new Date(Date.parse("

  • JavaScript高级程序设计 阅读笔记(二十) js错误处理

    一.错误分类 1.语法错误:也称解析错误,发生在传统语言的编译时,在JavaScript中发生在解释时.这些错误是由代码中的意外字符直接引起的,然后就不能直接编译/解释.发生语法错误时,就不能继续执行代码.在JavaScript中,只有在同一个线程中的代码会受语法错误的影响.在其他线程中的代码和其他外部引用的文件中的代码,如果不依赖于包含错误的代码,则可以继续执行. 2.运行时错误:也称为异常(exception,在编译期/解释器后).此时,问题并不出在代码的语法上,而是,尝试完成的一个操作,在

  • JavaScript高级程序设计 阅读笔记(十二) js内置对象Math

    Math对象的属性 E:值e,自然对数的底 LN10:10的自然对数 LN2:2的自然对数 LOG2E:以2为底E的对数 LOG10E:以10为底E的对数 PI:值派 SQRT1_2:1/2 的平方根 SQRT2:2的平方根 Math对象的方法:最大值与最小值 min()&&max()用于取一组数中的最小值跟最大值. 示例: 复制代码 代码如下: var iMax=Math.Max(1,2,3); alert(iMax);//outputs 3 var iMin=Math.Min(1,2,

  • JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)

    2.9.5.加性运算符 加性运算符(即加号和减号)通常是最简单的运算符,不过在ECMAScript中,每个加性运算符都有大量的特殊行为. 1.加法运算符: 复制代码 代码如下: var iResult=1+2; console.log(iResult);//outputs 3 特殊性: 某个运算数是NaN,结果为NaN Infinity加Infinity,结果为Infinity -Infinity加-Infinity,结果为-Infinity Infinity加-Infinity,结果为NaN

  • JavaScript高级程序设计 阅读笔记(十七) js事件

    一.事件流 IE中是冒泡型事件,即从最特定的事件目标到最不特定的事件目标. Netscape Navigator使用的是捕获型事件,这个跟IE中采用的冒泡型事件相反. DOM事件流同时支持两种事件模型,但捕获型事件先发生. 二.事件处理函数/监听函数 事件是用户或浏览器自身进行的特定行为.这些事件都有自己的名字,如click.load.mouseover等. 事件处理函数有两种分配方式:在JavaScript中或者在HTML中. 如果在JavaScript中分配事件处理函数,则首先要获得要处理的

  • JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML

    一.IE中的XML DOM支持 IE对XML的支持是基于ActiveX的MSXML库. 1.DOM创建 对每个新版本的MSXML,都会创建出不同的XML DOM对象,所以尽量选择新的XML DOM版本. 2.载入XML 载入XML分两种,即: 载入XML字符串:loadXML(xml字符串) 载入xml文件:load(xml文件路径).默认情况下文件载入是异步的,如果要改为同步把asynce特性改为true即可.异步载入文件时要用到readyState和onreadystatechange事件处

  • 《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型

    2.8 引用类型 1.Object类 ECMAScript中的所有类都是由Object类继承而来. Object类具有下列属性: Constructor:对创建对象的函数的引用(指针),对于Object类,该指针指向原始的Object()函数 Prototype:对该对象的对象原型的引用. Object类还有几个方法: HasOwnProperty(property):判断对象是否有某个特定的属性.必须用字符串指定该属性值 IsPrototypeOf(object):判断该对象是否为另一个对象的

  • JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件

    跨平台的事件EventUtil对象 EventUtil: 复制代码 代码如下: var EventUtil={ addEventHandler:function(oTarget, sEventType, fnHandler){ if(oTarget.addEventListener){ oTarget.addEventListener(sEventType,fnHandler,false); } else if(oTarget.attachEvent){ oTarget.attachEvent(

  • JavaScript高级程序设计 读书笔记之十一 内置对象Global

    内置对象 定义:由ECMAScript实现提供的.独立于宿主环境的所有对象,在ECMAScript程序开始执行时出现. 由定义可知开发者不必明确实例化内置对象,它已被实例化了.在ECMAScript-262只定义了两个内置对象,即Global和Math Global Global对象是ECMAScript中最特别的对象,因为实际上它根本不存在. 由于在ECMAScript中不存在独立的对象,所有函数都必须是某个对象的方法,如前面提到的isNaN().isFinite().parseInt()和p

  • JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)

    2.9 运算符 2.9.1.一元运算符 一元运算符只有一个参数,即要操作的对象或值. 1.delete:删除对以前定义的对象属性或方法的引用,但此运算符不能删除开发者未定义的属性和方法.示例: 复制代码 代码如下: var o=new Object; o.name="Nicholas"; o.show=function(){ return "test"; }; console.log(o.name); //outpus Nicholas console.log(o.

  • 《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型

    2.6 原始类型 ECMAScript有5种原始类型(primitive type),即Undefined.Null.Boolean.Number和String.ECMAScript提供了typeof来判断值的类型. 1.typeof运算符: 复制代码 代码如下: var sTemp="test string"; alert(typeof sTemp);//outpus "string" alert(typeof 95);//outpus "number&

  • JavaScript高级程序设计 读书笔记之九 本地对象Array

    创建Array对象 复制代码 代码如下: //one var aValues=new Array(); //two var aValues=new Array(20); //three var aColors=new Array(); aColors[0]="red"; aColors[1]="green"; aColors[2]="blue"; //four var aColors=new Array("red","

  • JavaScript高级程序设计 阅读笔记(十九) js表格排序

    排序代码 复制代码 代码如下: function SortTable(sTableID, iCol, sDataType){ this.oTable=document.getElementById(sTableID); this.oTBody=this.oTable.tBodies[0]; this.colDataRows=this.oTBody.rows; this.aTRs=[]; this.iCol=iCol; this.sDataType=sDataType; } SortTable.p

  • JavaScript高级程序设计 读书笔记之八 Function类及闭包

    Function类 定义 Function类可以表示开发者定义的任何函数,用Function类直接创建函数的语法如下: var function_name=new Function(agrument1,agrument2,...,argumentN,function_body); 每个argument都是一个参数,最后一个参数是函数主体(要执行的代码). 示例: 复制代码 代码如下: function sayHi(sName,sMessage){ alert("Hello "+sNam

  • JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换

    2.7 类型转换 1.转换成字符串 所有对象都有toString()方法可以转换成字符串,要注意的是Number类型的toString()方法,它有两种模式,即默认模式和基模式,采用默认模式toString()方法只是用相应的字符串输出对应的10进制数字值,用基模式可以用不同的基输出数字.示例: 复制代码 代码如下: var iNum1=10; var iNum2=10.0; var iNum3=10; alert(iNum1.toString()); //outpus "10" al

  • JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现

    继承 继承是面向对象语言的必备特征,即一个类能够重用另一个类的方法和属性.在JavaScript中继承方式的实现方式主要有以下五种:对象冒充.call().apply().原型链.混合方式. 下面分别介绍. 对象冒充 原理:构造函数使用this关键字给所有属性和方法赋值.因为构造函数只是一个函数,所以可以使ClassA的构造函数成为ClassB的方法,然后调用它.ClassB就会收到ClassA的构造函数中定义的属性和方法. 示例: 复制代码 代码如下: function ClassA(sCol

  • JavaScript高级程序设计 阅读笔记(十三) js定义类或对象

    工厂方式 创建并返回特定类型的对象. 复制代码 代码如下: function createCar(sColor,iDoors,iMpg){ var oTempCar=new Object(); oTempCar.color=sColor; oTempCar.doors=iDoors; oTempCar.mpg=iMpg; oTempCar.showColor=function(){ alert(this.color); } return oTempCar; } 调用示例: 复制代码 代码如下:

  • 《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础

    2.1 语法 区分大小写.变量弱类型.行尾分号可有可无.注释为双斜线.括号表明代码块 2.2 变量 变量用var声明,变量的命名规则:第一个字符必须是字母.下划线或美元符号:余下的字符可以是下划线.美元符号或任何字母或数字字符. 变量命名规范: Camel标记法:首字母小写,接下来的单词都以大写字母开头.例如:var myTestValue=0,mySecondTestValue="hi"; Pascal标记法:首字母大写,接下来的单词都以大写字母开头.例如:var MyTestVal

  • JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js

    检测浏览器的方式 1.对象特征检测法:判断浏览器能力的通用方法.如果更关注浏览器的能力而不在乎它的实际身份,就可以使用这种检测方法.常见的原生Ajax写法中就用这种方法来创建XMLHttpRequest: 复制代码 代码如下: IXHR: function(){ if(window.ActiveXObject){ XHR=new ActiveXObject('Microsoft.XMLHTTP'); }else if(window.XMLHttpRequest){ XHR=new XMLHttp

随机推荐