browser objec tmodel浏览器对象模型

BOM里面的方法大多在window对象底下，window代表窗口，也就是说，在BOM里面大多调用window下面的东西。

1.open方法是window底下的一个方法

window.open(页面的地址URL，打开的方式)方法，打开一个新的界面

如果URL为空，则默认打开一个空白页面；如果打开方式为空，则默认新窗口方式打开

返回值：返回新打开的窗口的window对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <input type="button" value="点击跳转" id="btn">

</body>

<script>

    function $(id) {

        return document.getElementById(id)

    }

    $('btn').onclick=function(){

        var newPage=window.open()

        alert(newPage)

    }

</script>

</html>

得到：

因此可以设置新界面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <input type="button" value="点击跳转" id="btn">

</body>

<script>

    function $(id) {

        return document.getElementById(id)

    }

    $('btn').onclick=function(){

        var newPage=window.open()

        newPage.document.body.style.background='red'//将新界面的背景色设置为红

    }

</script>

</html>

运行为：

2.close()方法 关闭当前窗口

火狐：不关闭

谷歌：直接关闭

IE：先询问

注意：可以在本窗口关闭通过Js打开的新窗口

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <input type="button" value="点击跳转" id="btn1">

    <input type="button" value="关闭窗口" id="btn2">

</body>

<script>

    function $(id) {

        return document.getElementById(id)

    }

    $('btn1').onclick=function(){

        newPage=window.open()//前期知识，不带var的变量为全局变量

    }

    $('btn2').onclick=function(){

        newPage.close()

    }

</script>

</html>

3.window.navigator.userAgent------获取浏览器信息

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

<script>

    alert(window.navigator.userAgent);

</script>

</html>

不同的浏览器，信息不同

所以，根据这个属性，可以判断是否是某个浏览器。比如：如果是谷歌浏览器，则弹出我是谷歌，否则弹出我不是谷歌。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

<script>

if(window.navigator.userAgent.indexOf('Chrome')){

    alert('我是谷歌');

}else{

    alert('我不是谷歌')

}

</script>

</html>

运行为：

4.window.location------地址栏上的信息

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

<script>

alert(window.location);

</script>

</html>

注意：其值为一个数组

其中window.location后面还有几个属性

1）window.location.href------同样获取地址栏的全部信息，即相当于url

2）window.location.search-------地址栏？后面的内容（包括问号）

3）window.location.hash------地址栏#后面的值（包括#）

BOM相关方法及属性的更多相关文章

  1. [妙味 DOM] 第二课：DOM、BOM相关方法及属性

    知识点总结 获取样式.增加样式.删除样式函数的封装 表格 tHead tBodies tFoot rows 行 cells 列 表单 表单可以通过name来获取元素:表单.name值 onchange ...

  2. BOM下的属性和方法---上

    -------------BOM------------------------------------------------ 三个系统对话框   浏览器可以通过alert().confirm()和 ...

  3. BOM下的属性和方法---下

    继续BOM下的属性和方法---上 代码示例(亲测)2:   <title>location对象的属性</title> <script> //服务器环境我再此次演示中 ...

  4. DOM相关方法，属性整理

    DOM相关方法,属性整理1.获取元素的方法 1根据id获取对象 document.getElementById(''); 2根据标签名获取对象 document.getElementsByTagNam ...

  5. BOM主要对象属性方法总结

    BOM window对象 浏览器实例,全局对象 1.窗口位置: screenTop,screenLeft(screenX,screenY):窗口相对于屏幕左边和上边的位置 moveTo(x,y):将窗 ...

  6. BOM 窗体相关属性以及页面可见区域的获取方式

    1 在IE Safari Oper Chrome 都提供了screenLeft和screenTop属性: screenLeft : 相对于屏幕左边的距离 screenTop : 相对于屏幕上边的距离 ...

  7. JavaScript中常用的BOM对象（属性、方法）

    window对象 定义: 一个浏览器窗口实例 与窗口有关的信息(应用程序编程接口) ECMAScript规定的Global对象 方法 open(url),返回标识符 引用 即将打开窗口的.(调用该引用 ...

  8. 理解 NgModelController 中相关方法和属性

    1. 理解$formatters和$parsers方法 angular的双向绑定可以实现view和model中的值自动同步,但有时候我们不想让用户输入的(view值)和发送给后台的(model值)并不 ...

  9. 进程&线程（二）：Thread相关方法与属性

    学习自:python进程.线程.协程 - 张岩林 - 博客园 1.threading.Thread Thread方法 方法(使用方法为Thread.xxx) 说明 start() 激活线程 getNa ...

随机推荐

  1. K2 BPM_北汽新能源业务流程管理信息系统建设思考_全球领先的工作流引擎

    本文由CIO发展中心根据北汽新能源流程与IT总监刘伟霞在“亦庄CIO数字化转型探索——CIO发展中心亦庄分舵2019夏季论坛”活动中演讲整理. 在“亦庄CIO数字化转型探索——CIO发展中心亦庄分舵2 ...

  2. Error:Unable to start the daemon process. This problem might be caused by incorrect configuration of

    我试了修改或者配置gradle文件没有成功解决的 ,所以试了这个解决方案 试了下这个是可以解决的. 变量名   _JAVA_OPTIONS 变量值   -Djava.net.preferIPv4Sta ...

  3. ASE19 团队项目 alpha 阶段 Frontend 组 scrum9 记录

    本次会议于11月14日,11:30 在微软北京西二号楼13158,持续15分钟. 与会人员:Jingyi Xie, Jiaqi Xu, Jingwei Yi, Hanyue Tu 请假: Ziwei ...

  4. 转: 解决idea工具下tomcat中文乱码问题

    在运行/调试 配置对话框的Startup/Connection面板中, 勾选Pass environment variables. 并添加一个environment variable, Name填 J ...

  5. 你应该使用Python3里的这些新特性

    概述 由于Python2的官方维护期即将结束,越来越多的Python项目从Python2切换到了Python3.可是,在实际的工作中,我发现好多人都是在用Python2的思维去写Python3的代码, ...

  6. 用js刷剑指offer(包含min函数的栈)

    题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). 牛客网链接 js代码 const stack1 = [] const stack2 = ...

  7. 共用dll如何扩展

    今天需要对一个多个项目共用的dll进行扩展.发现很难搞,然后老大告诉我共享的dll有一个属性指向各个平台自己的类型,这个类型是暴露在各个平台自己项目中的. 然后直接对这个属性进行扩展就行了,这个属性是 ...

  8. MySQL-进阶7-子查询 - select后/where后/from后/ []where后/having后] / exists后面 的相关子查询

    /*SQL-进阶7-子查询 含义:出现在其他语句中的select 语句,称为子查询或内查询 外部的查询语句,称为主查询 或者 外查询 分类1:按子查询出现的位置———— select 后面:仅仅支持标 ...

  9. C# 对Outlook2010进行二次开发

    第一步:添加新项目 第二步:添加新的页签,注意,此页签是显示到Outlook主界面的 第三步:添加自己想要的文本框以及按钮 第四步:如果你想将此界面显示到主界面的话,需要这样设置:属性里面的Ribbo ...

  10. spring-JDBC配置，使用，一些报错，mybatis原理，优化

    一. 配置spring的jdbc的pom.xml遇到报错 missing artifactXXXXX. 修改dependency的版本如下 <dependency> <groupId ...