其他分享
首页 > 其他分享> > js_关于BOM的窗口移动以及窗口大小调整的相关问题

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>

以上代码虽然各个浏览器都支持,但是适用性不同。
IE\EDGE:允许对当前页面进行调整。
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出来的页面进行大小调整。

标签:function,moveTo,窗口,js,window,BOM,100,myWindow,页面
来源: https://www.cnblogs.com/Syinho/p/12382339.html