BOM编程、window对象

最新推荐文章于 2024-05-09 11:58:43 发布

原创最新推荐文章于 2024-05-09 11:58:43 发布 · 416 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#BOM编程 #window对象

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了浏览器对象模型（BOM）的基本概念，并详细解释了Window对象的常见方法及属性，包括如何打开新窗口、调整窗口大小和位置等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、引入BOM编程：
1、javascript组成部分：
1）EMCAScript（基本语法）
2）BOM( Browser Object Model) 浏览器对象模型.
浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述，如果我们要操作浏览器的一些属性，我们就可以通过浏览器对象模型的对象进行操作。
3）DOM。
之前已经讲过了EMCAScript（基本语法），接下来说说BOM编程。

2、浏览器对象：
1）window 代表了一个新开的窗口
2）location 代表了地址栏对象。
3）screen 代表了整个屏幕的对象

学习这部分内容就要查阅DHTML文档！

二、window对象：
1、常用的方法：
1）open() 打开一个新的窗口。
2）resizeTo() 将窗口的大小更改为指定的宽度和高度值。
3）moveBy() 相对于原来的窗口移动指定的x、y值。
4）moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

<!--ad.html-->
<!DOCTYPE html>
<html>
  <head>
    <title>ad.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  </head>
  <body>
        <marquee>我是广告，我来了!!</marquee>
  </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript">
    function showAd(){
  window.open("ad.html","_blank","height=400px,width=400px,toolbar=no,location=no,top=200px");  
        //（属性依次为：要打开的页面，以新建页面的形式高，宽，工具栏不显示，地址栏不显示，距顶部距离），参数不一定都要写，几个都可以 
    }
    function small(){
        window.resizeTo(300,200);//相对于原本窗口改变指定的大小。  
    }
    function move(){
        window.moveBy(50,0); // 相对于原来的窗口移动指定的x、y值，可以多次移动。   
    }
    function move2(){
        window.moveTo(500,200); // 相对于左上角位置移动x、y值，仅能移动一次。
    }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <input type="button" onclick="showAd()" value="下载电影"/>
    <input type="button" onclick="small()" value="变小"/>
    <input type="button" onclick="move()" value="moveBy"/>
    <input type="button" onclick="move2()" value="moveTo"/>
</body>
</html>

5）setInterval() 每经过指定毫秒值后就会执行指定的代码。
6）clearInterval() 根据一个任务的ID取消定时任务。
7）setTimeout() 经过指定毫秒值后执行一次指定的代码。

<script type="text/javascript">
function showAd(){
 open("ad.html","_blank","height=400px,width=400px,toolbar=no,location=no,top=200px");
setTimeout("showAd()",2000);

var id =setInterval("showAd()",2000);   

function clearTest(){
    clearInterval(id);  
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <input type="button" onclick="showAd()" value="下载电影"/>
    <input type="button" onclick="clearTest()" value="取消定时任务"/>
</body>
</html>