IE JS 兼容性 - 在 FF 中工作?

发布于 2024-12-08 14:33:18 字数 3556 浏览 0 评论 0原文

以下代码在 FireFox 中按预期显示,但在 Internet Explorer (v8) 中根本不显示。

        // getLimits init
        Frog.API.get('users.getInfo',
        {
            'params': {'id': UWA.Environment.user.id, 'details':'groups' },
            'onSuccess': AssignPoints.getLimit,
            'onError': function(err) { alert(err); }
        });

...

    // work out the user's limit, and how many points they've spent this week
    // use LEAP library if necessary
    AssignPoints.getLimit = function(data) {
        for (var i in data[0].groups) {
            if (data[0].groups[i].name.indexOf("LEAP") != -1) {
                AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
            }
        }
/************** IT'S THIS LINE ONWARDS WHERE THE ALERTS SEEM TO BREAK IN IE */
        if (AssignPoints.Limit == 0) {
            AssignPoints.Specialist = true;
        }
        
        UWA.Data.getJson(AssignPoints.URL + "?cmd=getLimitsAndTotals&Giver_ID=" + AssignPoints.CurrentUser, AssignPoints.getPointsSpent); 
    }
    
    AssignPoints.getPointsSpent = function(data) {
        AssignPoints.SpentWeekly = data.SpentWeekly;
        AssignPoints.SpentTotal = data.SpentTotal;
        
        AssignPoints.displayLimitAndTotals();
    }

    // display data from getLimitAndTotals
    AssignPoints.displayLimitAndTotals = function() {
        var LimitsAndTotalsHTML = '<h2>Points Allocation</h2>';
        
        if (AssignPoints.Specialist == false) {
            LimitsAndTotalsHTML += '<ul><li>Weekly Limit: <strong>' + AssignPoints.Limit + '</strong></li>';
        } else {
            LimitsAndTotalsHTML += '<ul><li>Weekly Limit: <strong>Unlimited</strong></li>';
        }
        
        LimitsAndTotalsHTML += '<li>Spent this week: <strong style="color:#990000;">' + AssignPoints.SpentWeekly + '</strong></li>' + 
            '<li>Spent total: <strong>' + AssignPoints.SpentTotal + '</strong></li></ul>';

        $('div#limits').html(LimitsAndTotalsHTML);
    }

编辑:CSS 和HTML 我不认为这是 CSS/HTML 问题,因为我有这个脚本的先前版本(我决定重写它,因为它是可怕的代码和一些奇怪的程序混搭,只是纯粹的 bodging),它在 IE 中正确显示使用完全相同的 HTML 和 CSS。

#total_container
{ overflow: hidden; width: 870px; }

#groups
{ width: 250px; float: left; padding: 10px; }
#right_container
{ width: 580px; float: left; padding: 10px; }

span.check
{ font-size: 10px; color: #666; }
span.err
{ color: red; font-weight: 700; }

#limits, #search_div
{ width: 270px; float:left; padding: 0 10px; }


#groups li, #groups ul
{ list-style-type: none; background: none; margin: 0; padding: 0; }
#groups li a
{ background-color: #999; color: #eee; display: block; margin: 5px 0; border: #666; padding: 8px 2px 8px 10px; width: 243px; }
#groups li a:hover
{ background-color: #990000; }

HTML 只是

并且 JS 会更新它。

// 编辑

第二次编辑:警报

我尝试将随机警报放入代码中。在 IE 中,在 for (var i in data[0].groups) 循环中,警报起作用。如果我在 for 循环之后的任何点放置警报,则无论我使用变量名还是随机字符串(例如 "test"),警报都不会出现。

在 FF 中,无论在任一功能中的位置如何,警报都会起作用。

** // 第二次编辑 **

FireFox,按预期工作 FireFox,按预期工作

Internet Explorer,b0rked Internet Explorer, b0rked

有谁知道什么可能会破坏 IE?

提前致谢。

The following code displays as intended in FireFox, but isn't displaying at all in Internet Explorer (v8).

        // getLimits init
        Frog.API.get('users.getInfo',
        {
            'params': {'id': UWA.Environment.user.id, 'details':'groups' },
            'onSuccess': AssignPoints.getLimit,
            'onError': function(err) { alert(err); }
        });

...

    // work out the user's limit, and how many points they've spent this week
    // use LEAP library if necessary
    AssignPoints.getLimit = function(data) {
        for (var i in data[0].groups) {
            if (data[0].groups[i].name.indexOf("LEAP") != -1) {
                AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
            }
        }
/************** IT'S THIS LINE ONWARDS WHERE THE ALERTS SEEM TO BREAK IN IE */
        if (AssignPoints.Limit == 0) {
            AssignPoints.Specialist = true;
        }
        
        UWA.Data.getJson(AssignPoints.URL + "?cmd=getLimitsAndTotals&Giver_ID=" + AssignPoints.CurrentUser, AssignPoints.getPointsSpent); 
    }
    
    AssignPoints.getPointsSpent = function(data) {
        AssignPoints.SpentWeekly = data.SpentWeekly;
        AssignPoints.SpentTotal = data.SpentTotal;
        
        AssignPoints.displayLimitAndTotals();
    }

    // display data from getLimitAndTotals
    AssignPoints.displayLimitAndTotals = function() {
        var LimitsAndTotalsHTML = '<h2>Points Allocation</h2>';
        
        if (AssignPoints.Specialist == false) {
            LimitsAndTotalsHTML += '<ul><li>Weekly Limit: <strong>' + AssignPoints.Limit + '</strong></li>';
        } else {
            LimitsAndTotalsHTML += '<ul><li>Weekly Limit: <strong>Unlimited</strong></li>';
        }
        
        LimitsAndTotalsHTML += '<li>Spent this week: <strong style="color:#990000;">' + AssignPoints.SpentWeekly + '</strong></li>' + 
            '<li>Spent total: <strong>' + AssignPoints.SpentTotal + '</strong></li></ul>';

        $('div#limits').html(LimitsAndTotalsHTML);
    }

EDIT: CSS & HTML
I don't think it's a CSS/HTML issue, as I have the previous version of this script (which I decided to rewrite because it was hideous code and some odd mash-up of procedural and just pure bodging) which displays correctly in IE using exactly the same HTML&CSS.

#total_container
{ overflow: hidden; width: 870px; }

#groups
{ width: 250px; float: left; padding: 10px; }
#right_container
{ width: 580px; float: left; padding: 10px; }

span.check
{ font-size: 10px; color: #666; }
span.err
{ color: red; font-weight: 700; }

#limits, #search_div
{ width: 270px; float:left; padding: 0 10px; }


#groups li, #groups ul
{ list-style-type: none; background: none; margin: 0; padding: 0; }
#groups li a
{ background-color: #999; color: #eee; display: block; margin: 5px 0; border: #666; padding: 8px 2px 8px 10px; width: 243px; }
#groups li a:hover
{ background-color: #990000; }

The HTML is just <div id="limits"></div> and the JS updates it.

// EDIT

SECOND EDIT: ALERTS

I've tried putting random alerts into the code. In IE, in the for (var i in data[0].groups) loop, the alerts work. If I place an alert at any point after that for loop, the alert doesn't appear at all, regardless of whether I use a variable name or a random string such as "test".

In FF, the alerts work regardless of placement within either function.

** // SECOND EDIT **

FireFox, working as intended
FireFox, working as intended

Internet Explorer, b0rked
Internet Explorer, b0rked

Does anyone know what might be breaking IE?

Thanks in advance.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

大海や 2024-12-15 14:33:18

好的!我已经找到问题了。

IE 不喜欢这段代码:

    for (var i in data[0].groups) {
        if (data[0].groups[i].name.indexOf("LEAP") != -1) {
            AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
        }
    }

当我将其更改为这种格式时:

        for (var i = 0; i < data[0].groups.length; i++) {
            if (data[0].groups[i].name.substr(0,4) == "LEAP") {
                AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
            }
        }

它在 FF 和 IE 中按预期工作。

OK! I've found the problem.

IE didn't like this segment of code:

    for (var i in data[0].groups) {
        if (data[0].groups[i].name.indexOf("LEAP") != -1) {
            AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
        }
    }

When I've changed that to this format:

        for (var i = 0; i < data[0].groups.length; i++) {
            if (data[0].groups[i].name.substr(0,4) == "LEAP") {
                AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
            }
        }

It works as intended in FF and IE.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文