首页 > 移动平台 > 详细

js_关于BOM的窗口移动以及窗口大小调整的相关问题

时间:2020-03-09 20:01:41      阅读:93      评论:0      收藏:0      [点我收藏+]

窗口移动

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

js_关于BOM的窗口移动以及窗口大小调整的相关问题

原文:https://www.cnblogs.com/Syinho/p/12382339.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!