360浏览器document.body.clientWidth 为0

小风谗雪 2014-07-18 02:23:43

360浏览器默认极速模式第一次打开 document.body.clientWidth 值为 0

刷新值正常

其他浏览器可以



<!DOCTYPE HTML>

<html>

    <head>

        <script type="text/javascript">

            window.onload= function() {

                var can = document.getElementById("can");

                var con = can.getContext("2d");

                alert(document.body.clientWidth);

                // can.style.left = ((document.body.clientWidth - can.width) / 2) + "px";

                con.translate(75, 75);

                for (var i = 0; i < 6; i++) {

                    con.save();

                    con.fillStyle = "rgb(" + (51 * i) + "," + (255 - 51 * i) + ",255)";

                    for (var j = 0; j < i * 6; j++) {

                        con.rotate(Math.PI * 2 / (i * 6));

                        con.beginPath();

                        con.arc(0, i * 12.5, 5, 0, Math.PI * 2, true);

                        con.fill();

                    }

                    con.restore();

                }



                var canvase = document.getElementById("canvas");

                var context = canvase.getContext("2d");

                alert(document.body.clientWidth);

                //  canvase.style.left = ((document.body.clientWidth - can.width) / 2) + "px";

                canvase.style.top = "350px";

                context.fillRect(0, 0, 300, 300);

                for (var i = 0; i < 3; i++) {

                    for (var j = 0; j < 3; j++) {

                        context.save();

                        context.strokeStyle = "#9CFF00";

                        context.translate(50 + j * 100, 50 + i * 100);

                        drawSpirograph(context, 20 * (j + 2) / (j + 1), -8 * (i + 3) / (i + 1), 10);

                        context.restore();

                    }

                }

            };

            function drawSpirograph(ctx, R, r, o) {

                var x1 = R - o;

                var y1 = 0;

                var i = 1;

                ctx.beginPath();

                ctx.moveTo(x1, y1);

                do {

                    if (i > 20000) break;

                    var x2 = (R + r) * Math.cos(i * Math.PI / 72) - (r + o) * Math.cos(((R + r) / r) * (i * Math.PI / 72));

                    var y2 = (R + r) * Math.sin(i * Math.PI / 72) - (r + o) * Math.sin(((R + r) / r) * (i * Math.PI / 72));

                    ctx.lineTo(x2, y2);

                    x1 = x2;

                    y1 = y2;

                    i++;

                } while (x2 != R - o && y2 != 0);

                ctx.stroke();

            }





        </script>

    </head>

    <body>

        <canvas id="can" width="500px" height="300px" style="position: absolute;border: 2px solid black;"></canvas>

         <canvas id="canvas" width="500px" height="400px" style="position: absolute;border: 2px solid black;"></canvas>

    </body>

</html>

...全文

1294 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

喝的酒少 2016-12-07

打赏
举报

请我上面的问题你解决了吗？我们系统也出现这个问题。可以给我分享一下吗？亲

Guild_Wars_2 2014-07-27

打赏
举报

去掉doctype看看，第一行

小风谗雪 2014-07-18

打赏
举报

加载后打印值正常的只有第一次打开有几率出现值为0的情况几率还很大 360的急速模式应该是 chrome的内核我用 chrome打开都正常火狐也正常 canvas 改成 div 也是一样这难道是浏览器的 bug么？

业余草 2014-07-18

打赏
举报

你写一个button，点击后弹出document.body.clientWidth，看看是否正常

小风谗雪 2014-07-18

打赏
举报

引用 2 楼 xmt1139057136 的回复:

你试着换一个方法，onload


<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
            window.onload= function() {
                var can = document.getElementById("can");
                //第一次载入 这个打印的值 为0   再次F5刷新值正常  关闭页面 双击打开 10次有9此 打印值为0 360急速模版有此问题
                alert(document.body.clientWidth);
                can.style.left = ((document.body.clientWidth - can.width) / 2) + "px";
              
 
                var canvase = document.getElementById("canvas");
                alert(document.body.clientWidth);
                canvase.style.left = ((document.body.clientWidth - can.width) / 2) + "px";
                canvase.style.top = "350px";
              
            };
        </script>
    </head>
    <body>
        <canvas id="can" width="500px" height="300px" style="position: absolute;border: 2px solid black;"></canvas>
         <canvas id="canvas" width="500px" height="400px" style="position: absolute;border: 2px solid black;"></canvas>
    </body>
</html>

这个页面已经 onload了看js代码本来是想设置 canvas居中发现一个bug 不知道这种是什么问题

业余草 2014-07-18

打赏
举报

你试着换一个方法，onload

业余草 2014-07-18

打赏
举报

网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 IE，FireFox 差异如下： IE6.0、FF1.06+： clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border IE5.0/5.5： clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height (需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关) 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth 网页正文全文高： document.body.scrollHeight 网页被卷去的高： document.body.scrollTop 网页被卷去的左： document.body.scrollLeft 网页正文部分上： window.screenTop 网页正文部分左： window.screenLeft 屏幕分辨率的高： window.screen.height 屏幕分辨率的宽： window.screen.width 屏幕可用工作区高度： window.screen.availHeight 屏幕可用工作区宽度： window.screen.availWidth －－－－－－－－－－－－－－－－－－－技术要点本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在 IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。 Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。 Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。 document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。关于获取各种浏览器可见窗口大小的一点点研究。在我本地测试当中：在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight即可获得，很简单，很方便。而在公司项目当中：Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 document.documentElement.clientWidth document.documentElement.clientHeight 原来是W3C的标准在作怪啊http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 如果在页面中添加这行标记的话在IE中：document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度在FireFox中：document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度? 在Opera中： document.body.clientWidth ==> 可见区域宽度 document.body.clientHeight ==> 可见区域高度 document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）而如果没有定义W3C的标准，则IE为：document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0 FireFox为:document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） Opera为：document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）