Window.open大全

buliangniu

浏览: 91796 次
性别:
来自: 北京

最近访客更多访客>>

zhengshujunyx

etracer

明少

lijunxian0114

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JavaScript CSS HTML 浏览器

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

<SCRIPT LANGUAGE="javascript"> 
　　<!-- 

　　window.open ('page.html')  //打开一个窗口

　　--> 
</SCRIPT>

javascripts代码应该放在两个<SCRIPT>...<>SCRIPT>之间，是为了解决一些低版本浏览器的兼容性。

运行结果：打开一个窗口

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=n o, status=no')

　　--> 
</SCRIPT>

　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为允许；

3、最大化弹出窗口

<html>
<head>
    <title>window.open最大化 </title>
</head>
<body>

    <script language="javascript">
　　<!-- 
　　    function openTest()
        {
            var ww = window.screen.availwidth - 10;    //可用宽度减去10
            var hh = window.screen.availheight - 60;   //可用高度减去60
            window.open("test.htm", "", "toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=yes,status=yes,top=0,left=0,width=" + ww + ",height=" + hh);

        }
　　-->
    </script>

    <input id="Button" type="button" value="最大化新窗口" onclick="openTest()" />
</body>
</html>

4、弹出窗口并居中

<html>
<head>
    <title>window.open居中 </title>
</head>
<body>

    <script language="javascript">
　　<!-- 
　　        function openTest(url, name, iWidth, iHeight)
        {
            var url;
            //转向网页的地址;

            var name;
            //网页名称，可为空;

            var iWidth;
            //弹出窗口的宽度;

            var iHeight;
            //弹出窗口的高度;

            var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
            //获得窗口的垂直位置;

            var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
            //获得窗口的水平位置;
            
            window.open(url, name, 'height=' + iHeight + ',,innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');
        }
　　-->
    </script>

    <input id="Button" type="button" value="居中新窗口" onclick="openTest('test.htm','居中新窗口',400,400)" />
</body>
</html>

5、弹出子窗口并返回值

<html>
<head>
    <title>window.open返回值父窗口</title>
    <style type="text/css">
        #father
        {
            width: 500px;
            height: 100px;
        }
    </style>

    <script type="text/javascript">
        function openTest()
        {
            window.open('test.htm')
        }
    </script>

</head>
<body>
    <input id="father" type="text" /><br />
    <br />
    <input id="Button" type="button" value="打开子窗口" onclick="openTest()" /><br />
</body>
</html>

<html>
<head>
    <title>window.open返回值子窗口</title>
    <style type="text/css">
        #Text1
        {
            height: 100px;
            width: 500px;
        }
    </style>
    <script type="text/javascript">
        function openerTest()
        {
            window.opener.document.getElementById("father").value = Text1.value;
            window.close()
    }
    </script>
</head>
<body>

    <p>
        <input id="Text1" type="text" /><br />
        <br />
        <input id="Button" type="button" value="关闭并返回值" onclick="openerTest()" /></p>

</body>
</html>

0
顶

0
踩

分享到：

更改一个链接的文本、URL以及target | 正则表达式全部符号解释

2009-12-04 22:53
浏览 1635
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论