Fatal编程技术网
  • javascript/
  • Javascript window.onresize不'；似乎没有提供多个更新？

Javascript window.onresize不'；似乎没有提供多个更新？

javascript

Javascript window.onresize不'；似乎没有提供多个更新？,javascript,Javascript,如何使window.onresize跟随用户的多个窗口大小调整？我有下面的Javascript代码，可以打印出窗口大小。它只提供一个更新： var someStuff = ['<p id="page"></p>']; document.write(someStuff); var widthWin = $(window).width(); document.write('<p>'+widthWin+'</p>'); window.onresize

如何使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>');
}

var someStuff=['
']；
写一些东西；
var widthWin=$（窗口）.width（）；
文件。写入（“”+widthWin+”
”）；
window.onresize=函数（）{
var元素=document.getElementById（“页面”）；
element.parentNode.removeChild（元素）；
写一些东西；
widthWin=$（窗口）.width（）；
//widthWin=window.innerWidth；//我也试过了
文件。写入（“”+widthWin+”
”）；
}
或者可能我完全错误地处理了这个问题？

代码
文档替换html的内容，这意味着
window.onresize
功能也被删除

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

无论如何，这里有一个删除此文档的代码示例。要测试它，请调整窗口大小，您可以看到它显示了新的大小：


 <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>




这是我的页面测试

尺寸：
showWindowsSize（）；
window.onresize=函数（）{
ShowWindowsSize（）；//每次窗口更改时显示窗口大小
}
函数showWindowsSize（）{
var元素=document.getElementById（“页面”）；
//获取主体的宽度和大小
var widthWin=window.document.body.clientWidth；
page.innerHTML=widthWin；
}

将其另存为示例.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>



您不使用
innerHTML
或
document.write
，因为它们不符合DOM。@John我同意不使用document.write，我只是解释了使用它的效果。。。关于innerHTML，这里是w3c参考：我尝试用document.body.innerHTML=“”+widthWin+”
”）替换document.write；它仍然给了我完全相同的结果。只有一个更新。@John:那么，符合DOM的解决方案是什么呢？谢谢。@lynvie刚刚用一个例子编辑了答案，其中onresize起作用，并在页面中显示宽度大小谢谢。我不知道有什么不同。Good to know.PS您能推荐一个与DOM兼容的javascript的好参考吗？我的书根本没有讨论这个问题。简单地说，就是不要使用
innerHTML
或
文档；真正学习的最好方法是不要使用框架，它们最初可能会加快开发速度，但它们依赖于不可靠的方法，如
innerHTML
，而这些方法在应用程序级别无法使用。熟悉（i in-window）{alert（'window.+i）；}
（in-operator）的
，并探索DOM及其为对象、方法等显示的内容。