BOM学习笔记（一）打开新链接四种方式、窗口属性、定时器

爱被打了一巴掌 2022-04-15 03:17 248阅读 0赞

BOM：专门操作浏览器窗口的对象

1、window对象充当2个角色：

1. 全局对象

2. 包含BOM常用对象

3、打开新链接方式：

在HTML的<a>标签的学习中，我们知道了target属性和\_self和\_blank两个值的区别

target-->目标窗口的名称

\_self: 自动获得当前窗口名称（可返回）

\_blank: 创建一个新窗口，随机生成一个不重复的名字

窗口名：内存中同一个窗口名只能打开一个，后打开的，会替换先打开的

（官方解释：name，声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。）

打开新链接方式四种方式：

① 在当前窗口打开新链接，可后退

html: target="\_self"

js:\[window.\]open("url","\_self")

② 在当前窗口打开新链接，禁止后退

js:location.replace("url");//使用新链接，替换旧链接，同时打开新连接

③ 在新窗口打开新链接，可同时开多个

html: target="\_blank"

js:\[window.\]open("url","\_blank");

④ 在新窗口打开新链接，只能打开一个

html: target="自定义窗口名"

js:\[window.\]open("url","自定义窗口名");

例、HTML：  <a href="javascript:fun1()" >在当前窗口打开，可后退</a><br>

SCRIPT：  function fun1()\{open("http://tmooc.cn","\_self"); \}

4、window对象的属性：窗口大小与定位：

大小：

①innerHeight/Width: 返回窗口的文档显示区的高度/宽度（只读属性）

outerHeight/Width: 返回窗口的外部高度/宽度（只读属性）

②screen.height/width: 桌面完整分辨率宽高

screen.availHeight/availWidth: 去掉任务栏后剩余分辨率的宽高

调整大小：window.resizeTo(width,height)接受浏览器窗口新宽度和新高度

window.resizeBy(width,height)接受新窗口与原窗口的宽度和高度之差

位置：

①pageYOffset/pageXOffset：设置或返回当前页面相对于窗口显示区左上角的 X/Y 位置。

② 窗口左上角x坐标：window.screenLeft||window.screenX;

y坐标：window.screenTop||window.screenY;

③将窗口移动到指定坐标：window.moveTo(x,y)

④事件发生时，鼠标相对于整个屏幕的坐标：event.screenX|screenY

5、定时器：

setInterval() ：周期性定时器，按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

setTimeout() ：一次性定时器，在指定的毫秒数后调用函数或计算表达式。可以用setTimeout()实现setInterval()功能， 在一次性定时器的结尾，每次都重新启动一个一次性定时器就达到一直执行的效果了

实现一次性/周期性定时器的三个步骤

①动画的每一步要执行的任务(函数对象)

function step()\{

每一步要做的事情

/\*一次性定时器需要根据条件判断是否有必要继续启动下一个定时器\*/

\}

②将一步的任务放入定时器，反复调用，并获得存储定时器的编号

一次性：timer=setTimeout(step,间隔毫秒数|等待毫秒数)

周期性：timer=setInterval (step,间隔毫秒数|等待毫秒数)

③清理定时器（必须用全局变量，临时存储定时器的编号）

clearTimeout(timer)

停止正在等待的定时器

例：

<!DOCTYPE html>

<html>

<head>

<title>定时器</title>

</head>

<body>

<html>

<body>

<div id="clock" style="height:30px"></div>

<button οnclick="window.clearInterval(int)">停止</button>

<script type="text/javascript">

var int=window.setInterval("clock()",1000);

/\*第一个参数是要定时执行的函数，第二个是间隔时间(ms)，执行完获得一个返回值，用来停止定时器的\*/

function clock()\{

var d=new Date();     //获得当前时间

var t=d.toLocaleTimeString();//将时间格式化

document.getElementById("clock").innerHTML=t;//将格式化后的时间写入div

/\*如果使用setTimeout()方法，需要把上边setInterval改为setTimeout，并在此处多一步var int=setTimeout("clock()",1000); \*/

\}

</script>

</body>

</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，248人围观）

还没有评论，来说两句吧...

相关阅读

相关 phpcms模板外部链接在新窗口打开怎么设置

因为phpcms模板后台不带新窗口打开功能，所以要用代码改咯。在phpcms后台添加的外部链接都是在本页面打开，phpcms后台也乜有直接让外部链接打开新窗口的功能，接下来

向右看齐/ 2023年10月21日 07:23/ 0 赞/ 90 阅读

相关如何设置谷歌浏览器在新窗口中打开链接

1、进入谷歌官网网址：[https://www.google.com][https_www.google.com] 2、在谷歌官网中滑动页面到最下面，点击右下角的`设置`

「爱情、让人受尽委屈。」/ 2022年12月27日 09:15/ 0 赞/ 333 阅读

相关 JavaScript 打开新链接的两种方式

1.超链接 <a href="http://www.xuheyao.win" title="Emily's Blog">Welcome</a> 等效于js代码

Bertha 。/ 2022年07月13日 14:11/ 0 赞/ 204 阅读

相关打开新窗口以post方式提交

[window.open以post方式提交][window.open_post] 1、按钮准备 <input id="btn_amp" type="button"

冷不防/ 2022年06月16日 22:42/ 0 赞/ 305 阅读

相关 JavaScript打开新链接

雕栏玉砌应犹在,只是朱颜改 JavaScript打开新链接可以设置当前窗口跳转还是打开一个新窗口: 第一种:当前窗口打开: window.location.h

迈不过友情╰/ 2022年05月23日 01:36/ 0 赞/ 198 阅读

相关 BOM学习笔记（一）打开新链接四种方式、窗口属性、定时器

BOM：专门操作浏览器窗口的对象 1、window对象充当2个角色： 1. 全局对象 2. 包含BOM常用对象 3、打开新链接方式：在

爱被打了一巴掌/ 2022年04月15日 03:17/ 0 赞/ 249 阅读

相关项目中打开新窗口的3种方式

1.使用iframe(注意Iframe的高度默认150px，如果要改变iframe的高度，只能设置成具体的像素值，不能是百分比) 2.使用window.open()直接打开外

待我称王封你为后i/ 2022年03月07日 13:58/ 0 赞/ 353 阅读

相关设置HTML:target=_blank，在新窗口中打开链接

项目中在子界面使用window.opener.document，获得父界面id="reportInfoId"对应的隐藏的input标签的value 问题：父界

﹏ヽ暗。殇╰゛Y/ 2022年01月28日 03:57/ 0 赞/ 258 阅读

相关图解 wp WordPress 文章链接在新窗口打开

wp WordPress 文章链接在新窗口打开因为wp默认是不在新窗口打开链接的，这对于我们这样习惯关窗口的人，用起来很不方便。其实改起来很简单，下面开始一、

迷南。/ 2021年09月18日 15:42/ 0 赞/ 414 阅读

相关 CefSharp 在同一窗口打开链接的方法

原文: [CefSharp 在同一窗口打开链接的方法][CefSharp] 摘要在winform中使用cefsharp的时候，我们在浏览网页的时候，想在同一个窗口打开

我不是女神ヾ/ 2021年09月17日 14:28/ 0 赞/ 512 阅读