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 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
layui实现tab的添加拒绝重复的方法
Sep 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错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
PHP实现微信对账单处理
2018/10/01 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
JQuery live函数
2010/12/24 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
gearman的安装启动及python API使用实例
2014/07/08 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
python实现各种插值法(数值分析)
2019/07/30 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
python路径的写法及目录的获取方式
2019/12/26 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
如何通过python计算圆周率PI
2020/11/11 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
冰淇淋开店创业计划书
2014/02/01 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
酒店节能减排方案
2014/05/26 职场文书
毕业实习单位意见
2015/06/04 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
redis复制有可能碰到的问题汇总
2022/04/03 Redis
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python
Java界面编程实现界面跳转
2022/06/16 Java/Android