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