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 相关文章推荐
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 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中文编码小技巧
2014/12/25 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
python获取糗百图片代码实例
2013/12/18 Python
详细介绍Python中的偏函数
2015/04/27 Python
python利用正则表达式提取字符串
2016/12/08 Python
Python构建网页爬虫原理分析
2017/12/19 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
django反向解析和正向解析的方式
2018/06/05 Python
python实现浪漫的烟花秀
2019/01/30 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
详解Python流程控制语句
2020/10/28 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
摄影专业毕业生求职信
2014/03/13 职场文书
交通安全寄语大全
2014/04/08 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
公司保密管理制度
2015/08/04 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
Golang中channel的原理解读(推荐)
2021/10/16 Golang