Window.open大全

最新推荐文章于 2017-08-10 21:23:11 发布

buliangniu

最新推荐文章于 2017-08-10 21:23:11 发布

阅读量94

点赞数

分类专栏： JavaScript 文章标签： JavaScript CSS HTML 浏览器 ViewUI

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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="最大化新窗口" οnclick="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="居中新窗口" οnclick="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="打开子窗口" οnclick="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="关闭并返回值" οnclick="openerTest()" /></p>

</body>
</html>

buliangniu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Window.open大全

1、最基本的弹出窗口代码 &lt;SCRIPT LANGUAGE="javascript"&gt; 　　&lt;!-- 　　window.open ('page.html') //打开一个窗口　　--&gt; &lt;/SCRIPT&gt; javascripts代码应该放在两个&lt;SCRIPT&gt;...&lt;&gt;SCR...
复制链接

扫一扫