windo.open 全攻略
【1、最基本的弹出窗口代码】
其实代码非常简单:
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html')
-->
</SCRIPT>
因为这是一段javascripts代码,所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。<!-- 和 -->是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。 window.open ('page.html') 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(.. /)均可。 用单引号和双引号都可以,只是不要混用。 这一段代码可以加入HTML的任意位置,<head>和</head>之间可以,<body>间</body>也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。
【2、经过设置后的弹出窗口】
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。 我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应页面的具体情况。
<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>
参数解释:
<SCRIPT LANGUAGE="javascript"> 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为允许;
</SCRIPT> js脚本结束
【3、用函数控制弹出窗口】
下面是一个完整的代码。
<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 οnlοad="openwin()">
...任意的页面内容...
</body>
</html>
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢?
方法一:<body οnlοad="openwin()"> 浏览器读页面时弹出窗口;
方法二:<body οnunlοad="openwin()"> 浏览器离开页面时弹出窗口;
方法三:用一个连接调用:
<a href="#" onClick="openwin()">打开一个窗口 </a>注意:使用的“#”是虚连接。
方法四:用一个按钮调用:
<input type="button" οnclick="openwin()" value="打开窗口">
【4、同时弹出2个窗口】
对源代码稍微改动一下:
<script LANGUAGE="JavaScript">
<!--
function openwin() {
window.open ("page.html", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
}
//-->
</script>
为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。
OK?
【5、主窗口打开文件1.htm,同时弹出小窗口page.html】
如下代码加入主窗口<head>区:
<script language="javascript">
//写成一行
OpenWindow.document.write("<TITLE>例子</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")
OpenWindow.document.write("<h1>Hello!</h1>")
OpenWindow.document.write("New window opened!")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()
}
</SCRIPT>
</head>
<body>
打开一个窗口
<input type="button" οnclick="openwin()" value="打开窗口">
</body>
</html>
看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。
【6、终极应用--弹出的窗口之Cookie控制】
回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页), 那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-(
有解决的办法吗?Yes! ;-) Follow me.
我们使用cookie来控制一下就可以了。
首先,将如下代码加入主页面HTML的<HEAD>区:
<script>
function openwin(){
window.open("page.html","","width=200,height=200")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openwin()
document.cookie="popped=yes"
}
}
</script>
然后,用<body οnlοad="loadpopup()">(注意不是openwin而是loadpop啊!) 替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once!
转载于:https://www.cnblogs.com/shuyu/archive/2010/04/02/1702786.html
windo.open 全攻略相关推荐
- 组策略分发软件全攻略
组策略分发软件全攻略 在规模比较大的网络环境里面,为了对服务器和客户机上的软件.系统补丁进行集中统一的管理,我们可能会用到SUS.WSUS.SMS等.SUS.WSUS管理系统更新,不在本文讨论,请参考 ...
- 根据16S预测微生物群落功能最全攻略
文章原文转载自"宏基因组"公众号,由于微信图片不支持外部网站访问.请点击原文链接跳转公众号阅读. 根据16S预测微生物群落功能最全攻略
- chrome 插件开发各种功能demo_Chrome 插件开发全攻略
Chrome 浏览器相信大家都用得比较多,有很多的优点,比如简洁.强大的开发者工具等,但是更让大家映像深刻的是有各种各样有趣.有用的插件,今天要给大家推荐的开源项目是 Chrome 插件开发全攻略,你 ...
- MySQL与优化有关的命令_MySQL优化全攻略-相关数据库命令
MySQL优化全攻略-相关数据库命令 更新时间:2006年11月25日 00:00:00 作者: 接下来我们要讨论的是数据库性能优化的另一方面,即运用数据库服务器内建的工具辅助性能分析和优化. ▲ ...
- Retrofit全攻略——进阶篇
最近事比较多,距离上次写文章已经过去了一个月了.上一篇文章Retrofit全攻略--基础篇 介绍了Retrofit的基础用法,这篇文章介绍点进阶的用法. 打印网络日志 在开发阶段,为了方便调试,我们需 ...
- nagios全攻略(三)----使用插件监控更多信息
三. 使用命令和插件监控更多信息<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office&quo ...
- [RHEL5企业级Linux服务攻略]--第3季 DHCP服务全攻略
1 DHCP原理 1.1 DHCP概述 DHCP(Dynamic Host Configuration Protocal)就是动态主机配置协议哈,可以自动配置主机的IP地址.子网掩码.网关及DNS等 ...
- EqualLogic全攻略视频[(一)介绍]
制片人: 戴尔中国大客户部高级市场经理 Andy Peng 彭宇恒 演讲者: 戴尔亚太区存储技术总监 Alvin Kho 许良谋 戴尔中国高级系统工程师 English Li 李英文 EqualLog ...
- c盘怎么扩容_给电脑减压,C盘清理全攻略!
本文共1839字,预计阅读时间6分钟相信很多小伙伴发现,电脑没用一段时间就会速度变得很慢,轻则影响学习工作效率,重则电脑卡死,做到一半的工作前功尽弃,让人分分钟想要砸电脑,那这个时候呢,你就要检查一下 ...
最新文章
- linux禅道8.1安装教程,Ubuntu 18.4安装禅道9.8.3 linux 64位一键版本
- WM8962 HPOUT 信号强度 时间周期
- 5.MySQL Cluster(MySQL集群)
- ORACLE纯SQL实现多行合并一行
- shiro基于url权限认证时doGetAuthorizationInfo方法不运行的解决办法
- 0005-Longest Palindromic Substring(最长回文子串)
- java二级缓存技术_Java二级缓存
- Java无所不能的反射在Android中需要熟练的知识
- mysql 配置 explicit_defaults_for_timestamp
- ES(Elasticsearch)更改字段索引
- 网站转换APP源代码 WebAPP源代码 网站生成APP源代码 Flutter项目 带控制端
- 90后首次购房心路历程
- 欧几里德算法(Euclidean algorithm)
- 那些年,我们关注过的放大电路设计要点
- B.FRiEND MK7机械式电竞键盘-Cherry樱桃轴搭配纯净白光!
- 视频转码编辑工具:Compressor for Mac(4.5.4)
- PCB治具设计、制造和管理
- 整理了643个计算机夏令营预推免招生项目,特点如下:
- 导航栏实现页面的动态切换
- JavaScript Promise返回值详解
热门文章
- 美图每天亿级消息存储演进——从Redis到Titan,完美解决扩容问题
- AutoBench+Httperf的安装、测试
- sql 不等于空_SQL的简单查询
- 云计算灾备:灾备通识
- 数据中心如何建设,数据中心机房维护方法详解!
- 广东省工业和信息化厅关于印发广东省 5G 基站和数据中心总体布局规划 (2021-2025 年)的通知...
- 机房空调清理杨柳絮操作
- azure mysql 配置,微软Azure云MySQL in-app 的配置,简化PHP内容管理系统配置
- arraylist转int数组_五千字的数组拓展,面试官对我竖起大拇指喊停
- ML之RF:利用Js语言设计随机森林算法【DT之CART算法(gain index)】并应用随机森林算法