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 学习 - 提高篇
Feb 02 Javascript
jQuery 解析xml文件
Aug 09 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
浅谈javascript的调试
Jan 28 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 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 魔术函数使用说明
2010/05/14 PHP
PHP新手入门学习方法
2011/05/08 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
Python unittest 简单实现参数化的方法
2018/11/30 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
python实现在一个画布上画多个子图
2020/01/19 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
python定义具名元组实例操作
2021/02/28 Python
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
二年级评语大全
2014/04/23 职场文书
红色故事演讲稿
2014/05/22 职场文书
2014年教师节寄语
2014/08/11 职场文书
先进班组材料范文
2014/12/25 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书