`
haihongxingzi
  • 浏览: 153180 次
  • 性别: Icon_minigender_1
  • 来自: 瑟孔达
社区版块
存档分类
最新评论

进入页面弹出窗口

阅读更多
  1、最基本的弹出窗口代码  
   
  其实代码非常简单:  
   
  〈SCRIPT   LANGUAGE="javascript"〉  
    〈!--  
    window.open   ("page.html")  
    --〉  
    〈/SCRIPT〉  
   
  因为这是一段Javascript代码,所以它们应该放在〈SCRIPT   LANGUAGE="javascript"〉之间。   〈!--   和   --〉是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。  
   
  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  
   
  如下代码加入主窗口区:  
   
  〈script   language="javascript"〉  
    〈!--  
    function   openwin()   {  
    window.open("page.html","","width=200,height=200")  
    }  
    //--〉  
    〈/script〉  
    加入〈body〉区:  
    〈a   href="1.htm"   onclick="openwin()"〉open〈/a〉即可  
   
  〈b>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=#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〉  
    〈a   href="#"   onclick="openwin()"〉打开一个窗口〈/a〉  
    〈input   type="button"   onclick="openwin()"   value="打开窗口"〉  
    〈/body〉  
    〈/html〉  
   
  看看OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。  
   
  9、终极应用--弹出的窗口之Cookie控制  
   
  回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-(    
   
  有解决的办法吗?当然有!我们使用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〉这一句即可
分享到:
评论

相关推荐

    谷歌浏览器弹出窗口拦截取消的设置操作说明(1).docx

    ### 谷歌浏览器弹出窗口拦截取消的设置操作说明 #### 一、引言 在日常使用浏览器的过程中,我们可能会遇到一些网站自动弹出广告或者其他通知窗口的情况。虽然这些弹窗有时候会提供有用的信息或者服务,但很多时候...

    js页面动态加载弹出窗口

    在JavaScript(JS)编程中,页面动态加载和弹出窗口是常见的交互设计技术,它们能够提升用户体验并实现灵活的信息展示。下面将详细讲解这两个概念及其结合应用。 **1. JS动态加载** 动态加载,顾名思义,是在网页...

    如何设置浏览器允许弹出窗口

    为了确保网页能够正确显示,我们需要学会如何设置浏览器允许弹出窗口。以下是一些常见浏览器及第三方软件的解决办法。 1. **Windows XP SP 2 允许弹出窗口解决方法** - 右键点击“我的电脑”图标,选择“属性”,...

    关闭弹出窗口拦截功能.rar

    弹出窗口拦截是许多用户为了防止不必要的广告或者恶意弹窗而启用的一项功能,但有时它可能阻止了某些重要的网页元素或者应用的通知,因此需要适时关闭或调整。 在教育环境中,这个话题尤其重要,因为教师可能需要...

    java实现弹出窗口特效

    在这个"java实现弹出窗口特效"的项目中,我们主要探讨的是如何使用Java的Swing库来创建具有吸引力的用户界面特效。Swing是Java Foundation Classes (JFC)的一部分,提供了丰富的组件和工具来构建美观的图形用户界面...

    弹出窗口_iframe_最终版本

    在IT领域,弹出窗口和iframe是两种常见的网页设计技术,它们在构建用户交互界面时起着关键作用。本文将详细探讨"弹出窗口_iframe_最终版本"的主题,包括如何在不同浏览器环境下实现特定效果。 首先,让我们理解弹出...

    web前端打开弹出窗口在扩展屏幕显示(presentation谷歌版本)

    "web前端打开弹出窗口在扩展屏幕显示(presentation谷歌版本)"这一技术主题,主要涉及使用谷歌浏览器支持的presentation API来实现这样的功能。这个API是HTML5的一个特性,允许网页内容在连接的外部显示器或投影...

    xp点击下拉列表弹出阻止窗口提示无法选择

    然而,在某些情况下,这个功能可能会误判,将合法的网页元素,如下拉列表,识别为弹出窗口,从而阻止用户正常使用。 解决这个问题的第一步是检查IE8的弹出窗口阻止程序设置。用户需要进入浏览器的“工具”菜单,...

    弹出窗口代码大全.txt

    在网页开发中,弹出窗口是一种常见的交互方式,它可以用于展示广告、提供额外信息或引导用户进行特定操作等。根据给定文件“弹出窗口代码大全.txt”的描述,本文将详细介绍如何利用不同的方法创建多样化的弹出窗口。...

    弹出窗口总汇集

    根据给定的文件信息,我们可以总结出关于弹出窗口在网页设计中的应用及技术细节的知识点,这包括了使用JavaScript创建各种类型的弹出窗口的方法,以及如何利用HTML Application(HTA)来增强网页功能。 ### 弹出...

    鼠标滑过图片弹出窗口

    在网页设计和用户体验优化中,"鼠标滑过图片弹出窗口"是一种常见的交互技术,它为用户提供了一种方便快捷的方式来预览或获取更多关于图片的信息,而无需离开当前页面或点击进入新页面。这种功能常见于电子商务网站的...

    漂亮的js弹出窗口(多用于图片)

    JavaScript弹出窗口通常是通过`window.open()`函数来实现的,它可以创建一个新的浏览器窗口或者在已存在的窗口中打开新的页面。但是,这种原生的弹出方式往往过于简单,无法满足复杂的交互需求,比如图片预览、滑动...

    避免realplayer弹出窗口

    本篇文章将深入探讨如何避免RealPlayer的弹出窗口问题,并介绍压缩包中的两个文件——`rpnopop.exe`和`popup.rm`。 首先,`rpnopop.exe`可能是一个第三方工具或RealPlayer的插件,设计用于阻止或管理RealPlayer的...

    JS特效(弹出窗口、浏览图片等)

    JavaScript(简称JS)是一种轻量级的编程语言,主要...综上所述,JS特效在网页开发中具有广泛的应用,弹出窗口和图片浏览只是其中的两个例子。通过熟练掌握这些技术,开发者能够为用户提供更加生动、互动的网页体验。

    Win10设置IE浏览器禁止网站弹出窗口的方法.docx

    勾选后,你可以继续浏览网页,而大部分弹出窗口会被阻止在后台,不会打扰你的视线。 然而,有些情况下,你可能希望特定的、可信的网站能够弹出窗口,比如登录验证或某些服务的通知。为此,IE提供了“设置”功能。在...

    如何阻止弹出窗口浏览器设置攻略.docx

    5. **清除启动项和修复注册表**:如果电脑开机自动打开IE并显示不相关网站,或者浏览网页时频繁弹出窗口,这可能是恶意网站修改了你的启动项和注册表。可以使用专门的修复软件,如“IE修复专家”或“注册表IE修复器...

    电脑开机经常弹出多个网页窗口该怎么办?.docx

    2. 在【允许的网站地址】界面,输入需要弹出窗口的网站地址,点击【添加】按钮,添加成功后,电脑开机时将不会弹出该网站的窗口。 解决方法三:使用电脑安全软件 1. 打开电脑安全软件,进入主界面,点击【查杀修复...

    Dreamweaver网页怎么添加弹出窗口信息?

    在使用Dreamweaver这款网页设计软件时,添加弹出窗口是一种常见的交互设计方式,可以帮助网站向访问者展示重要信息、欢迎语或是广告等。通过在网页中添加弹窗,能够有效吸引访问者的注意力,并且增加用户体验。以下...

    6种浮动提示框,弹出窗口,JS代码

    在IT行业中,用户界面设计是至关重要的一环,而浮动提示框和弹出窗口则是提升用户体验的有效工具。本文将深入探讨标题“6种浮动提示框,弹出窗口,JS代码”所涉及的知识点,并结合描述中提到的功能特性进行详细阐述...

    msn方式弹出窗口提示的脚本代码效果图

    本资源“msn方式弹出窗口提示的脚本代码效果图”显然涉及到利用JavaScript实现类似MSN即时通讯软件的弹窗提示功能。这种功能常见于网页中的通知、提醒或者消息对话框,能够吸引用户的注意力并提供信息。 首先,我们...

Global site tag (gtag.js) - Google Analytics