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

发布于 2024-10-10 03:48:57 字数 4173 浏览 0 评论 0原文

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

我尝试了 IE 8、Google Chrome 10.0.612.3 dev、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 的下一个方法中收到了一个新错误。

原文

I tried to figure this out for some days now, I tried to use my own object to sort of replace the global object to reduce problems with other scripts (userscripts, chrome extensions... that kind of stuff). However I can't get things to work for some reason. I tried some debugging with JSLint, the developer tools included in Google Chrome, Firebug and the integrated schript debugger in IE8 but there is no error that explains why it doesn't work at all in any browser I tried.

I tried IE 8, Google Chrome 10.0.612.3 dev, Firefox 3.6.13, Safari 5.0.3 and Opera 11.

So... here is the code:

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();
    }());

If anyone can help me out with this I would very much appreciate it.

EDIT: To answer the question what's not working I can just say that no method I showed here is working at all and I don't know the cause of the problem. I also tried to clean up some of the code that has most likely nothing to do with it. Additional information is in the comments inside the code.

EDIT2: I updated the code and the comments inside it to what it looks like now but I still can't get it to work. I also got a new error on the next method from IE8.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

指尖上的星空 2024-10-17 03:48:57

主要问题似乎出在循环内部：

c = it.getElementsByTagName("div");

返回 DOM 元素数组；并且您尝试在整个数组上应用样式：

c.style.width

当您应该

c[b].style.width

在 next 函数中执行时，您的 default 情况将永远不会被执行，因为条件总是会消失true 或 false，在这两种情况下，您都可以通过使用 break 或 return 来阻止切换向下移动到下一个情况 - 默认情况下仅在存在时执行没有定义匹配的大小写，或者上面的大小写没有打破

使用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";

The main problem seems to be inside your loop:

c = it.getElementsByTagName("div");

returns an array of DOM Elements; and you're trying to apply styles on the entire array:

c.style.width

when you should be doing

c[b].style.width

In the next function your default case will never get executed because the condition will always be wither true or false and in both cases you're preventing the switch from moving down to the next case by using either a break or return - the default will only execute if there is no matching case defined or if the case above it doesn't break

Using document.getElementsByTagName returns an Array of Elements, hence the getElements.

You cannot apply styles to an Array of Elements, only to an individual Element, therefore you need to indicate the index value to the Element you're wish to modify, like so:

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

and

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

回复收藏 0 原文

无需解释 2024-10-17 03:48:57

附带说明一下，您可以使用“窗口”而不是“那个”——它是全局可访问的。

我将使用以下方法来获取客户端宽度并全面兼容：

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

As a side note, you can use "window" instead of "that" - it's globally accessible.

I would use following to get client width and be compatible across the board:

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

回复收藏 0 原文

长伴 2024-10-17 03:48:57

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

您将 it.getElementById("textfield") 分配给 b 但从未使用过 b。

您声明 c ，然后检查 c !== typeof Number 是否始终为 true，因为您尚未设置 c 。

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

回复收藏 0 原文

不美如何 2024-10-17 03:48:57

您正在分配一个事件处理程序。您只需将一个函数放在那里，但不调用它。这一行

 that.onresize = MYOBJECTis.aresizer();

应该是

 that.onresize = MYOBJECTis.aresizer;

Or 。

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

因此，如果您想将 this 保留在 aresizer 中，则

You are assigning an event handler. You just have to stick a function there, but not call it. So, this line:

 that.onresize = MYOBJECTis.aresizer();

Should be

 that.onresize = MYOBJECTis.aresizer;

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

if you want to preserve the this in aresizer.

回复收藏 0 原文

~没有更多了~

关于作者

昨迟人

暂无简介

0 文章

0 评论

20 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

花开柳相依

zyhello

故友

对风讲故事

Oo萌小芽oO

梦明

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

花开柳相依

zyhello

故友

对风讲故事

Oo萌小芽oO

梦明

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。