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 相关文章推荐
javascript 遍历验证所有文本框的值
Aug 27 Javascript
var与Javascript变量隐式声明
Sep 17 Javascript
js 多浏览器分别判断代码
Apr 01 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
Node.js的特点详解
Feb 03 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
vue视图不更新情况详解
May 16 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
python自动生成model文件过程详解
2019/11/02 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
百思买美国官网:Best Buy
2016/07/28 全球购物
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
五年级数学教学反思
2014/02/11 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers