•   您的位置:知识库首页 >> 电脑知识 >> 网站建设 >> JavaScript
  • 一组常用的弹出窗口用法总结

       发布时间:2007-2-13  责任编辑:  浏览次数:
    一组常用的弹出窗口用法

      以下代码集合常用的弹出窗口用法。

      1、最基本的弹出窗口代码

    <SCRIPT LANGUAGE="javascript"> 
    <!-- 
    window.open ('page.html') 
    --> 
    </SCRIPT>
     

    <SCRIPT LANGUAGE="javascript"> 
    <!-- 
    window.open ('page.html') 
    --> 
    </SCRIPT>
     

     

    <SCRIPT LANGUAGE="javascript"> 
    <!-- 
    window.open ('page.html') 
    --> 
    </SCRIPT>
     

     

    <SCRIPT LANGUAGE="javascript"> 
    <!-- 
    window.open ('page.html') 
    --> 
    </SCRIPT>
     

     

    <SCRIPT LANGUAGE="javascript"> 
    <!-- 
    window.open ('page.html') 
    --> 
    </SCRIPT>
     

     

      代码放在<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"> 
    <!-- 
    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"> 
    <!-- 
    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"> 
    <!-- 
    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"> 
    <!-- 
    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脚本结束

    <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脚本结束

     

    <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脚本结束

     

    <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脚本结束

     

    <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="#" onclick="openwin()">打开一个窗口</a>
      注意:使用的“#”是虚连接。

      方法四:用一个按钮调用:
      <input type="button" onclick="openwin()" value="打开窗口">


    【声明】:
      以上文章或资料除注明为YangChun.org自创或编辑整理外,均为各方收集或网友推荐所得。其中摘录的内容以共享、研究为目的,不存在任何商业考虑。
      目前网站上有些文章未注明作者或出处,甚至标注错误,此类情况出现并非不尊重作者及出处网站,而是因为有些资料来源的不规范。如果有了解作者或出处的原作者或网友,请告知,本网站将立即更正注明,并向作者或出处单位道歉。
      被摘录的对象如有任何异议,请与本站联系,联系邮箱:WebMaster#YangChun.org,本站确认后将立即撤下。谢谢您的支持与理解!
    赞助商




    Google
     
    阳春热线-知识库
    本站郑重声明:所载文章、数据仅供参考,使用前务请核实,风险自负。
    Copyright © 2004-2007  YangChun.org  备案序号:粤ICP备05075203  阳春同乡会主办