浏览器对象

最新推荐文章于 2024-07-28 14:05:33 发布
转载 最新推荐文章于 2024-07-28 14:05:33 发布 · 54 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/Harold-Hua/p/4641125.html
文章标签：

#javascript #操作系统 #ViewUI

window对象

window对象是BOM的核心，window对象指当前的浏览器窗口。

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>window对象</title>
<script type="text/javascript">
    alert("欢迎来到我的博客");
    function open1(){
        window.open('http://www.cnblogs.com/Harold-Hua/','_blank','width=600,height=400');  
    }
</script>
</head>
<body>
<form>
<input type="button" value="点击我，打开新窗口" onClick="open1()" />
</form>
</body>
</html>

　　

 

 

 

计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。

语法:

setInterval(代码,交互时间);

参数说明：

1. 代码：要调用的函数或要执行的代码串。

2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:

一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript">
  var attime;
  function clock(){
    var time=new Date();          
    attime= time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
    document.getElementById("clock").value = attime;
  }
  setInterval(clock,100);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50"  />
</form>
</body>
</html>

　　

 

 

 

取消计时器clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：

clearInterval(id_of_setInterval)

参数说明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
   function clock(){
      var time=new Date();               	  
      document.getElementById("clock").value = time;
   }
    var i = setInterval("clock()",100);
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)" />
  </form>
</body>
</html>

　　

 

 

 

计时器setTimeout()

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:

setTimeout(代码,延迟时间);

参数说明：

1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
  var num=0;
  function startCount() {
    document.getElementById('count').value=num;
    num=num+1;
    setTimeout("startCount()",1000);
  }
  setTimeout("startCount()",1000)
</script>
</head>
<body>
<form>
<input type="text" id="count" />
</form>
</body>
</html>

　　

 

 

 

取消计时器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止计时器。

语法:

clearTimeout(id_of_setTimeout)

参数说明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
  var num=0;
  var i;
  function startCount(){
    document.getElementById('count').value=num;
    num=num+1;
    i=setTimeout("startCount()",1000);
  }
  function stopCount(){
    clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="count" />
    <input type="button" value="Start" onclick="startCount()" />
    <input type="button" value="Stop" onclick="stopCount()"  />
  </form>
</body>
</html>

　　

 

 

 

History 对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

语法：

window.history.[属性|方法]

注意：window可以省略。

History 对象属性

History 对象方法

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>History对象</title>
</head>
<script type="text/javascript">
　//浏览历史总长度
  var HL =  window.history.length  ;
  document.write(HL);
</script>
<body>
</body>
</html>

　　

 

 

 

返回前一个浏览的页面

back()方法，加载 history 列表中的前一个 URL。

语法：

window.history.back();

比如，返回前一个浏览的页面，代码如下：

window.history.back();

注意：等同于点击浏览器的倒退按钮。

back()相当于go(-1),代码如下:

window.history.go(-1);

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
 <script type="text/javascript">
        function GoBack() {
            window.history.back();
        }
    </script>
</head>
<body>
点击下面的锚点链接，添加历史列表项:
    
    <br />
    <a href="#target1">第一个锚点</a>
    <a name="target1"></a>
    <br />
    <a href="#target2">第二个锚点</a>
    <a name="target2"></a>
    <br /><br />
    使用下面按钮，实现返回前一个页面:
    <form>
       <input type="button"  value="返回前一个页面" onclick="GoBack();" />        
    </form>
</body>
</html>

　　

 

 

 

返回下一个浏览的页面

forward()方法，加载 history 列表中的下一个 URL。

如果倒退之后，再想回到倒退之前浏览的页面，则可以使用forward()方法,代码如下:

window.history.forward();

注意：等价点击前进按钮。

forward()相当于go(1),代码如下:

window.history.go(1);

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
 <script type="text/javascript">
        function GoForward() {
            window.history.forward();
        }
    </script>
</head>
<body>
点击下面的锚点链接，添加历史列表项:    
    <br />
    <a href="#target1">第一个锚点</a>
    <a name="target1"></a>
    <br />
    <a href="#target2">第二个锚点</a>
    <a name="target2"></a>
    <br /><br />
    使用下面按钮，实现返回下一个页面:
    <form>
       <input type="button"  value="返回下一个页面" onclick="GoForward()" />        
    </form>
</body>
</html>

　　

 

 

 

返回浏览历史中的其他页面

go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。

语法：

window.history.go(number);

参数：

浏览器中，返回当前页面之前浏览过的第二个历史页面，代码如下：

window.history.go(-2);

注意：和在浏览器中单击两次后退按钮操作一样。

同理，返回当前页面之后浏览过的第三个历史页面，代码如下：

window.history.go(3);

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
 <script type="text/javascript">
        function GoBack() {
            window.history.go(-1);
        }

        function GoForward() {
            window.history.go(1);
        }
    </script>
</head>
<body>
    点击下面的锚点链接，添加历史列表项:    
    <br />
    <a href="#target1">第一个锚点</a>
    <a name="target1"></a>
    <br />
    <a href="#target2">第二个锚点</a>
    <a name="target2"></a>
    <br /><br />
    使用下面按钮，实现返回前或下一个页面:
    <form>
       <input type="button"  value="返回前一个页面" onclick="GoBack();" />
       <input type="button"  value="返回下一个页面" onclick="GoForward();" /> 
    </form>
</body>
</html>

　　

 

 

 

Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。

语法:

location.[属性|方法]

location对象属性图示:

location 对象属性：

location 对象方法:

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>location</title>
</head>
 <script type="text/javascript">
        document.write(location.href);
 </script>
</head>
<body>
</body>
</html>

　　

 

 

 

Navigator对象

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

对象属性:

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
  var browser = navigator.appName;
  var v_version = navigator.appVersion;
  var p_platform = navigator.platform;
  var u_userAgent = navigator.userAgent
  document.write("Browser name:" + browser + "<br />");
  document.write("Browser version:" + v_version + "<br />")
  document.write("Browser platform:" + p_platform + "<br />");
  document.write("Browser userAgent:" + u_userAgent + "<br />");
</script>
<body>
</body>
</html>

　　

 

 

 

userAgent

返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)

语法

navigator.userAgent

几种浏览的user_agent.，像360的兼容模式用的是IE、极速模式用的是chrom的内核。

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>navigator</title>
<script type="text/javascript">
  function validB(){ 
    var u_agent = navigator.userAgent; 
    var B_name="不是想用的主流浏览器!"; 
    if(u_agent.indexOf("Firefox")>-1){ 
        B_name="Firefox"; 
    }else if(u_agent.indexOf("Chrome")>-1){ 
        B_name="Chrome"; 
    }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 
        B_name="IE(8-10)";  
    }
        document.write("浏览器:"+B_name+"<br>");
        document.write("u_agent:"+u_agent+"<br>"); 
  } 
</script>
</head>
<body>
  <form>
     <input type="button" value="查看浏览器" onclick="validB()"  >
  </form>
</body>
</html>

　　

 

 

 

screen对象

screen对象用于获取用户的屏幕信息。

语法：

window.screen.属性

对象属性:

 

 

 

 

屏幕分辨率的高和宽

window.screen 对象包含有关用户屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽
注意:
1.单位以像素计。
2. window.screen 对象在编写时可以不使用 window 这个前缀。

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏幕分辨率的高和宽</title>
</head>
<body>
<script type="text/javascript">
document.write( "屏幕宽度：" + screen.width + "px<br />");
document.write( "屏幕高度：" + screen.height + "px<br />");       
</script>
</body>
</html>

 

 
 
 

屏幕可用高和宽度

1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。

2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。

注意:

不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏幕分辨率的高和宽</title>
</head>
<body>
<script type="text/javascript">
document.write("可用宽度：" + screen.availWidth + "px<br />" );
document.write("可用高度：" + screen.availHeight + "px<br />" );     
</script>
</body>
</html>

 

 

转载于:https://www.cnblogs.com/Harold-Hua/p/4641125.html

js系列二十：高阶函数
人生代码 ---- 公众号
03-16 936
大家对于javascript面向对象相关的知识可能都有所涉略，有一个问题可能困扰大家很久了，那就是在构造函数中，如果使用了 this ,那么这个 this 指向谁呢？如果在定义的原型方法中使用了 this ，那么这个 this 又指向谁？是构造函数，原型，还是实例？ function Person(name, age){ this.name = name; this.age = age; } ...
JS中的高阶函数
小丞同学
05-13 2136
高阶函数是指以函数作为参数的函数，并且可以将函数作为结果返回的函数。
JavaScript高级教程（完整版）
12-09
JavaScript高级教程，完整详细的讲解了JavaScript
JavaScript window对象
marsedely的专栏
04-24 903
window对象 window对象是BOM的核心，window对象指当前的浏览器窗口。 计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码。 语法: setInterval(代码,交互时间); 参数说明： 1. 代码：要调用的函数或要执行的代码串。 2. 交互时间：周期性执行或调用表达式之间
js高阶教程
最新发布
xiaowei0016的博客
07-28 406
闭包是指在一个函数内部定义的函数可以访问其外部函数的变量。Promise 是用于处理异步操作的一种方式。Proxy 对象用于定义基本操作（如属性查找、赋值、枚举、函数调用等）的自定义行为。高阶函数是指可以接受其他函数作为参数或返回一个函数的函数。是基于 Promise 的语法糖，使得异步代码看起来更像同步代码。元编程是指编写能够操作其他代码的代码。模块化是指将代码分割成独立的、可重用的模块。生成器是可以在执行过程中暂停和恢复的函数。柯里化是将一个多参数函数转换成一系列单参数函数的技术。
浅谈JavaScript的内置对象和浏览器对象
10-22
在JavaScript中，对象可以分为两类：内置对象和浏览器对象。本文将深入探讨这两种对象类型及其相关知识点。 首先，我们来看内置对象。JavaScript的内置对象是语言本身提供的一些预定义对象，它们提供了基本的数据...
JavaScript之浏览器对象_动力节点Java学院整理
10-19
JavaScript之浏览器对象是JavaScript在Web开发中不可或缺的一部分，它提供了与浏览器交互的能力，允许开发者获取和操作浏览器的各种信息。在JavaScript中，有四个主要的浏览器对象：`window`、`navigator`、`screen`...
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
01-21
本文实例讲述了JavaScript浏览器对象模型BOM。分享给大家供大家参考，具体如下： window对象位于BOM层次结构的最顶层。它包含了一些非常重要的子对象，包括location，navigator，document，screen，history。...
slide-bom:浏览器对象模型 (BOM) 的网页幻灯片
07-10
"Slide-BOM: 浏览器对象模型(BOM)的网页幻灯片" 是一个关于Web开发的主题，特别是聚焦在JavaScript中的浏览器对象模型（Browser Object Model）。"滑动炸弹"可能是指一种动态效果或者交互设计，其中幻灯片以滑动方式...
JavaScript - 高阶函数（map、reduce、filter、sort）
weixin_34097242的博客
06-15 202
map 举例说明，比如我们有一个函数f(x)=x2，要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上，就可以用map实现如下： 由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果： function pow(x) { return x...
Javascript BOM即浏览器对象模型Brower Object Model（Window、Navigator、Screen、History、Location、弹出框、计时器）
litengbin的博客
01-17 271
BOM即 浏览器对象模型(Brower Object Model)  浏览器对象包括  Window(窗口)  Navigator(浏览器)  Screen (客户端屏幕)  History(访问历史)  Location(浏览器地址)  Window(窗口) 1.获取文档显示区域的高度和宽度 一旦页面加载，就会自动创建window对象，所以无需手动创建window对
JS的高阶
fay_ren的博客
04-19 395
js高阶
Js高级进阶
weixin_41325924的博客
03-02 5010
一、面向对象 (1) 通过class 关键字创建类 类名 我们还是习惯性定义首字母大写 (2) 类里面有个 constructor 函数 可以接受传递过来的参数 同时返回实例对象 (3) constructor 函数 只要 new 生实例时 就会自动调用这个函数 如果我们不写这个函数 类也会自动生成这个函数 (4) 生成实例 new 不能省略 (5) 最后注意语法规范 创建类 类名后面不要加小括号 生成实例 类名后面加小括号 构造函数不需要加 function 1.创建类和生成实例 <..
JavaScript高阶
qq_50352386的博客
02-16 3856
1，作用域与函数进阶 1.1 执行环境关联着变量对象 （1）执行环境关联着一个变量对象，变量对象里面存储着我们声明的变量以及函数 （2）全局执行环境 window对象 1.2 执行环境栈 （1）当代码在函数中执行，函数也有执行环境，环境被推入执行环境栈中 （2）栈 ：存放数据的容器，先入后出。应用运行期间全局环境变量window不会被销毁 ...
JS-13-高阶函数
qq_31532983的博客
03-25 2132
Array的高阶函数：map、reduce、filter、sort、every、find、findIndex、forEach
BOM介紹，window常见事件，history对象，Location 对象
wangzhi0918的博客
03-22 361
1BOM介紹 // BOM 也叫浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。 // BOM 缺少 规范，每个浏览器提供商又按照自己想法去扩展它， // 那么浏览器共有对象就成了事实的标准。 // 所以，BOM 本身是没有标准的或者还没有哪个组织去标准它。 //一 window对象 ...
JS进阶-高阶技巧
smilehjl
01-26 839
在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window 因此DOM事件回调函数如果里面需要DOM对象的this，则不推荐使用箭头函数。JavaScript 中还允许指定函数中 this 的指向，有 3 个方法可以动态指定普通函数中 this 的指向。1. 箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。2.箭头函数中的this引用的就是最近作用域中的this。
JS高阶
qq_48557048的博客
10-15 162
复习一下JS高阶–1 1.执行环境与作用域** 1.1执行环境   讲解作用域之前先聊聊JS中的执行环境。执行环境定义了变量或函数能够访问的数据，为此，每个执行环境都关联着一个“隐藏的”变量对象，环境中定义的所有变量和函数都保存在这个变量对象中，虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它。 var a = 1 function add(num) { // 将传进的数字加 2 var b = num + 2 }   这段代码的执行环境就是window，window是全局执
js高级
兔子零
04-21 401
定时器this指向window javascript 的执行过程 预解析(变量) 数据集和功能集---- 对象 对象----属性和方法 -------------------面向对象------------------------ 面向对象是一种编程思想,把我们要做的复杂事物中的 所有内容都抽象成一些对象,通过处理这些对象的关系 完成我们要做的事情 面向对象好处:1.方便多人协同开发 2.便于后...
JavaScript浏览器对象详解
在JavaScript中，浏览器对象是与浏览器交互的关键，其中最为基础的是`window`对象。这个对象既是全局作用域的容器，也代表着用户浏览器的窗口本身。通过`window`对象，开发者可以获取到有关浏览器窗口的各种信息，并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值