前端-javascript-BOM-浏览器对象模型
BOM的介绍---浏览器对象模型。
操作浏览器部分功能的API。比如让浏览器自动滚动。
-----------------------------------------------------------------------------------------------------------------------------------
window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。
DOM是BOM的一部分。
window对象: window对象是JavaScript中的顶级对象。
全局变量、自定义函数也是window对象的属性和方法。
window对象下的属性和方法调用时,可以省略window。
弹出系统对话框
比如说,alert(1)是window.alert(1)的简写,因为它是window的子方法。 系统对话框有三种:
alert(); //不同浏览器中的外观是不一样的
confirm(); //兼容不好
prompt(); //不推荐使用
打开窗口、关闭窗口
1、打开窗口:
window.open(url,target); 参数解释: url:要打开的地址。
target:新窗口的位置。可以是:_blank 、_self、 _parent 父框架。![]()
2、关闭窗口
window.close(); <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <!--行间的js中的open() window不能省略-->
<button onclick="window.open('https://www.luffycity.com/')">路飞学城</button> <button>打开百度</button>
<button onclick="window.close()">关闭</button>
<button>关闭</button> </body>
<script type="text/javascript"> var oBtn = document.getElementsByTagName('button')[1];
var closeBtn = document.getElementsByTagName('button')[3]; oBtn.onclick = function(){
//open('https://www.baidu.com') //打开空白页面
open('about:blank',"_self")
}
closeBtn.onclick = function(){
if(confirm("是否关闭?")){
close();
}
} </script>
</html>
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
如果您非常了解文档的结构,也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素。
closeBtn = document.getElementsByTagName('button')[3]
location对象
window.location可以简写成location。location相当于浏览器地址栏,可以将url解析成独立的片段。
location对象的属性
href:跳转
hash 返回url中#后面的内容,包含#
host 主机名,包括端口
hostname 主机名
pathname url中的路径部分
protocol 协议 一般是http、https
search 查询字符串
--------------------------------------------------------------------
<body> <!--<form action="https://www.baidu.com/s" target = '_blank'>-->
<!--<input type="text" name="wd" placeholder="请输入城市">-->
<!--<input type="submit" value="搜索">--> <!--</form> --> <script type="text/javascript"> console.log(window.location); setTimeout(function(){ location.href = 'https://www.baidu.com';
}, 5000) </script>
</body>
---------------------------------------------------------------------
location对象的方法
window.location.reload(); //全局刷新页面,相当于浏览器导航栏上 刷新按钮
navigator对象
window.navigator 的一些属性可以获取客户端的一些信息。
- userAgent:系统,浏览器)
platform:浏览器支持的系统,win/mac/linux
console.log(navigator.userAgent);
console.log(navigator.platform);
history对象
1、后退: history.back()
history.go(-1):0是刷新
2、前进: history.forward()
history.go(1) 用的不多。因为浏览器中已经自带了这些功能的按钮:
------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="./index.html">新网页</a>
<button id="forward">前进</button>
<button id="refresh">刷新</button>
<script type="text/javascript">
alert(1); function $(id){
return document.getElementById(id);
} $('forward').onclick = function(){ // 表示前进 1
window.history.go(1);
};
$('refresh').onclick = function(){
// 表示刷新 // 不常用 因为因为全局刷新
//window.history.go(0);
window.location.reload();
// 局部作用域刷新 使用的技术 ajax后面 介绍
} </script> </body>
</html>
-----------------------------------
重点:
------------------------------------------------------------------------------------------------------------------------
前端-javascript-BOM-浏览器对象模型的更多相关文章
- JavaScript——BOM(浏览器对象模型),时间间隔和暂停
BOM(浏览器对象模型):能够对浏览器的窗体进行訪问和操作 1.主要的BOM体系: window------------document-------------------------------- ...
- [TimLinux] JavaScript BOM浏览器对象模型
1. 简介 ECMAScript是JavaScript的核心,但是如果要在WEB中使用JavaScript,那么BOM则无疑才是真的的核心.BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网 ...
- 第一百一十一节,JavaScript,BOM浏览器对象模型
JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...
- JavaScript Window - 浏览器对象模型
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话". 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model (BOM))尚 ...
- javascript之BOM浏览器对象模型引入
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript(二、BOM 浏览器对象模型)
一.BOM是什么 BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心 ...
- javascript高级程序设计第3版——第8章 BOM(浏览器对象模型)
第八章,浏览器对象模型 主要介绍了window的几个对象以及框架,窗口的关系,各个浏览器对象的属性以及方法:
- BOM—浏览器对象模型(Browser Object Model)
1,javascript 组成部分: 1.ECMAscript(核心标准): 定义了基本的语法,比如:if for 数组 字符串 ... 2.BOM : 浏览器对象模型(Browser ...
- JavaScirpt(JS)——BOM浏览器对象模型
一.BOM概念 BOM(Browser Object Model)即浏览器对象模型.可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关 ...
- BOM——浏览器对象模型(Browser Object Model)
什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...
随机推荐
- adnanh webhook 框架request values 说明
request values 在adnanh webhook 是比较重要的,规则触发以及命令参数传递都是通过它 支持的request values 类似 http header 查询参数 play ...
- web 分享代码片段
<div class="bshare-custom icon-medium-plus"><a title="分享到QQ空间" class=&q ...
- vertx.io 与nodejs 一个简单的性能比较
vertx.io 与node 都是可以进行js运行的一个引擎,但是vertx 支持的语言相对于node 多,可以查看官网.今天下网上查询相关的信息 时来了解到vertx.io 性能比node 好,于是 ...
- 用zcat查看压缩日志中百度抓取的量
比如查看124.251.44.85这一台服务器的07-13,07-14,07-15的日志中百度抓取http://www.baidu.com/search/spider.html 的量 wc命令参考博客 ...
- kettle--window开发环境和linux运行环境的迁移
首先要做的是将kettle在linux下搭建好. 一.搭建linux的kettle环境 1.1解压 (my_python_env)[root@hadoop26 ~]# .zip -d /usr/loc ...
- 分布式数据存储 shard(切片) 和 repali(副本) 的 节点数的关系。
1 , node 的 数量 应该大于等于 副本(指的是单个 shard 的 主副本+备份副本数)的 数量 ,如果 副本的数量大于 node 数量,那么 一个node 必定有2 个相同的 副本,这个多出 ...
- bzoj2467生成树
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2467 大水题. #include<iostream> #include<cs ...
- php设计模式之职责链模式
<?php /** * @desc php设计模式之职责链模式(责任链模式) 定义:顾名思义,责任链模式为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这 ...
- asp.net 网站 发布时 去掉.cs文件
VS2013在WIN8下扁平的UI和我今天锈垢的大脑,让找这个设置找了好半天!!! OK,言归正传. 在要发布的网站上右键,选择"发布网站". 在发布窗口中,会让你选择 ...
- 杂项:Mantis
ylbtech-杂项:Mantis 缺陷管理平台Mantis,也做MantisBT,全称Mantis Bug Tracker.Mantis是一个基于PHP技术的轻量级的开源缺陷跟踪系统,以Web操作的 ...