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. Typeof() 和 GetType()区别

    1.typeof(x)中的x,必须是具体的类名.类型名称等,不可以是变量名称. 2.GetType()方法继承自Object,所以C#中任何对象都具有GetType()方法,它的作用和typeof() ...

  2. 初学java2 认识面向对象 以及运算符 输入输出

    面向对象 面向对象是一种程序设计思路,在设计一个程序时不需要考虑内部如何实现,只需要想他要实现什么功能 就像在餐馆点菜一样,你不需要知道他应该怎么做,你只需要决定你要吃什么 面向对象三大特征 继承 封 ...

  3. elementui-插槽

    <el-table-column label="操作"> <template slot-scope="scope"> <el-bu ...

  4. kbmMW Scheduler.InAMoment用法

    kbmMW Scheduler提供了一个方法InAMoment,由于没有找到调用的例子,只好查看代码,原来这个方法与RunNow差不多,是立即执行一个方法,并且在主线程中. Scheduler.InA ...

  5. 【Struts2】防止表单重复提交

    一.概述 二.Struts2中解决方案 三.实现步骤 一.概述 regist.jsp----->RegistServlet 表单重复提交 危害: 刷票. 重复注册.带来服务器访问压力(拒绝服务) ...

  6. 第三章、Django之路由层

    目录 第三章.Django之路由层 一 路由的作用 二 简单的路由配置 三 分组 四 路由分发 五 反向解析 六 名称空间 七 django2.0版的re_path与path 第三章.Django之路 ...

  7. Nginx配置客户端SSL双向认证

    对于 NGINX 的 HTTPS 配置,通常情况下我们只需要实现服务端认证就行,因为浏览器内置了一些受信任的证书颁发机构(CA),服务器端只需要拿到这些机构颁发的证书并配置好,浏览器会自己校验证书的可 ...

  8. 利用Pycharm部署同步更新Django项目文件

    利用Pycharm部署同步更新Django项目文件 这里使用同步更新的前提是你已经在服务器上上传了你的Django项目文件. 在"工具(Tools)"菜单中找到"部署(D ...

  9. Linux Centos虚拟机扩容

    Linux Centos虚拟机扩容(/dev/mapper/centos-root) 1:.首先查看我们的根分区大小是多少 df -h 文件系统 类型 容量 已用 可用 已用% 挂载点``/dev/m ...

  10. 7.caffe：create_lmdb.sh（数据预处理转换成lmdb格式）

    个人实践代码如下: #!/usr/bin/env sh # Create the imagenet lmdb inputs # N.B. set the path to the imagenet tr ...