• 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出来的页面进行大小调整。

  • 相关阅读:
    MVC模式在Java Web应用程序中的实例分析
    设计模式
    实现xxxxxxx系统六大质量属性战术
    阅读了《大型网站技术架构:核心原理与案例分析》,分析XX系统如何增加相应的功能,提高系统的可用性和易用性
    淘宝系统质量属性分析
    《架构漫谈》读后感
    软件架构师架构设计过程是什么?
    《架构之美》阅读笔记06
    《架构之美》阅读笔记05
    《架构之美》阅读笔记04
  • 原文地址:https://www.cnblogs.com/Syinho/p/12382339.html
Copyright © 2020-2023  润新知