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. 简单分析synchronized不会锁泄漏的原因

    最近看到一句话:内部锁synchronized不会造成锁泄漏(Lock Leak). 锁泄漏是指一个线程获得某个锁以后,由于程序的错误.缺陷致使该锁一直没法被释放而导致其他线程一直无法获得该锁的现象. ...

  2. VS219 没有.net core 3.0模板

    控制台命令 dotnet --info dotnet --version 都正常显示有安装3.0 需要升级VS 2019 16.3.3,本地版本为16.3.2

  3. JS ES7

    指数运算符(幂) ** console.log(3 ** 2); //9 判断数组中包含 Array.prototype.includes(value) var arr1 = [1,2,'a','b' ...

  4. 关于页面数据未保存改变路由（beforeunload，beforeRouteLeave）

    一下内容为笔者个人理解,如有出入还请大佬指出不胜感激 页面有数据未保存,用户离开页面分为两种 1 . 直接关闭浏览器标签 或者点击浏览器后退按钮 离开当前页面 2. 在页面内改变路由,或则刷新页面(不 ...

  5. ES6-数组的扩展-整理

    一.Array.from():负责把类似数组的对象以及可遍历的对象转为真正的数组 1.类似数组的对象 let arrayLike = { '0': 'a', '1': 'b', '2': 'c', l ...

  6. Maven新建项目出现 Could not calculate build plan:plugin 错误解决办法

    删除本地.m2仓库中 org.apache.maven.plugins:maven-resources-plugin所在目录. 然后右击项目 Maven->Update Project-> ...

  7. CAFFE（0）：Ubuntu 下安装anaconda2和anaconda3

    这个步骤可以看做是安装caffe可以进行或者不必要的步骤,不过笔者建议安装anaconda2和anaconda3,里面会包含很多的模块,省去caffe学习过程中出现模块不存在的各种错误. 第一步.进入 ...

  8. C# TabControl 带删除

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Diagnostic ...

  9. sklearn--回归

    一.线性回归 LinearRegression类就是我们平时所说的普通线性回归,它的损失函数如下所示: 对于这个损失函数,一般有梯度下降法和最小二乘法两种极小化损失函数的优化方法,而scikit-le ...

  10. Django_04_视图

    视图 后台管理页面做好了,接下来就要做公共访问的页面了 对于django的设计框架MVT,用户在URL中请求的是视图,视图接收请求后进行处理,并将处理的结果返回给请求者 使用视图时需要进行两步操作 1 ...