1.32 JavaScript的BOM（二）

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

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

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

 <script>

     <!--通过window对象可以获取文档显示区域的高度和宽度-->

   document.write("文档内容");

   document.write("文档显示区域的宽度"+window.innerWidth);

   document.write("<br>");

   document.write("文档显示区域的高度"+window.innerHeight);

   <!--部窗体即浏览器，可能用的是360，火狐，IE, Chrome-->

   document.write("浏览器的宽度:"+window.outerWidth);

   document.write("<br>");

   document.write("浏览器的高度:"+window.outerHeight);

   <!--window的open方法做到打开另一个网站，在没有告知用户的前提下就打开一个新的网站会影响用户的体验-->

   function openNewWindow(){

   myWindow=window.open("/");

     }

 </script>

 <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>

8.5 JavaScript的BOM（二）的更多相关文章

  1. 第一百一十一节，JavaScript，BOM浏览器对象模型

    JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...

  2. 第三章 JavaScript操作BOM对象

    第三章   JavaScript操作BOM对象 一.window对象 浏览器对象模型(BOM)是javascript的组成之一,它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HT ...

  3. JavaScript的BOM和DOM

    JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...

  4. 使用jQuery快速高效制作网页交互特效--JavaScript操作BOM对象

    JavaScript操作BOM 一.window对象: 二.window对象的属性和方法 1.windows对象的常用属性: 语法:window.属性名="属性值" 2.windo ...

  5. JavaScript(4)---BOM详解

    JavaScript(4)---BOM详解 之前写过一篇有关DOM的博客:JavaScript(2)---DOM详解 DOM有个顶级对象叫:document.同样BOM中也有顶级对象叫 window. ...

  6. [JavaScript之BOM与DOM]

    [JavaScript之BOM与DOM] BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM ( ...

  7. JavaScript 入门教程二 在HTML中使用 JavaScript

    一.使用 <script> 元素的方式有两种:直接在页面中嵌入 JavaScript 代码和引用外部 JavaScript 文件. 二.使用内嵌方式,一般写法为: <script t ...

  8. JavaScript基础笔记二

    一.函数返回值1.什么是函数返回值    函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...

  9. JavaScript基本概念(二)

    JavaScript 基本概念(二) 操作符和语句 目录 操作符 一元操作符 位操作符 布尔操作符 乘性操作符 其他操作符 语句部分 说起操作符,回忆下上一篇文章末尾说的话. 操作符 一元操作符 ++ ...

随机推荐

  1. MVC部分视图的使用（Html.Partial/RenderPartial、Html.Action/RenderAction、RenderPage）

    ASP.NET MVC 里页面往往会有许多重用的地方,可以进行封装重用. 使用部分视图有以下优点: 1. 可以简写代码. 2. 页面代码更加清晰.更好维护. 在视图里有多种方法可以 加载部分视图,包括 ...

  2. 【原创】编程基础之Jekins

    Jenkins 2.164.2 官方:https://jenkins.io 一 简介 Build great things at any scale The leading open source a ...

  3. javabean转成json字符首字母大写

    今天写接口的时候有个需求将接口返回的json字符串首字母大写:{"SN":"","Result":""}格式, 只需要在 ...

  4. 15 Django之Celery发送邮件

    异步任务--celery发送邮件 安装两个python包: pip install celery==3.1.25 pip install django-celery==3.2.1 pip instal ...

  5. react import 配置路径别名'@'，简化import Component的方式

    摘要 在react中,大多数业务逻辑都组件化:极大的减轻了代码的冗余度,如果组件的层次比较深的话,组件的import就比较费劲,在import时使用“../../components/test”的方式 ...

  6. 1 bootstrapValidator使用

    1 如何使用 引入 <link href="bootstrapValidator.min.css" rel="stylesheet"> css文件 ...

  7. Delphi 类类型

  8. 013.子查询和分页子查询（sql实例）

    --1 子查询 如果子查询和表连接都实现的时候,推荐用表连接实现( 一般:能用表连接实现的就用表连接,有些情况用表连接不能 或者不易实现的再选择子查询) 系统:缓存,执行计划技术手段 --1 wher ...

  9. python 之math模块

    一.math 简介 import math # 导入模块 ret = dir(math) # 查看所有函数名列表 print(ret) # ['__doc__', '__loader__', '__n ...

  10. Xadmin相关实现

    一,保存搜索条件(Save search conditions) kept conditions(保存条件)的应用场景比较常见,在我们查询时,可以实现多条件的筛选查询,比如:在淘宝上,选择了其中的一个 ...