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. 记一次邮件推送的坑，c#基于smtp使用腾讯企业邮箱发送邮件总是失败的原因

    今天在弄企业邮箱推送的东西,原版代码是这样的 public void SendEmail(string title, string content) { try { MailMessage mailM ...

  2. includes()函数的用法

    在ES5,Array已经提供了indexOf用来查找某个元素的位置,如果不存在就返回-1,但是这个函数在判断数组是否包含某个元素时有两个小不足,第一个是它会返回-1和元素的位置来表示是否包含,在定位方 ...

  3. C++ STL 之 deque容器 打分案例(内含sort排序用法）

    #include <iostream> #include <vector> #include <time.h> #include <deque> #in ...

  4. linux环境下安装python3的方法（转）

    Linux 安装python3.7.0   我这里使用的时centos7-mini,centos系统本身默认安装有python2.x,版本x根据不同版本系统有所不同,可通过 python --V 或 ...

  5. JasperReport笔记

    参考: https://blog.csdn.net/dullchap/article/details/51799070 关于 ireport的初步使用 ,笔记记录

  6. liunx pyinotify的安装和使用

    介绍此功能是检测目录的操作的事件 1.安装 在百度云盘下载或者在gits上下载安装包 链接:https://pan.baidu.com/s/1Lqt872YEgEo_bNPEnEJMaw 提取码:bj ...

  7. JavaSpring【七、AspectJ】

    AspectJ 概念 @AspectJ类似纯Java注解的普通Java类 Spring可以使用AspectJ来作为切入点 AOP在运行时仍是纯SpringAOP,对AspectJ无依赖 配置: 对@A ...

  8. kafka启动失败错误:: replica.fetch.max.bytes should be equal or greater than message.max.bytes

    1 详细异常 2019-10-14 14:38:21,260 FATAL kafka.Kafka$: java.lang.IllegalArgumentException: requirement f ...

  9. 前端基础(八)：Font Awesome(图标)

    一.font awesome简介 目前图标总数共有519个; 不依赖Javascript 矢量图形,无限缩放 免费,可用于商业 CSS控制样式,自定义图标颜色,大小,阴影,一切可能实现的效果 支持re ...

  10. 高级IO——文件锁

    文件锁也被称为记录所,文件锁如果深讲的话,内容不少(比如文件锁最起码分为了建议锁和强制性锁,暂时挖坑,后面填). 文件锁作用 顾名思义,就是用来保护文件数据的.当多个进程共享读写同一个文件时,为了不让 ...