8.5 JavaScript的BOM(二)
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(二)的更多相关文章
- 第一百一十一节,JavaScript,BOM浏览器对象模型
JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...
- 第三章 JavaScript操作BOM对象
第三章 JavaScript操作BOM对象 一.window对象 浏览器对象模型(BOM)是javascript的组成之一,它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HT ...
- JavaScript的BOM和DOM
JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...
- 使用jQuery快速高效制作网页交互特效--JavaScript操作BOM对象
JavaScript操作BOM 一.window对象: 二.window对象的属性和方法 1.windows对象的常用属性: 语法:window.属性名="属性值" 2.windo ...
- JavaScript(4)---BOM详解
JavaScript(4)---BOM详解 之前写过一篇有关DOM的博客:JavaScript(2)---DOM详解 DOM有个顶级对象叫:document.同样BOM中也有顶级对象叫 window. ...
- [JavaScript之BOM与DOM]
[JavaScript之BOM与DOM] BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM ( ...
- JavaScript 入门教程二 在HTML中使用 JavaScript
一.使用 <script> 元素的方式有两种:直接在页面中嵌入 JavaScript 代码和引用外部 JavaScript 文件. 二.使用内嵌方式,一般写法为: <script t ...
- JavaScript基础笔记二
一.函数返回值1.什么是函数返回值 函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...
- JavaScript基本概念(二)
JavaScript 基本概念(二) 操作符和语句 目录 操作符 一元操作符 位操作符 布尔操作符 乘性操作符 其他操作符 语句部分 说起操作符,回忆下上一篇文章末尾说的话. 操作符 一元操作符 ++ ...
随机推荐
- Skywalking的增强与拦截机制
整理自架构经理(汤哥)的分享 字节增强条件匹配 在 skywalking 中实现很多基于 byte-buddy 的关于链式匹配查询的实现, 代码如下所示: public abstract class ...
- Windows编程 Windows程序的生与死(中)
<pre style=""><pre class="cpp" name="code">1 #include < ...
- C# 中使用正则表达式 Regex.Matches方法的几个应用[转]
用于正则表达式的 Regex.Matches静态方法的几种用法: //①正则表达式 = > 匹配字符串 string Text = @"This is a book , this is ...
- mysql 5.7.19安装
从mysql官网下载的mysql5.7.19免安装版, 安装时出现问题,mysql总是启动不起来,在网上查了下资料,做个记录: .将mysql解压到指定的文件夹 .以管理员身份运行cmd .定位到my ...
- nginx触屏版跟PC的代理设置
server { listen ; set $mobile_rewrite do_not_perform; if ( $http_user_agent ~* "(android|bb\d+| ...
- NodeJS express框架的使用
首先,可以通过npm或者淘宝镜像cnpm全局安装epress框架,这里不具体说了 npm install -g expressnpm install -g express-generator 新建一个 ...
- sql 将英文句子中的单词首字母转换为大写
create function dbo.pTitleCase(@StrIn nvarchar(max))returns nvarchar(max)as begin; declare @StrOut n ...
- linux 下使用 VirtualBox 搭建集群环境
参考文章: https://www.nakivo.com/blog/virtualbox-network-setting-guide/ https://help.ubuntu.com/lts/serv ...
- 6.移动端自动化测试-小知识 if __name__==’__main__:是什么意思?
1 引言 在Python当中,如果代码写得规范一些,通常会写上一句“if __name__==’__main__:”作为程序的入口,但似乎没有这么一句代码,程序也能正常运行.这句代码多余吗?原理又在哪 ...
- Android SQLiteDatabase的使用
package com.shawn.test; import android.content.ContentValues; import android.content.Context; import ...