Question

我试图解决这个问题已有几天了，我试图用我自己的对象来替换全局对象以减少其他脚本（用户脚本，chrome扩展......那种东西）的问题。但是由于某种原因，我无法让事情发挥作用。我尝试使用JSLint，Google Chrome中包含的开发人员工具，Firebug以及IE8中的集成schript调试器进行一些调试，但是没有任何错误可以解释为什么它在我尝试的任何浏览器中都不起作用。

我尝试了IE 8，Google Chrome 10.0.612.3开发，Firefox 3.6.13，Safari 5.0.3和Opera 11。

所以......这是代码：

HTML：

<!DOCTYPE HTML>
<html manifest="c.manifest">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta charset="utf-8">

  <!--[if IE]>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
     <script src="https://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js">IE7_PNG_SUFFIX=".png";</script>
  <![endif]-->
  <!--[if lt IE 9]>
     <script src="js/lib/excanvas.js"></script>
     <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <script src="js/data.js"></script>
</head>
<body>

<div id="controls">
     <button onclick="MYOBJECTis.next()">Next</button>
</div>
<div id="textfield"></div>

<canvas id="game"></canvas>

</body>
</html>

使用Javascript：

var that = window, it = document, k = Math.floor;
var MYOBJECTis = {

     aresizer: function(){
     // This method looks like it doesn't work.
     // It should automatically resize all the div elements and the body.
     // JSLint: no error (execpt for "'window' is not defined." which is normal since
     // JSLint does nor recognize references to the global object like "window" or "self"
     // even if you assume a browser)
     // Firebug: no error
     // Chrome dev tools: no error
     // IE8: no error
         "use strict";
     var screenWidth, screenHeight;
     if(window.innerWidth) {
         screenWidth = window.innerWidth;
        }
     else {
         if(document.documentElement && document.documentElement.clientWidth) {
            screenWidth = document.documentElement.clientWidth;
            }
         else {
            if(document.body) {
                screenWidth = document.body.clientWidth;
            }
        }
    }
     if(window.innerHeight) {
         screenHeight = window.innerHeight;
        }
     else {
         if(document.documentElement && document.documentElement.clientHeight) {
            screenHeight = document.documentElement.clientHeight;
            }
         else {
             if(document.body) {
                screenHeight = document.body.clientHeight;
            }
        }
    }
     (function() {
     for(var b = 0, c = it.getElementsByTagName("div");b < c.length;b++) {
         c[b].style.width = k(c.offsetWidth) / 100 * k(screenWidth);
         c[b].style.height = k(c.offsetHight) / 100 * k(screenHeight);
            }
        }());
     (function() {
     var b = it.getElementsByTagName("body");
     b.width = screenWidth;
     b.height = screenHeight;
        }());
    },


     next: function(){
     // This method looks like it doesn't work.
     // It should change the text inside a div element
     // JSLint: no error (execpt for "'window' is not defined.")
     // Firebug: no error
     // Chrome dev tools: no error
     // IE8: not implemented (starting at the var statement below)
         "use strict";
         var b = it.getElementById("textfield"), a = [], c;
         switch(c !== typeof Number){
            case true:
                 a[1] = ["HI"];
                 c = 0;
                 break;
            case false:
                 b.innerHtml = a[c];
                 c+=1;
                 break;
            default:
             return Error; 
            }
        }
    };
// auto events
(function(){
     "use strict";
     that.onresize = MYOBJECTis.aresizer();
    }());

如果有人能帮助我，我会非常感激。

编辑：要回答什么不起作用的问题我可以说我在这里展示的方法根本没有用，我不知道问题的原因。我还尝试清理一些最可能与它无关的代码。其他信息在代码内的注释中。

EDIT2：我将代码及其中的注释更新为现在的样子，但我仍然无法使其工作。我在IE8的下一个方法上也遇到了新的错误。

Answer 1

主要问题似乎在你的循环中：

c = it.getElementsByTagName("div");

返回一个DOM元素数组;并且您正在尝试在整个阵列上应用样式：

c.style.width

你应该做什么

c[b].style.width

在next函数中，您的default案例将永远不会被执行，因为条件将始终为真或假，在这两种情况下，您都会阻止切换向下移动到下一个案例使用break或return - 默认只会在没有定义匹配大小写的情况下执行，或者如果上面的情况不是break

使用document.getElementsByTagName返回一个元素数组，因此 getElements 。

您不能将样式应用于元素数组，只能应用于单个元素，因此您需要指定要修改的元素的索引值，如下所示：

c[b].style.width = k(c[b].offsetWidth) / 100 * k(screenWidth) + "px";
c[b].style.height = k(c[b].offsetHight) / 100 * k(screenHeight) + "px";

和

var b = it.getElementsByTagName("body");
b[0].style.width = screenWidth + "px";
b[0].style.height = screenHeight + "px";

Answer 2

作为旁注，您可以使用“窗口”而不是“那个” - 它可以全局访问。

我会使用以下来获取客户端宽度并与所有人兼容：

if (window.innerWidth)
{
screenWidth=window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth)
{
screenWidth=document.documentElement.clientWidth;
}   
else if (document.body)
{
screenWidth=document.body.clientWidth;
}

Answer 3

我可以在下一个方法中看到一些非常奇怪的事情。

您将it.getElementById（“textfield”）分配给b，但从不使用b。

你声明c，然后检查c！== typeof数字，因为你还没有设置c，所以它总是真的。

我认为接下来可能应该使用在MYOBJECTis级别创建的变量而不是局部变量。

Answer 4

您正在分配一个事件处理程序。你只需要在那里坚持一个功能，但不要打电话给它。所以，这一行：

 that.onresize = MYOBJECTis.aresizer();

应该是

 that.onresize = MYOBJECTis.aresizer;

或者

 that.onresize = function() {
     MYOBJECTis.aresizer();
 };

如果您想保留this中的aresizer。

Javascript：自制方法无法正常工作

4 个答案: