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学习2 选择器的使用说明
Feb 07 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
js星星评分效果
Jul 24 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
js制作提示框插件
Dec 24 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
javascript下function声明一些小结
2007/12/28 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
浅析使用Python操作文件
2017/07/31 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
python3使用GUI统计代码量
2019/09/18 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
Ibatis如何使用动态表名
2015/07/12 面试题
Ruby如何进行文件操作
2014/07/17 面试题
师范生教师实习自我鉴定
2013/09/27 职场文书
运动会表扬稿大全
2014/01/16 职场文书
开会迟到检讨书
2014/02/03 职场文书
我爱我校演讲稿
2014/05/21 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
2014年度安全工作总结
2014/12/04 职场文书
毕业证明模板
2015/06/19 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
Nginx实现负载均衡的项目实践
2022/03/18 Servers