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 相关文章推荐
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
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中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
javascript数据类型详解
2017/02/07 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
代码分析Python地图坐标转换
2018/02/08 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
Django xadmin安装及使用详解
2020/10/26 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
四年的个人工作自我评价
2013/12/10 职场文书
单位介绍信范文
2014/01/18 职场文书
外贸专业求职信
2014/03/09 职场文书
护士个人自我鉴定
2014/03/24 职场文书
社区助残日活动总结
2014/08/29 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
SQL Server中的游标介绍
2022/05/20 SQL Server