一些 Javascript 可以在 Localhost 上运行，有些则不能 - 都可以在远程服务器上运行？答案

【问题标题】：Some Javascript Works on Localhost, Some Doesn't - All Works on Remote Server?一些 Javascript 可以在 Localhost 上运行，有些则不能 - 都可以在远程服务器上运行？
【发布时间】：2011-11-17 17:16:36
【问题描述】：

我今天花了很多时间设置本地测试服务器，在尝试手动安装一堆东西后，我最终决定只使用 WampServer，这看起来很棒。

在测试我的网站后，我很高兴看到所有 PHP 都完美执行，但我注意到一些 javascript 似乎无法正常工作，并且一些图像无法加载。

所有路径都是相对的——css 中的图像路径如下所示：url(img/btn_bg.png)。它们中的一些会显示，有些则不会，即使它们都在本地的同一个地方，如果我手动输入路径/文件名，我可以通过 Web 浏览器访问它们。它们都出现在远程站点上。我检查以确保路径不依赖于远程站点（不是绝对路径）。

我不太确定如何测试 JavaScript 发生了什么。我有萤火虫，但我不知道如何使用调试功能。我确实尝试通过警报进行存根测试，但没有成功。由于所有 JS 代码都在同一个文件中，它在远程服务器上正常工作，其中一些在本地正常工作，我不确定它会发生什么？同样，路径都是相对的。

由于这个项目是专有的，我不能透露太多代码，但这里有几个例子：

    function changeDiv()
    {
    var direction = arguments[0];
    var tabs = new Array(
        'basics', 'operations', 'info', 'contractinfo', 'contractsize',
        'intent_tab', 'transportation', 'type', 'mep', 'materials',
        'clinicalresearch', 'consulting', 'collaboration', 'construction',
        'education', 'environmental', 'vendor', 'realestate', 'recs', 'fin');

var vis = new Array();
for ( a = 0; a < tabs.length; ++a )
{
    var temp = tabs[a];
    if (document.getElementById(temp).className.match('show'))
    {
        vis += tabs[a];
    }
}
if (
        vis == 'basics' || vis == 'operations' || vis == 'info' ||
        vis == 'contractinfo' || vis == 'contractsize' || vis == 'intent_tab' ||
        vis == 'transportation' || vis == 'materials' || vis == 'recs' ||
        vis == 'fin' )
{
    switch (vis)
    {
        case 'basics':
        document.getElementById('operations').className =
                        document.getElementById('operations').className.
                            replace(/\bhide\b/, 'show');
        document.getElementById('basics').className =
                        document.getElementById('basics').className.
                            replace(/\bshow\b/, 'hide');
        document.getElementById('back_button').className =
                        document.getElementById('back_button').className.
                            replace(/\bhide\b/, 'show');
        break;

        case 'operations':
        if (direction == 'next')
        {
            document.getElementById('info').className =
                                document.getElementById('info').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('operations').className =
                                document.getElementById('operations').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('basics').className =
                                document.getElementById('basics').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('operations').className =
                                document.getElementById('operations').className.
                                    replace(/\bshow\b/, 'hide');
            document.getElementById('back_button').className =
                                document.getElementById('back_button').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'info':
        if (direction == 'next')
        {
            document.getElementById('contractinfo').className =
                                document.getElementById('contractinfo').className.
                                     replace(/\bhide\b/, 'show');
            document.getElementById('info').className =
                                document.getElementById('info').className.
                                     replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('operations').className =
                                document.getElementById('operations').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('info').className =
                                document.getElementById('info').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'contractinfo':
        if (direction == 'next')
        {
            document.getElementById('contractsize').className =
                                document.getElementById('contractsize').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('contractinfo').className =
                                document.getElementById('operations').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('info').className =
                                document.getElementById('info').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('contractinfo').className =
                                document.getElementById('contractinfo').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'contractsize':
        if (direction == 'next')
        {
            document.getElementById('intent_tab').className =
                                document.getElementById('intent_tab').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('contractsize').className =
                                document.getElementById('contractsize').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('contractinfo').className =
                                document.getElementById('contractinfo').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('contractsize').className =
                                document.getElementById('contractsize').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'intent_tab':
        if (direction == 'next')
        {
            document.getElementById('transportation').className =
                                document.getElementById('transportation').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('intent_tab').className =
                                document.getElementById('intent_tab').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('contractsize').className =
                                document.getElementById('contractsize').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('intent_tab').className =
                                document.getElementById('intent_tab').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'transportation':
        if (direction == 'next')
        {
            document.getElementById('materials').className =
                                document.getElementById('materials').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('transportation').className =
                                document.getElementById('transportation').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('intent_tab').className =
                                document.getElementById('intent_tab').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('transportation').className =
                                document.getElementById('transportation').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'materials':
        if (direction == 'next')
        {
            document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('materials').className =
                                document.getElementById('materials').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('transportation').className =
                                document.getElementById('intent_tab').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('materials').className =
                                document.getElementById('materials').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'recs':
        if (direction == 'next')
        {
            document.getElementById('fin').className =
                                document.getElementById('fin').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bshow\b/, 'hide');
        }

        break;

        case 'fin':
        if (direction == 'back')
        {
            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('fin').className =
                                document.getElementById('fin').className.
                                    replace(/\bshow\b/, 'hide');
        }

        break;

    }
}
else 
{
    if (vis == 'type')
    {
        if (direction == 'next')
        {
            logic('q_16');
            document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('transportation').className =
                                document.getElementById('transportation').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bshow\b/, 'hide');
        }
    }
    else if ( vis != 'type')
    {
        if (vis == 'recs' && direction == 'next')
        {
            document.getElementById('fin').className =
                                document.getElementById('fin').className.
                                    replacec(/\bhide\b/, 'show');
            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bshow\b/, 'hide');
            document.getElementById('calc_risk').className =
                                document.getElementById('calc_risk').className.
                                    replace(/\bshow\b/, 'hide');
            document.getElementById('recs_header').className =
                                document.getElementById('recs_header').className.
                                    replace(/\bhide\b/, 'show');
        }
        else if (vis == 'recs' && direction == 'back')
        {
            document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bshow\b/, 'hide');
            document.getElementById('calc_risk').className =
                                document.getElementById('calc_risk').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('recs_header').className =
                                document.getElementById('recs_header').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else if (direction == 'next')
        {
            var tab_array = new Array('mep', 'realestate', 'vendor', 'environmental', 'education', 'construction', 'collaboration', 'consulting', 'clinicalresearch');

            var visTab = document.getElementById('vis_tab').value;

            for (x = 0; x < tab_array.length; ++x)
            {
                var temp_tab = tab_array[x];
                document.getElementById(temp_tab).className =
                                        document.getElementById(temp_tab).className.
                                            replace(/\bshow\b/, 'hide');
            }

            switch(visTab)
            {
                case 'mep':
                wholesale();
                break;

                case 'realestate':
                realestate();
                break;

                case 'vendor':
                vendor();
                break;

                case 'environmental':
                environment();
                break;

                case 'education':
                education();
                break;

                case 'construction':
                construction();
                break;

                case 'collaboration':
                collaboration();
                break;

                case 'consulting':
                consulting();
                break;

                case 'clinicalresearch':
                clinicalresearch();
                break;
            }

            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('calc_risk').className =
                                document.getElementById('calc_risk').className.
                                    replace(/\bshow\b/, 'hide');
            document.getElementById('recs_header').className =
                                document.getElementById('recs_header').className.
                                    replace(/\bhide\b/, 'show');

            recsPage();
        }
    }
    else
    {
        document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bhide\b/, 'show');
        //materials realestate vendor environmental education construction collaboration consulting clinicalresearch

        var b_vis = new Array('mep', 'realestate', 'vendor', 'environmental', 'education', 'construction', 'collaboration', 'consulting', 'clinicalresearch');

        for (x = 0; x < b_vis.length; ++x)
        {
            var temp_vis = b_vis[x];
            document.getElementById(temp_vis).className =
                                document.getElementById(temp_vis).className.
                                    replace(/\bshow\b/, 'hide');
        }
    }
}
}

上面的代码在大多数情况下都可以在不同的 div 之间切换，但是这个特定的部分并不能一直正常工作：

document.getElementById('recs').className =
    document.getElementById('recs').className.
        replace(/\bhide\b/, 'show');
document.getElementById('calc_risk').className =
    document.getElementById('calc_risk').className.
        replace(/\bshow\b/, 'hide');
document.getElementById('recs_header').className =
    document.getElementById('recs_header').className.
        replace(/\bhide\b/, 'show');

recsPage();

recsPage(); 永远不会在本地主机上被调用。它远程工作正常。两者之间的代码相同。其他地方还有其他部分无法运行，但现在这是我唯一关心的部分。

有什么想法吗？由于javascript在客户端执行，我无法想象为什么它不在远程服务器上时它不起作用。

【问题讨论】：

是否有一个<base href> 标记指向可能存在不同版本的javascript 的位置？是否可以通过 Firebug 之类的工具或简单地将 alert('In function: <functionname>') 放在您怀疑行为不端的函数的顶部来调试以查看函数是否被执行？
我的建议是你学习 Firebug。这并不难，有时，只需打开它就会发现问题（通常，有用的 Javascript 错误消息会打印在控制台上）。可能是其他一些文件没有正确加载，这会以一种微妙的方式搞砸你的代码。
什么是：.replace(/\bhide\b/, 'show'); 之前的 className 值和之后的值。请举例。
另外，如果您打算维护它，请重构该代码。比如有大量重复的document.getElementById方法调用，你可以将它们缓存在一个变量中，避免重复。
@CodeCaster - 我尝试了存根测试（将 alerts() 放入），这就是我发现代码没有在这些部分中运行的方式。

标签： php javascript localhost wamp wampserver

【解决方案1】：

使用 firebug，启动“Net”并查找 404 错误。如果您将鼠标悬停在文件名上，Firebug 会显示路径，因此您应该能够推断出错误的来源。

另外，检查 Firebug 选项卡“控制台”是否有错误。这应该会给你足够的线索来解决问题。

【讨论】：

谢谢 - 这使我能够找到图像的问题。我仍然不确定 javascript 的问题是什么，但是今天当我尝试它时它正在工作......如果它再次发生，我会尝试你的建议 =）
很高兴它有帮助！如果您认为它解决了您的问题，请随时接受答案。 ;)