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. Idea+Maven部署打包JavaFX项目遇到的坑

    用Idea写了一个JavaFX项目,创建artifacts,build artifacts,运行build出来的exe可执行文件时总是遇到 class not found的错误,如下图 一开始根据提示 ...

  2. QT QListWidget去掉滚动条

    1.去掉滚动条 设置样式  包含背景色等更改 setStyleSheet("QListWidget{color:gray;font-size:12px;background:#FAFAFD; ...

  3. mybatis+oracle 批量插入，若数据库中有则做更新操作

    1.只批量插入: insert into WXPAY_ACCOUNT(id ,out_trade_no ,transaction_id)select SEQ_WXPAY_ACCOUNT.nextval ...

  4. element 文件上传大小控制

    1.页面代码 <el-upload :show-file-list="false" class="upload-demo" :before-upload= ...

  5. dedeampz 套件关于PHP开启curl方法

    php开启curl方法主要用到三个文件libeay32.dll,php_curl.dll,ssleay32.dll 打开dede的安装目录,更改对应版本PHP中的php.ini文件,在 ; exten ...

  6. RabbitMQ消息分发轮询

    一,前言 如果我们一个生产者,对应多个消费者,rabbitmq 会发生什么呢 二,消息分发轮询 前提条件:1个生产者  ---->  多个消费者,且no_ack=True (启动三次生产者) ① ...

  7. 轻量化模型之MobileNet系列

    自 2012 年 AlexNet 以来,卷积神经网络在图像分类.目标检测.语义分割等领域获得广泛应用.随着性能要求越来越高,AlexNet 已经无法满足大家的需求,于是乎各路大牛纷纷提出性能更优越的 ...

  8. Prometheus（1） 概念

    Prometheus Prometheus是一套开源的监控&报警&时间序列数据库的组合.对我来说,它跟 zabbix 最大的区别就是它没有模板,所有的告警规则都得自己写... 它有一套 ...

  9. linux——常用命令

    学习linux命令地址: 学习命令地址,可参考http://linux.51yip.com/ 在文件中搜索指定字符串 grep -i "requirepass" redis.con ...

  10. JavaScript 基础知识梳理——数据类型

    JavaScript的数据类型公有六种,ES6又新增了第七种Symbol类型的值. 数值(number) 字符串(string) 布尔值(boolean) undefined null 对象(obje ...