zoukankan      html  css  js  c++  java
  • 1.32 JavaScript的BOM(二)

    1.32 JavaScript的BOM(二)

    即 浏览器对象模型(Browser Object Model)

    浏览器对象包括 
    一、Window(窗口)

    如果需要打开一个新的网站,应该通过超级链接等方式让用户主动打开,在没有告知用户的前提下就打开一个新的网站会影响用户的体验。

     1 <script>
     2     <!--通过window对象可以获取文档显示区域的高度和宽度-->
     3   document.write("文档内容");
     4   document.write("文档显示区域的宽度"+window.innerWidth);
     5   document.write("<br>");
     6   document.write("文档显示区域的高度"+window.innerHeight);
     7   <!--部窗体即浏览器,可能用的是360,火狐,IE, Chrome-->
     8   document.write("浏览器的宽度:"+window.outerWidth);
     9   document.write("<br>");
    10   document.write("浏览器的高度:"+window.outerHeight);
    11   <!--window的open方法做到打开另一个网站,在没有告知用户的前提下就打开一个新的网站会影响用户的体验-->
    12   function openNewWindow(){
    13   myWindow=window.open("/");
    14     }
    15 </script>
    16 <button onclick="openNewWindow()">打开一个新的窗口</button>

    二、Navigator(浏览器)

    提供浏览器相关的信息

    <script type="text/javascript">
    document.write("<p>浏览器产品名称:");
    document.write(navigator.appName + "</p>");
     
    document.write("<p>浏览器版本号:");
    document.write(navigator.appVersion + "</p>");
     
    document.write("<p>浏览器内部代码:");
    document.write(navigator.appCodeName + "</p>");
     
    document.write("<p>操作系统:");
    document.write(navigator.platform + "</p>");
     
    document.write("<p>是否启用Cookies:");
    document.write(navigator.cookieEnabled + "</p>");
     
    document.write("<p>浏览器的用户代理报头:");
    document.write(navigator.userAgent + "</p>");
    </script>

    三、Screen (客户端屏幕)

    <html>
    <body>
    <script type="text/javascript">
    document.write("用户的屏幕分辨率: ")
    document.write(screen.width + "*" + screen.height)
    document.write("<br />")
    document.write("可用区域大小: ")
    document.write(screen.availWidth + "*" + screen.availHeight)
    document.write("<br />")
    </script>
    </body>
    </html>

    四、History(访问历史)

    <button onclick="goBack()">返回</button>
    <script>
    function goBack()
      {
         history.go(-2); //-1表示上次,默认,-2表示上上次,以次类推
      }
    </script>
     <button onclick="goBack()">返回上上次</button>

    五、Location(浏览器地址)

    <span>当前时间:</span>
    <script>
      var d = new Date();
      document.write(d.getHours());
      document.write(":");
      document.write(d.getMinutes());
      document.write(":");
      document.write(d.getSeconds());
      document.write(":");
      document.write(d.getMilliseconds());
     //reload方法刷新当前页面
    function refresh(){
      location.reload();
    }
    //跳转到另一个页面
    function jump(){
      //方法1
      //location="/";
     
      //方法2
      location.assign("/");
       }
    </script>
     <br>
    <button onclick="refresh()">刷新当前页面</button>
    <br>
    <button onclick="jump()">跳转到首页</button>

    其他属性(端口号、主机名等)

    <script>
    function p(s){
      document.write(s);
      document.write("<br>");
    }
     
    p("协议 location.protocol:"+location.protocol);
    p("主机名 location.hostname:"+location.hostname);
    p("端口号 (默认是80,没有即表示80端口)location.port:"+location.port);
     
    p("主机加端口号 location.host: "+location.host);
    p("访问的路径  location.pathname: "+location.pathname);
     
    p("锚点 location.hash: "+location.hash);
    p("参数列表 location.search: "+location.search);
     
    </script>

    六、弹出框

    1、alert弹出框

    2、confirm确认对话框

    3、prompt输入对话框

    <script>
    //1.alert弹出框
    function register(){
       alert("注册成功");
    }
    //2.确认对话框
    function del(){
    var d = confirm("是否要删除");
    alert(typeof d + " " + d);
    }
    //3.输入对话框
    function p(){
    var name = prompt("请输入用户名:");
    alert("您输入的用户名是:" + name);
    }
    </script>
    <br>
    <button onclick="register()">注册</button>
    <br>
    <button onclick="del()">删除</button>
    <br>
    <button onclick="p()">请输入用户名</button>
  • 相关阅读:
    Windows Internals学习笔记(八)IO系统
    FPGA相关术语(一)
    Bilinear Filter
    总线与接口
    GPIO相关知识
    .NET IL学习笔记(一)
    Windows Internals学习笔记(七)Image Loader
    Windows Internals学习笔记(五)Synchronization
    struts2官方 中文教程 系列五:处理表单
    struts2官方 中文教程 系列四:Action
  • 原文地址:https://www.cnblogs.com/Smileing/p/11543804.html
Copyright © 2011-2022 走看看