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的执行顺序 之实战篇
Mar 03 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
Vue组件中slot的用法
Jan 30 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 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
PHP 数组入门教程小结
2009/05/20 PHP
php实现两个数组相加的方法
2015/02/17 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
javascript事件问题
2009/09/05 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
Python命令行click参数用法解析
2019/12/19 Python
python yield和Generator函数用法详解
2020/02/10 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
详解python的变量缓存机制
2021/01/24 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
Internal修饰符有什么含义
2013/07/10 面试题
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
元旦寄语大全
2014/04/10 职场文书
司法局火灾防控方案
2014/06/05 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
mysql脏页是什么
2021/07/26 MySQL
python 多态 协议 鸭子类型详解
2021/11/27 Python