• 浏览器中的javascript


    5.3.1 window对象
    window 对象表示整个浏览器窗口,但不必表示其中包含的内容。window 还可用于
    移动调整它表示的浏览器的大小。

    <html>
    <head>
    <title>Frameset Example</title>
    </head>
    <frameset rows="100,*">
    <frame src="frame.html" name="topFrame" />
    <frameset cols="50%,50%">
    <frame src="anoterframe.htm" name="leftframe"/>
    <frame src="yetanoterframe.html" name="rightframe"/>
    </frameset>
    </frameset>
    </html>

    window.frames[0]或window.frames["topFrame"] 也可以用top对象代替window对象
    例如 top.frames[0].

    top对象指向的都是最顶层的框架,即浏览器窗口本身。如果在框架内写代码,window对象只是指向框架本身。

    也可以 window.leftFrame直接用框架名。

    parent 指向上一级框架。 self指向当前窗口 即等于window。

    1、窗口操作
    moveBy(dx,dy) -- 当前窗口水平移动dx,垂直移动 dy。
    moveTo(x,y) -- 窗口移动到xy。
    resizeBy(dw,dh) -- 相对于浏览器窗口当前的大小。把宽度调整dw个像素,
    高度调整dy个像素。
    resizeTo(w,h) -- 调整到 wh。

    需要知道窗口的位置及尺寸。

    IE 提供了 windown.screenLeft和window.screenTop判断窗口的位置。document.body.offsetWidth和document.body.offsetHeight属性获取可视窗口的大小。但
    不是标准属性。

    Mozilla 提供了window.screenX和Window.ScreenY判断窗口的位置。还提供了
    window.innerWidth 和 window.innerHeight属性来判断视口的大小,window.outerWidth和window.outerHeight属性提供了窗口自身的大小。

    opera和Safari提供与Mozilla相同的工具。

    2、导航和打开新窗口
    window.open(url,name,"texing",boolean); 关于name,可以指定。也有专用名 _selft、_parent、_top、_blank

    var oNewWin = window.open();
    oNewWin.close();

    3、系统弹窗
    alert()、confirm、prompt

    4、status
    window.status = "";

    5、时间间隔和暂停
    window对象的setTimeout()可以设置暂停。第一个参数为要执行的代码也可以是函数指针。第二个为毫秒数。
    setTimeout("alert('hello world!')",1000);
    setTimeout("function(){alert('hello world!')}",1000);
    返回数字暂停id。要取消未执行的暂停可以调用 clearTimeout(),并将暂停ID传递给它:
    var iTimeoutId = setTimeout("alert('hello world')",1000);
    clearTimeout(iTimeoutId);

    时间间隔与暂停的方式相似,只是它无限次的隔一段时间重复一次代码。可以调用setInterval()方法设置时间间隔,参数与setTimeout()

    setInterval("alert('Hello world!')");
    setInterval(function{alert("hello world!");},1000);

    function sayHelloWorld(){
    alert("Hello world!");
    }
    setInterval(sayHelloWorld,1000);

    也可以用ClearInterval()方法来阻止这个id再次执行。
    var iNum = 0;
    var iMax = 100;
    var iIntervalId = null;

    function incNum(){
    iNum++;
    if(iNum == iMax){
    clearInterval(iIntervalId);
    }
    }
    iIntervalId = setInterval(incNum,500);

    也可以用setTimeout()实现。
    var iNum = 0;
    var iMax = 100;

    function incNum(iNum!=iMax){
    iNum++;
    if(){
    setTimeout(incNum,500);
    }
    }
    setTimeout(incNum,500);

    6、历史

    通过window对象的history属性及history属性和它的方法即可实现访问历史导航

    window.history.go(-1);
    window.history.go(1);
    window.history.back();
    window.history.forward();

    5.3.2 document对象。
    document实际是window的对象属性.
    alert(window.document==document); //true
    这个对象的独特之处在于 它即属于bom又属于dom.
    从bom角度看,document对象是由一系列集合构成,这些集合可以访问文档的各个部分,提供页面自身标准。每个浏览器的document各有有不同。
    bom通用的一些属性。图:

    bom中对象集合。图:

    与window.frame集合相似,可以用数字或名字引用document对象的每个集合,即可以用 document.images[0]或document.images['iamge_name']访问图像.
    document.images[0].src是获取第一个图像的src特性的代码。
    最后,bom的document对象还有几个方法。最常用的write(),writeln().
    var oNewWin = window.open("about:blank","newwindow");
    oNewWin.document.open();
    oNewWin.document.write("hello world!");
    oNewWin.document.close();

    5.3.3location对象
    它是window对象和document对象的属性.
    hash -- 返回#后得内容。
    host -- 服务器名字(www.wrox.com)
    hostname --
    href -- 当前载入页面的完整url。
    pathname -- url中主机名后面的部分 http://www.u.com/pictures/index.html
    的pathname是 "/pictures/index.html"
    port -- url中声明的请求端口。没指定则为空白。
    protocol -- url中使用的协议
    search -- 执行请求的url中的问号 后得部分 又称查询字符串。http://www.u.com/pictures/index.html?term=javascript中的search属性等于?term=javascript。
    改变该属性的值,就可以导航到新页面。
    replace 可以导航到某一页面 但是不会出现在history中。
    location.reload(true);要从服务器端载入
    location.reload(false);从缓存中载入。
    location.toString()仅返回location.href的值。

    5.3.4 navigator 对象
    navigator是bom对象之一

    5.3.5 screen 对象
    screen 对象时window对象的属性。
    screen对象包含下列属性。
    availHeight --串口可以使用的屏幕高度,包括操作系统元素 (windows工具栏等)
    availWidth -- 窗口可以使用的屏幕宽度。
    colorDepth -- 用户表示颜色的位数。多为32位。
    height -- 屏幕高度。
    width -- 屏幕宽度。
    window.moveTo(0,0);
    window.resizeTo(screen.availWidth,screen.availHeight);

    如果感觉不错,请 一个!
    by simpman
  • 相关阅读:
    springMVC学习总结(四)springmvc处理json数据类型以及fastjson的使用
    springMVC学习总结(二)路径映射和请求方法限定
    springMVC学习总结(一)快速入门
    【学习整理】第九章节 魔法方法,属性和迭代器
    【学习整理】第八章 异常
    【学习整理】第六章 抽象
    【学习整理】第七章 更加抽象
    【学习整理】第五章 条件、循环和其他语句
    transform css3 的使用及理解
    关于垂直居中---未完待续
  • 原文地址:https://www.cnblogs.com/simpman/p/2869810.html
Copyright © 2020-2023  润新知