JavaScript中window.open用法实例详解


Posted in Javascript onApril 15, 2015

本文较为详细的分析了JavaScript中window.open用法。分享给大家供大家参考。具体如下:

<script LANGUAGE="javascript">

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no') //写成一行

</script>

参数解释:

js脚本开始;
 
window.open 弹出新窗口的命令;
'page.html' 弹出窗口的文件名;
'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替;
height=100 窗口高度;
width=400 窗口宽度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;
toolbar=no 是否显示工具栏,yes为显示;
menubar,scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小,yes为允许;
location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;

1、用函数控制弹出窗口
 
下面是一个完整的代码。

<html>
<head>
<script LANGUAGE="Javascript">
<!-- 
function openwin()
{ window.open("page.html", "newwindow", "height=100,width=400, toolbar=no , menubar=no, scrollbars=no,resizable=no, location=no, status=no") //写成一行
}
//-->
</script>
</head>
<body onload="openwin()">
...任意的页面内容...
/body>
</html>

这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢?
 
方法一: 浏览器读页面时弹出窗口;
 
方法二: 浏览器离开页面时弹出窗口;
 
方法三:用一个连接调用:打开一个窗口 注意:使用的“#”是虚连接。
 
方法四:用一个按钮调用:

2、定时关闭弹出的窗口 (有些网站注册成功后显示n秒转到注册前的那页信息,或自己跳转)
 
下面我们再对弹出的窗口进行一些控制,效果就更好了。
 
如果我们再将一小段代码 加入弹出的页面(注意是加入到page.html的HTML中,可不是主页面中,否则 ...),让它10秒后自动关闭是不是更酷了?
 
首先,将如下代码加入page.html文件的区:

<script language="Javascript">
function closeit()
{
setTimeout("self.close()",10000) //毫秒
}
</script>

然后,再用 这一句话代替page.html中原有的这一句就可以了。
 
(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码 ,10秒钟后就自行关闭该窗口。

3、 仅弹出一次窗口(cookie控制)
 
回想一下,上面的弹出窗口虽然酷,但是有一点小毛病,比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),
 
那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?有解决的办法吗?
 
我们使用cookie来控制一下。
 
首先,将如下代码加入主页面HTML的区:

<script>
function openwin()
{window.open("page.html","","width=200,height=200")}
function get_cookie(Name)
{
 var search = Name + "="
 var returnvalue = "";
 if (documents.cookie.length > 0) {
 offset = documents.cookie.indexOf(search)
 if (offset != -1) {
 offset += search.length
 end = documents.cookie.indexOf(";", offset);
 if (end == -1)
 end = documents.cookie.length;
 returnvalue=unescape(documents.cookie.substring(offset,end))
 }
 }
 return returnvalue;
}
function loadpopup(){
 if (get_cookie('popped')==''){
 openwin() ;
documents.cookie="popped=yes" ;
 }
}
</script>

然后,用(注意不是openwin而是loadpop啊!) 替换主页面中原有的

这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
模仿jQuery each函数的链式调用
Jul 22 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 #Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 #Javascript
JavaScript表格常用操作方法汇总
Apr 15 #Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 #Javascript
详细解密jsonp跨域请求
Apr 15 #Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 #Javascript
javascript中Math.random()使用详解
Apr 15 #Javascript
You might like
PHP经典面试题集锦
2015/03/19 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
js实现文字闪烁特效的方法
2015/12/17 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
python实现数独算法实例
2015/06/09 Python
详解python的ORM中Pony用法
2018/02/09 Python
python检索特定内容的文本文件实例
2018/06/05 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
python3实现微型的web服务器
2019/09/03 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
Python中pass的作用与使用教程
2020/11/13 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
音乐专业应届生教师求职信
2013/11/04 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
请病假条范文
2015/08/17 职场文书
如何用python绘制雷达图
2021/04/24 Python
vue3中provide && inject的使用
2021/07/01 Vue.js