zoukankan      html  css  js  c++  java
  • JS弹出窗口控制

    一、弹出窗口控制

    主要使用JS中的window对象,在html打开窗口(类似于打广告)

    写在head后,body前

    语法:

    WindowVar=window.open(url,windowname[,location]);

    说明:

    WindowVar:当前打开窗口的句柄。如果open()方法成功,则WindowVar的值为一个window对象的句柄,否则WindowVar的值是一个空值。

    url:目标窗口的URL。如果URL是一个空字符串,则浏览器将打开一个空白窗口,允许用write()方法创建动态HTML

    windowname:window对象的名称

    location:对窗口属性进行设置。

    实例:

    <script language="javascript">
    <!--
    window.open("new.html","new","height=141,width=693,top=10,left=20");
    -->
    </script>

    下面介绍一下window对象的常用方法:

    alert()       弹出一个警告对话框

    confirm()     在确认对话框中显示指定的字符串

    prompt()     弹出一个提示对话框

    close()     关闭被引用的窗口

    focus()     将被引用的窗口放在所有打开窗口的前面

    open()     打开浏览器窗口并且显示由URL或名字引用的文档,并设置创建窗口的属性

    resizeTo(x,y)     设置窗口的大小

    resizeBy(offsetx,offsety)     按照指定的位移量设置窗口的大小

    二、定时打开窗口

    语法:

    setTimeout(function,milliseconds)

    说明:

    function:要调用的JS自定义函数名称

    milliseconds:设置超时时间(以ms为单位)  1000ms=1s

    功能:超过超时时间后,调用函数。此值可以用clearTimeout()函数清除

    注意:setTimeout()方法在超时时间后只调用一次函数,而setInterval()方法是按一定时间重复调用指定的函数

    实例:
    <script language="javascript">
    <!--
    function pp(){
    window.open("new.htm","new","height=190,width=775,top=30,left=30");
    }
    setTimeout("pp()",5000);
    -->
    </script>

    三、通过按钮创建窗口

    (1)在页面中添加一个按钮,并在onClick(单击)事件中调用自定义函数pp(),

    <form name="form1" method="post" action="">
      <input type="button" name="Button" value="创建新窗口" onClick="pp()">
    </form>

    (2)编写用于实现创建新窗口的JS代码。

    <script language="javascript">
    function pp(){
        window.open('trans.htm','','toolbar,menubar,scrollbars,resizable,status,location,directories,copyhistory,height=400,width=500');
    }
    </script>

    四、自动关闭的广告窗口

    当用户浏览网站时,无需关闭弹出的新窗口,在页面运行超过一定的时间之后,该窗口便自动关闭。

    技术要点:本实例主要应用window对象的setTimeout()方法和close()方法实现。window对象的setTimeout()方法用于延迟执行某一操作。

    实现过程:

    (1)在打开广告窗口的页面中添加下面代码实现打开新窗口的功能

    <script language="javascript">
    <!--
        window.open("ad.htm","advertise","width=557,height=176,top=10,left=20");
    -->
    </script>

    (2)在弹出的广告窗口中通过设置window对象的setTimeout()方法,实现窗口的自动关闭

     <body onload="window.setTimeout('window.close()',5000)">

    五、控制弹出窗口剧中显示

    (1)在页面的适当位置添加控制窗口弹出的超级链接

    <map name="Map">
      <area shape="rect" coords="82,17,125,39" href="#"onClick="manage()">
      <area shape="circle" coords="49,28,14">
    </map>

    (2)编写自定义的JS函数manage(),用于弹出新窗口并控制其居中显示

    <script language="javascript">
        function manage()
        {
            var hdc=window.open('Login_M.htm','','width=322,height=206');
            width=screen.width;
            height=screen.height;
            hdc.moveTo((width-322)/2,(height-206)/2);
        }
    </script>

    (3)最后设计弹出窗口页面

    <script language="javascript">
    function mycheck(myform)
    {
    if (myform.Manager.value=="")
    {alert("请输入管理员!");myform.Manager.focus();return;}
    if(myform.PWD.value=="")
    {alert("请输入密码!");myform.PWD.focus();return;}
    myform.submit();
    }
    </script>

    六、弹出的窗口之Cookie控制

    cookie介绍:cookie是网站在访问者硬盘上存储的一些定制的信息段。通过浏览器,网页可以实现对cookie的存储、获取和删除。cookie的目的只有一个,即记录访问者的个体信息。

    cookie规则:浏览器可以存储的总cookie数量不能超过300个,每个服务器不得超过20个(对于整个服务器,而不仅仅是用户自己的网页或网站)。存储容量也限制在每个cookie 4KB,所以不要试图在一个cookie中存储过多的信息。默认情况下,一个cookie可以再整个浏览器的运行期间存在;当用户退出浏览器后,cookie内容也就会消失。为了让一个cookie的持续时间超过一个浏览器周期,可以设置失效日期。

    (1)建立一个预打开的html文件,通常该文件中放置广告或公共信息,

    (2)在需要弹出公告窗口的页面中,判断客户端浏览器中是否存在指定的cookie,如果不存在,则弹出新窗口显示公告信息,否则不弹出公告窗口

    <Script Language="JavaScript">
    function openWindow(){
        window.open("placard.htm","","width=352,height=193")
    }    
    function GetCookie(name){
        var search = name + "=";
        var returnvalue = "";
        var offset,end;
        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 LoadPop(){
        if(GetCookie("pop")==""){
            openWindow();
            var today = new Date()
            var time="Sunday,1-jan-"+today.getYear()+1+" 23:59:59 GMC";
            document.cookie="pop=yes;expires="+time;
        }
    }
    </Script>

    (3)在需要弹出广告窗口页面的onLoad事件中调用弹出广告窗口的函数

    <body onLoad="LoadPop()">

    七、为弹出的窗口加入关闭按钮

    (1)在主页面创建提供“最新服务”超级链接的文件,注意该超级链接需要执行的操作应该是应用window.open()方法打开新窗口

    <a href="#" class="style2" onClick="window.open('thinking.htm','','width=450,height=300')">最新服务</a>

    (2)在最新服务窗口中加入关闭按钮

     <input name="Button" type="button" class="btn_grey" value="关闭" onClick="window.close();">

    八、关闭弹出窗口时刷新父窗口

    关闭弹出窗口时刷新父窗口,也可以说是关闭子窗口时自动刷新父窗口中的信息,即用户通过window对象的open()方法打开一个新窗口(子窗口),当用户在该窗口中进行关闭操作后,关闭子窗口的同时系统会自动刷新父窗口来实现实时更新页面。

    语法:

    window.opener

    window.opener.方法

    window.opener.属性

    功能:返回的是一个窗口对象。 opener属性与打开该窗口的父窗口相联系,当访问子窗口中opener属性时,返回的是父窗口,通过该属性,可以使用父窗口对象中的方法和属性。

    注意:如果窗口不是由其他窗口打开的,在Netscape中这个属性返回null,在IE中返回“未定义”(undefined).undefined在一定程度上等于null。

    reload()方法相当单击浏览器上的“刷新”(IE浏览器)按钮或“Reload”(Netscape浏览器)按钮。

    实现过程:

    (1)在主页面中加入空的超级链接,并在其单击事件中加入JS脚本,实现打开一个指定大小的新窗口

    <a href="#"
    onClick="Javascript:window.open('new.htm','','width=400,height=220')">
    会议记录</a>

    (2)在打开的页面中通过“关闭”按钮的onClick事件调用自定义函数Mycheck(),从而实现关闭弹出窗口时刷新父窗口。

    <input type="submit" name="Submit" value="关闭" onclick="Mycheck();">

    <script language="javascript">
    function Mycheck()
    {
    alert("关闭子窗口!");
    window.opener.location.reload();  //刷新父窗口中的网页
    window.close();//关闭当前窗窗口
    }
    </script>

    九、关闭TE主窗口时,不弹出询问对话框

    在主页面中添加一个用于关闭窗口的超级链接,在该超级链接的onClick事件中添加控制窗口关闭的代码。

    <a href="#" onClick="window.opener=null;window.close();">· 关闭系统</a>

  • 相关阅读:
    k8s之创建etcd集群
    完美解决微信video视频隐藏控件和内联播放问题
    JS工具库封装:Video转换成Canvas
    H5 video 标签 播放事件
    iSlider 如丝般高性能H5全屏滑动组件
    设计模式之 适配器模式
    c++ STL常用算法使用方法
    快速排序与二分查找
    CLOSE_WAIT TIME_WAIT
    erlang erl文件编译的三种脚本
  • 原文地址:https://www.cnblogs.com/ck-999/p/5406914.html
Copyright © 2011-2022 走看看