Question

如何让window.onresize跟随用户的多个窗口调整大小？我有以下Javascript代码打印出窗口大小。它只提供一个更新：

var someStuff = ['<p id="page"></p>'];
document.write(someStuff);
var widthWin = $(window).width();
document.write('<p>'+widthWin+'</p>');

window.onresize = function() {
    var element = document.getElementById("page");
    element.parentNode.removeChild(element);
    document.write(someStuff);
    widthWin = $(window).width();
    //widthWin = window.innerWidth;  //I tried this too
    document.write('<p>'+widthWin+'</p>');
}

或许我完全以错误的方式接近这个？

Answer 1

代码document.write('<p>'+widthWin+'</p>');替换了html的内容，这意味着window.onresize函数也被删除了。

如果您要替换页面内容，可以执行以下操作：document.body.innerHTML = ""

无论如何这里是一个代码示例删除此document.write，测试它只是调整窗口大小，你可以看到它显示新的大小：

 <body>
    this is my page test<br/>
    size: <span id="page"></span>

    <script>

    showWindowSize();

    window.onresize = function() {    
        showWindowSize();//show window size everytime window change          
    }

    function showWindowSize(){
        var element = document.getElementById("page");
        //get width size of the body
        var widthWin = window.document.body.clientWidth;
        page.innerHTML=widthWin;
    }
    </script>
</body>

Answer 2

将其另存为 example.xhtml 。如果您没有学会离开innerHTML和document.write，您将永远无法进行应用程序级脚本编写。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>window.onresize event Test</title>
<script type="application/javascript">
//<![CDATA[
function example()
{
 //Screen Resolution
 var v1 = screen.width+'x'+screen.height;
 var s1 = document.getElementsByTagName('p')[0].getElementsByTagName('span')[0];

 if (s1.firstChild) {s1.firstChild.nodeValue = v1;}
 else
 {
  var t1 = document.createTextNode(v1);
  s1.appendChild(t1);
 }

 //Screen Available
 var v2 = screen.availWidth+'x'+screen.availHeight;
 var s2 = document.getElementsByTagName('p')[1].getElementsByTagName('span')[0];
 if (s2.firstChild) {s2.firstChild.nodeValue = v2;}
 else
 {
  var t2 = document.createTextNode(v2);
  s2.appendChild(t2);
 }

 //The body element using clientWidth
 var v3 = document.getElementsByTagName('body')[0].clientWidth+'x'+document.getElementsByTagName('body')[0].clientHeight;
 var s3 = document.getElementsByTagName('p')[2].getElementsByTagName('span')[0];
 if (s3.firstChild) {s3.firstChild.nodeValue = v3;}
 else
 {
  var t3 = document.createTextNode(v3);
  s3.appendChild(t3);
 }

 //The body element using .getClientRects()[0].width
 var v4 = document.getElementsByTagName('body')[0].getClientRects()[0].width+'x'+document.getElementsByTagName('body')[0].getClientRects()[0].height;
 var s4 = document.getElementsByTagName('p')[3].getElementsByTagName('span')[0];
 if (s4.firstChild) {s4.firstChild.nodeValue = v4;}
 else
 {
  var t4 = document.createTextNode(v4);
  s4.appendChild(t4);
 }
}

window.onresize = function()
{
 example();
}

window.onload = function()
{
 example();
}
//]]>
</script>
<style type="text/css">
body {background-color: #ddd; font-size: 20px; min-height: 100%; width: 100%;}
code {color: #22f;}
span {color: #f22; font-weight: bold;}
</style>
</head>
<body>

<h1>window.onresize event Test</h1>
<div>
 <p>Screen Resolution (screen.width / screen.height): <span> </span></p>
 <p>Screen Available (screen.availWidth / screen.availHeight): <span> </span></p>
 <p>The body Element (clientWidth / clientHeight): <span> </span></p>
 <p>The body Element (getClientRects()[0].width / getClientRects()[0].height): <span> </span></p>
</div>

<h2>Explenation</h2>
<div>
 <p>The <code>screen.width</code> and <code>screen.height</code> objects represent the <em>full screen resolution</em> of the monitor itself, this should not change.</p>

 <p>The <code>screen.availWidth</code> and <code>screen.availHeight</code> objects represent the <em>maximum browser window size</em> of the monitor itself, this should not change.</p>

 <p>The <code>clientWidth</code> and <code>clientHeight</code> objects represent the <em>dimentions of the body element</em> of the monitor itself.</p>

 <p>The <code>getClientRects()[0].width</code> and <code>getClientRects()[0].height</code> objects represent the <em>indicate the bounding rectangles</em> for the body element.</p>
</div>
</body>
</html>

Javascript window.onresize似乎不提供多个更新？

2 个答案: