Asp教程

通过asp实例结合结合ACCESS,MSSQL来更好的深入Asp学习 - 爬坡者

« 类似QQ消息的弹出窗口一些经典的常用ASP代码[经典简单] »

[转]网页弹出窗口讲解全接触

经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易,只要往该页面的HTML里加入几段Javascript代码即可实现。下面俺就带您剖析它的奥秘。     
    
   【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="#"    onClick="openwin()">打开一个窗口    </a>注意:使用的“#”是虚连接。     
   方法四:用一个按钮调用:     
   <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)不要相同,或者干脆全部为空。     
    
   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"    onclick="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    onload="loadpopup()">(注意不是openwin而是loadpop啊!)    替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once!

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Spirit Build 80710

Copyright 2007-2008 papozhe.com [asp教程] All Rights Reserved.
浙ICP备07030537号
免责申明:所有文章除特别声明,均来自网上,主要为学习用!内容仅供参考,版权归原作者。如侵犯您利益,请来信告知.
Email:papozhe$Gmail.com QQ:76336503