打开新窗口显示广告信息

实例说明

本实例要在窗口每次被加载的时候弹出一个广告对话框。

技术要点

本实例主要应用 JavaScript 的 window 对象。

window 对象的常用方法

方法	说明
alert()	弹出一个警告对话框
confirm()	在确认对话框中显示指定的字符串
prompt()	弹出一个提示对话框
close()	关闭被引用的窗口
focus()	将被引用的窗口放在所有打开窗口的前面
open()	打开新浏览器窗口并且显示由URL或名字引用的文档，并设置创建窗口的属性
resizeTo(x,y)	设置窗口的大小
resizeBy(offsetx,offsety)	按照指定的位移量设置窗口的大小

应用 JavaScript 的 open()方法可以打开浏览器窗口。

使用 window 对象打开窗口的语法格式如下。

WindowVar = window.open(url,windowname,location);

参数说明如下：

WindowVar:当前打开窗口的句柄。
url:目标窗口的URL。
windowname:window:对象的名称。
location:对窗口属性进行设置。

对窗口属性进行设置的可选参数

属性	说明
width	窗口的宽度
height	窗口的高度
scrollbars	是否显示滚动条
resizable	设定窗口大小是否固定
toolbar	浏览器工具条，包括后退及前进按钮等
menubar	菜单条，一般包括有文件，编辑及其他一些条目
location	定位区，也叫地址栏，是可以输入URL的浏览器文本区
direction	更新信息按钮

实现过程

（1）首先创建用于弹出广告信息的页面，在该页面中添加所要宣传的广告信息。

new.html

<html>  
<head>  
<title>打开新窗口显示广告信息</title>  
<style type="text/css">  
body{  
    background-image:url(new.jpg);  
    background-repeat:no-repeat;  
    }  
</style>  
</head>  
<body></body>  
</html>

（2）在 index.html 页面写上 JS 代码实现功能

index.html

<html>  
    <head>  
    <meta charset="utf-8" />  
        <script type="text/jscript" language="javascript">  
            window.open("new.html","new","height=280,width=800,top=10,left=20,resizable=no, location=no",false);  
        </script>  
        <style type="text/css">  
            p{  
                font-size:24px;  
                color:#F00;  
            }  
        </style>  
    </head>  
    <body>  
        <p>网站首页</p>  
    </body>  
</html>

注：style 标签的内容为 css 的知识，我们关注的是 script 标签内的内容。这样我们的这个实例就做好了。