zoukankan      html  css  js  c++  java
  • js_关于BOM的窗口移动以及窗口大小调整的相关问题

    窗口移动

    window.moveTo()与window.moveBy()方法。

    <body>
        <input type="button" value="打开新窗口" onclick="openWin()">
        <input type="button" value="移动到左上角" onclick="moveT()">
        <input type="button" value="右下分别移动100像素" onclick="moveB()">
        <script>
            var myWindow;
            function openWin(){
                myWindow=window.open("","","width=500,height=500,location=0");
                myWindow.document.write("<p>这是一个新的页面</p>");
                myWindow.focus();
            }
            function moveT(){
                window.moveTo(0,0);
                myWindow.moveTo(0,0);
            }
            function moveB(){
                window.moveBy(100,100);
                //向右移动100px。向下移动100px
                myWindow.moveBy(100,100);
            }
        </script>
    </body>
    

    以上代码虽然各个浏览器都支持,但是适用性不同。
    IEEDGE:允许对当前页面进行调整。
    Chrome、Opera、FF:不允许对当前页面进行位置调整。只允许对window.open出来的页面进行调整。实验证明其试图调整当前页面位置会被无视,不会报错。

    窗口大小调整

    window.resizeTo()和window.resizeBy()方法。

    <body>
        <input type="button" value="打开新窗口" onclick="openWin()">
        <input type="button" value="移动到左上角" onclick="moveT()">
        <input type="button" value="右下分别移动100像素" onclick="moveB()">
        <input type="button" value="页面调整为100x100" onclick="resizeT()">
        <input type="button" value="页面高度新增100,宽度新增50" onclick="resizeB()">
        <script>
            var myWindow;
            function openWin(){
                myWindow=window.open("","","width=500,height=500,location=0");
                myWindow.document.write("<p>这是一个新的页面</p>");
                myWindow.focus();
            }
            function moveT(){
                window.moveTo(0,0);
                myWindow.moveTo(0,0);
            }
            function moveB(){
                window.moveBy(100,100);
                myWindow.moveBy(100,100);
            }
            function resizeT(){
                window.resizeTo(100,100);
                //页面调整到100x100
                myWindow.resizeTo(100,100);
            }
            function resizeB(){
                window.resizeBy(100,50);
                //页面高度新增100,宽度新增50
                myWindow.resizeBy(100,50);
            }
        </script>
    </body>
    

    这个方法经测试:
    IE11/EDGE:允许对当前页面进行大小调整。
    chrome、Opera、FF:不允许对当前页面进行大小调整。但允许对window.open出来的页面进行大小调整。

  • 相关阅读:
    管理信息系统的开发与管理
    加载静态文件,父模板的继承和扩展(2017.11.3)
    开始Flask项目(2017.11.3)
    夜间模式的开启与关闭,父模板的制作(2017.11.2)
    完成登录与注册页面的前端(2017.10.31)
    JavaScript 基础,登录验证(2017.10.24)
    CSS实例:图片导航块(2017.10.20)
    导航,头部,CSS基础 (10.18)
    ASCII表
    RSA加密算法
  • 原文地址:https://www.cnblogs.com/Syinho/p/12382339.html
Copyright © 2011-2022 走看看