zoukankan      html  css  js  c++  java
  • 用javascript实现控制打开网页窗口的大小 和HTML如何关闭窗口的技巧大全

    用javascript实现控制打开网页窗口的大小

    和HTML如何关闭窗口的技巧大全

        打开窗口即最大化
    <script language="JavaScript">
    <!-- Begin
    self.moveTo(0,0)
    self.resizeTo(screen.availWidth,screen.availHeight)
    // End -->
    </script>

    ----------------------------------------------------------------
    window.open方法
    <a href="#"
     onclick="javascript:window.open('文件路径/文件名','newwindow',
     'toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,
     width=400,height=300');">文字或图片</a>

    top=0,left=0,是打开网页的坐标定位
    width=400,height=300' 是打开的网页的大小

     


    我的窗口,我控制.....

    【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 onload=openwin()>
    ..任意的页面内容...
    </body>
    </html>

      这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。 
    怎么调用呢?


     方法一:<body onload=openwin()> 浏览器读页面时弹出窗口;
     方法二:<body onunload=openwin()> 浏览器离开页面时弹出窗口;
     方法三:用一个连接调用:

    <a href=注意:使用的“ 方法四:用一个按钮调用:
    <input type=button onclick=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)不要相同,或者干脆全部为空。

     

     【5、主窗口打开文件1.htm,同时弹出小窗口page.html】

      如下代码加入主窗口<head>区:

    <script language=javascript>
    <!--
    function openwin() {
    window.open(page.html,,width=200,height=200)
    }
    //-->
    </script>
    加入<body>区:
    <a href=1.htm onclick=openwin()>open</a>即可。

      【6、弹出的窗口之定时关闭控制】

      下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中,可不是主页面中,否则...),让它10秒后自动关闭是不是更酷了?


      首先,将如下代码加入page.html文件的<head>区:
    <script language=javascript>

    function closeit() {

    setTimeout(self.close(),10000) //毫秒

    }

    </script>
     然后,再用<body onload=closeit()> 这一句话代替page.html中原有的<BODY>

    这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。)

      【7、在弹出窗口中加上一个关闭按钮】

    <FORM>
    <INPUT TYPE='BUTTON' value='关闭' onClick='window.close()'>
    </FORM>
    呵呵,现在更加完美了!

      【8、内包含的弹出窗口-一个页面两个窗口】

      上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。
      通过下面的例子,你可以在一个页面内完成上面的效果。

    <html>
    <head>
    <SCRIPT LANGUAGE=javascript>
    function openwin()
    {
    OpenWindow=window.open(, newwin, height=250,

    width=250,toolbar=no,scrollbars=+scroll+,menubar=no);
    //写成一行
    OpenWindow.document.write(<TITLE>例子</TITLE>)
    OpenWindow.document.write(<BODY BGCOLOR=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>
    <a href=<input type=button onclick=openwin() value=打开窗口>
    </body>
    </html>

      看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束哦。


     【9、终极应用--弹出的窗口之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 (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>

      然后,用<body onload=loadpopup()>(注意不是openwin而是loadpop啊!)替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once!

      写到这里弹出窗口的制作和应用技巧基本上算是完成了,俺也累坏了,一口气说了这么多,希望对正在制作网页的朋友有所帮助俺就非常欣慰了。

      需要注意的是,JS脚本中的的大小写最好前后保持一致。


      1.弹启一个全屏窗口

    <html>
    <body onload=window.open

    ('http://www.pconline.com.cn','example01','fullscreen');>;
    <b>www.e3i5.com</b>
    </body>
    </html>

      2.弹启一个被F11化后的窗口

    <html>
    <body onload=window.open

    (''http://www.pconline.com.cn','example02','channelmode');>;
    <b>www.e3i5.com</b>
    </body>
    </html>

      3.弹启一个带有收藏链接工具栏的窗口

    <html>
    <body onload=window.open

    ('http://www.pconline.com.cn','example03','width=400,height=300,directo

    ries');>
    <b>www.e3i5.com</b>
    </body>
    </html>

      4.网页对话框

    <html>
    <SCRIPT LANGUAGE=javascript>
    <!--
    showModalDialog

    ('http://www.pconline.com.cn','example04','dialogWidth:400px;dialogHeig

    ht:300px;
    dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;stat

    us:yes')
    //-->
    </SCRIPT>
    <b>www.e3i5.com</b>
    </body>
    </html>

    <html>
    <SCRIPT LANGUAGE=javascript>
    <!--
    showModelessDialog

    ('http://www.pconline.com.cn','example05','dialogWidth:400px;dialogHeig

    ht:300px;
    dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;stat

    us:yes')
    //-->
    </SCRIPT>
    <b> target=_blank>http://www.pconline.com.cn<;/b>
    </body>
    </html>

      showModalDialog()或是showModelessDialog() 来调用网页对话框,至于

    showModalDialog()与showModelessDialog()的区别,在于showModalDialog()打开的窗口(简称模式窗口),置在父窗口上,必须关闭才能访问父窗口(建议尽量少用,以免招人反感);showModelessDialog()(简称无模式窗口),打开后不必关闭也可访问父窗口打开的窗口。

    dialogHeight: iHeight 设置对话框窗口的高度。
    dialogWidth: iWidth 设置对话框窗口的宽度。   
    dialogLeft: iXPos 设置对话框窗口相对于桌面左上角的left位置。
    dialogTop: iYPos 设置对话框窗口相对于桌面左上角的top位置。
    center: {yes | no | 1 | 0 } 指定是否将对话框在桌面上居中,默认值是“yes
    ”。
    help: {yes | no | 1 | 0 } 指定对话框窗口中是否显示上下文敏感的帮助图标
    。默认值是“yes”。   
    resizable: {yes | no | 1 | 0 } 指定是否对话框窗口大小可变。默认值是“no
    ”。
    status: {yes | no | 1 | 0 } 指定对话框窗口是否显示状态栏。对于非模式对
    话框窗口,默认值是“yes”;对于模式对话框窗口,默认值是 “no”。

     

    window.close关闭窗口,不弹出系统提示,直接关闭
    ===================================================
    当我们用这种方法:Response.Write("<script>window.close()</script>")
    总是提示什么:你查看的网页试图关闭的提示
    如何去掉提示,直接关闭窗体?
    可以用以下方法:
    Response.Write("<script>window.opener=null;window.close()</script>")
    只有ie6才支持.
    opener只要设为任何值都可以,不会出现提示


    如果是通过子窗体关闭父窗体时怎么做呢
    子窗体(弹出窗体):
    同理可得:
    Response.Write

    ("<script>window.opener.top.opener=null;window.opener.top.close()

    </script>")

    ============================================================
    最简单的无提示关闭窗口代码(直接复制便可用):

    <input type="button" onClick="window.opener = 'xxx';window.close();"
    value="IE6最简单的无提示关闭窗口" >
    ==============================================================
    关闭窗口有提示:
    <input type="button" onClick="javascript:window.close();" value="关闭">
    <a href="javascript:window.close();">关闭</a>
    ==============================================================
    自动关闭窗口代码:
    <script language="javascript">
    <!--
    function clock(){i=i-1
    document.title="本窗口将在"+i+"秒后自动关闭!"
    if(i>0)setTimeout("clock();",1000);
    else self.close();}
    var i=20
    clock();
    //-->
    </script>
    在网页源代码中加入下面的代码,则该窗口将在20秒钟之后自动关闭!这与跳出

    式小窗口配合使用是再好不过啦!代码中“i=20”表示关闭的延迟时间为20秒,

    可任意修改。
    ==================================================================
    无提示操作,自动关闭窗口
    <script>setTimeout("window.opener = 'xxx';window.close

    ();;",1000);</script>
    ==================================================================
    怎么隐藏IE的菜单栏,工具栏和地址栏:
    <script language="JavaScript">
    <!--
    function MM_openBrWindow(theURL,winName,features) { //v2.0
       window.open(theURL,winName,features);
    }
    //-->
    </script>

    <a href="javascript:;" onClick="MM_openBrWindow

    ('s.html','yy','width=300,height=300')">连接该页的地址</a>
    ===================================================================
    设置本窗口大小且定时自动无提示关闭:

    <BODY onload="top.resizeTo(300,300);">
    <div align=center>成功插入数据!<br><br>
    </div>
    <script>setTimeout("window.opener = 'xxx';window.close

    ();;",2000);</script>
    </BODY>
    ====================================================================
    点击连接弹出一特定(隐藏IE的菜单栏,工具栏和地址栏)窗口:

    <A HREF="s.html" onClick="javascript:window.open

    (this.href,'_blank','toolbar=no,location=no,directories=no,status=no,me

    nubar=no,scrollbars=yes,resizable=no,top=0,left=0,width=790,height=545'

    );return false">新建窗口</a>
    =====================================================================
    详细介绍设置窗口大小,IE的菜单栏,工具栏和地址栏:

    设置窗口大小可以用resizeTo(),resizeBy()函数把这段代码加到你网页源代码的<head></head>之间。
    〈script language=javascript〉resizeTo(x,y)〈/script〉或者把其中的

    resizeBy()
    x,y是你想要的窗口的长宽,dx,dy是你想要窗口长宽增加的值。(dx,dy)是负数
    的时候就缩小了。
    隐藏工具栏,菜单栏的话必须打开新窗口才行(下面的代码对IE而言,不同浏览
    器可能格式有所区别,open后面不要回车换行!)
    window.open("url","window_name","menubarbar=no,toolbar=no"></script〉
    〈script> url是你要在新窗口中显示的网页的地址,window_name是窗口的名字
    ,做链接的时候可能用到,不用的话可以用""代替,menubarbar(菜单栏)

    toolbar (工具栏)locationbar(地址栏) status(状态栏) personalbar

    resizabla(是否允许调整大小) fullsreen(是否全屏)这些参数你可以按照同样的格式使用

    代码如果运行出错,就检查一下是否有多余的空格,还有那个“〈”“〉”,有一次我直接粘贴网页上的代码就好出过“〈”“〉”问题。

    window.showModalDialog以及window.open用法简介
    一、window.open()支持环境:

    JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+


    二、基本语法:
    window.open(pageURL,name,parameters)
    其中:
    pageURL 为子窗口路径
    name 为子窗口句柄
    parameters 为窗口参数(各参数用逗号分隔)

    三、示例:

    <SCRIPT>
    <!--
    window.open

    ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,

    menubar=no,scrollba

    rs=no, resizable=no,location=no, status=no')
    //写成一行
    -->
    </SCRIPT>
    脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏
    顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。请对照。
    上例中涉及的为常用的几个参数,除此以外还有很多其他参数,请见四。

    四、各项参数


    其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。
    参数 | 取值范围 | 说明
    | |
    alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
    alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
    depended | yes/no | 是否和父窗口同时关闭
    directories | yes/no | Nav2和3的目录栏是否可见
    height | pixel value | 窗口高度
    hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键
    innerHeight | pixel value | 窗口中文档的像素高度
    innerWidth | pixel value | 窗口中文档的像素宽度
    location | yes/no | 位置栏是否可见
    menubar | yes/no | 菜单栏是否可见
    outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
    outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
    resizable | yes/no | 窗口大小是否可调整
    screenX | pixel value | 窗口距屏幕左边界的像素长度
    screenY | pixel value | 窗口距屏幕上边界的像素长度
    scrollbars | yes/no | 窗口是否可有滚动栏
    titlebar | yes/no | 窗口题目栏是否可见
    toolbar | yes/no | 窗口工具栏是否可见
    Width | pixel value | 窗口的像素宽度
    z-look | yes/no | 窗口被激活后是否浮在其它窗口之上
    window.showModalDialog使用手册


    基本介绍:
    showModalDialog() (IE 4+ 支持)
    showModelessDialog() (IE 5+ 支持)
    window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。
    window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

    使用方法:
    vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
    vReturnValue = window.showModelessDialog(sURL [, vArguments]

    [,sFeatures])

    参数说明:
    sURL--
    必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
    vArguments--
    可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数
    等。对话框通过window.dialogArguments来取得传递进来的参数。
    sFeatures--可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个
    几个,用分号“;”隔开。
    1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和

    dialogWidth 默

    认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框

    时,用px做单位。
    2.dialogWidth: 对话框宽度。
    3.dialogLeft: 离屏幕左的距离。
    4.dialogTop: 离屏幕上的距离。
    5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度
    和宽度。
    6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
    7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no


    8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[

    Modeless]或no[Modal]。
    9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默
    认为yes。
    下面几个属性是用在HTA中的,在一般的网页中一般不使用。
    10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话
    框是否隐藏。

    默认为no。
    11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
    12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

    参数传递
    1.要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字
    串类型,最大为4096个字符。也可以传递对象,例如:
    -------------------------------
    parent.htm
    <script>
    var obj = new Object();
    obj.name="51js";
    window.showModalDialog

    ("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
    </script>
    modal.htm
    <script>
    var obj = window.dialogArguments
    alert("您传递的参数为:" + obj.name)
    </script>
    -------------------------------
    2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对
    象。

    例如:
    ------------------------------
    parent.htm
    <script>
    str =window.showModalDialog

    ("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
    alert(str);
    </script>
    modal.htm
    <script>
    window.returnValue="http//blog.csdn.net/marsmao";
    </script>

  • 相关阅读:
    「UOJ#117」 欧拉回路
    「LuoguP1341」 无序字母对(欧拉回路
    「NOIP2002」「Codevs1099」 字串变换(BFS
    「IOI1998」「LuoguP4342」Polygon(区间dp
    「LuoguP2420」 让我们异或吧(树上前缀和
    「USACO13MAR」「LuoguP3080」 牛跑The Cow Run (区间dp
    「LuoguP1220」 关路灯(区间dp
    「CQOI2007」「BZOJ1260」涂色paint (区间dp
    「LuoguP1430」 序列取数(区间dp
    「USACO16OPEN」「LuoguP3147」262144(区间dp
  • 原文地址:https://www.cnblogs.com/lh123/p/3863565.html
Copyright © 2011-2022 走看看