javascript - Javascript无法在服务器上运行

Question

我真的希望这不是一个重复的问题，因为它似乎是一个大问题，但我已经搜索了很长时间，但无济于事......我制作了一个 HTML5 选项卡式界面，它调用 .js 文件以获得功能. 该项目在我的本地计算机上运行得非常好，但是当我将它移到我们正在使用的服务器上时，就没有更多功能了。服务器是 sql server 2008，我在 Visual Studio 2010 中开发了该项目。该项目仍在进行中，但我想要的只是让这些选项卡像在我的本地计算机上一样工作。这是一些代码...

主页.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabbed Interface</title>
<link href="Styles/Style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
  <div id="tabContainer">
    <div class="tabs">
      <ul>
        <li id="tabHeader_1">Home</li>
        <li id="tabHeader_2">New Case</li>
        <li id="tabHeader_3">Search</li>
        <li id="tabHeader_4">Reports</li>
        <li id="tabHeader_5">Administration</li>
      </ul>
    </div>
    <div class="tabscontent">
      <div class="tabpage" id="tabpage_1">
        <h2>Home</h2>
        <p>Some Content</p>
      </div>
      <div class="tabpage" id="tabpage_2">
        <div id="wrapper2">
            <div id="newCaseTabContainer">
                <div class="newCaseTabs">
                    <ul>
                        <li id="tabHeader_6">Customer Information</li>
                        <li id="tabHeader_7">Incident Information</li>
                        <li id="tabHeader_8">Operator Information</li>
                        <li id="tabHeader_9">Incident Analysis</li>
                        <li id="tabHeader_10">Audit Log</li>
                    </ul>
                </div>
                <div class="newCaseTabContent">
                    <div class="tabpage" id="tabpage_6">
                        <h2>Customer</h2>
                    </div>
                    <div class="tabpage" id="tabpage_7">
                        <h2>Incident</h2>
                    </div>
                    <div class="tabpage" id="tabpage_8">
                        <h2>Operator</h2>
                    </div>
                    <div class="tabpage" id="tabpage_9">
                        <h2>Analysis</h2>
                    </div>
                    <div class="tabpage" id="tabpage_10">
                        <h2>Audit</h2>
                    </div>
                </div>
            </div>
        </div>
      </div>
      <div class="tabpage" id="tabpage_3">
        <h2>Search</h2>
        <p>CONTENT GALORE!!</p>
      </div>
      <div class="tabpage" id="tabpage_4">
        <h2>Reports</h2>
        <p>WOOO</p>
      </div>
      <div class="tabpage" id="tabpage_5">
        <h2>Administration</h2>
        <p>YEAH!!!!!!</p>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="Scripts/Script.js"></script>
</body>
</html>

脚本.js

window.onload = function () {

    // get tab containers
    var container = document.getElementById("tabContainer");
    var check = document.getElementById("newCaseTabContainer");

    // set current tab
    // also set the new case tab when new case tab is selected
    var navitem = container.querySelector(".tabs ul li");
    var checkitem = check.querySelector(".newCaseTabs ul li");

    //store which tab we are on
    var ident = navitem.id.split("_")[1];
    navitem.parentNode.setAttribute("data-current", ident);
    var checkident = checkitem.id.split("_")[1];
    checkitem.parentNode.setAttribute("data-current", checkident);

    //set current tabs with class of activetabheader
    navitem.setAttribute("class", "tabActiveHeader");
    checkitem.setAttribute("class", "tabActiveHeader");

    //get new case tab element to display tab control within
    var displayNewCaseTabs = document.getElementById("tabHeader_2");

    //hide other tab contents we don't need
    var pages = container.querySelectorAll(".tabpage");
    for (var i = 1; i < pages.length; i++) {
        pages[i].style.display = "none";
    }
    var newCasePages = check.querySelectorAll(".tabpage");
    for (var i = 1; i < newCasePages.length; i++) {
        newCasePages[i].style.display = "none";
    }

    //this adds click event to tabs
    var tabs = container.querySelectorAll(".tabs ul li");
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].onclick = displayPage;
    }
    var newCaseTabs = check.querySelectorAll(".newCaseTabs ul li");
    for (var i = 0; i < newCaseTabs.length; i++) {
        newCaseTabs[i].onclick = displayPage;
    }
}

// on click of one of tabs
function displayPage() {

    var current = this.parentNode.getAttribute("data-current");

    //remove class of activetabheader and hide old contents
    document.getElementById("tabHeader_" + current).removeAttribute("class");
    document.getElementById("tabpage_" + current).style.display = "none";

    var ident = this.id.split("_")[1];

    //add class of activetabheader to new active tab and show contents
    this.setAttribute("class", "tabActiveHeader");
    document.getElementById("tabpage_" + ident).style.display = "block";
    this.parentNode.setAttribute("data-current", ident);
}

javascript 引用的 Style.css...

* 
{
    margin:0;
    padding:0;
}

body 
{
    width:75%;
    font: .8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

h2
{ 
    margin-bottom:10px;
    margin-left:10px;
}

#wrapper
{
    width:720px;
    margin:40px auto 0;
}

#wrapper2
{
    width:720px;
    margin:40px 40px 0px 20px;
}

#wrapper h2
{
    color:Black;
    text-align:left;
    margin-bottom:20px;
}

#wrapper2 h2
{
    color:Black;
    text-align:left;
    margin: 10px 10px 25px 30px;
}

#wrapper a
{
    display:block;
    font-size:1.2em;
    padding-top:20px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
}

#wrapper2 a
{
    display:block;
    font-size:1.2em;
    padding-top:20px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
}

#tabContainer 
{
    width:75%;
    height:100%;
    position:absolute;
    padding:15px;
    background-color:#2e2e2e;
    -moz-border-radius: 4px;
    border-radius: 4px; 
}

#newCaseTabContainer
{
    width:75%;
    height:80%;
    position:absolute;
    padding:15px;
    border-radius: 2px;
}

.newCaseTabs
{
    height:30px;
}

.newCaseTabs > ul
{
    font-size:1em;
    list-style:none;
}

.newCaseTabs > ul > li
{
    margin-left:15px;
    padding:7px 10px;
    display:block;
    float:left;
    color:#333;
    border: 1px solid Black;
    border-bottom-width: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-top-left-radius:4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px; 
    background: #E0E0E0; /* old browsers */
    background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
}

.newCaseTabs > ul > li:hover
{
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
    cursor:pointer;
    color: #333;
}

.newCaseTabs > ul > li.tabActiveHeader
{
    background: #FF0000; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
    cursor:pointer;
    color: #FFF;
}

.tabs
{
    height:30px;
}

.tabs > ul
{
    font-size: 1em;
    list-style:none;
}

.tabs > ul > li
{
    margin:0 2px 0 0;
    margin-left:10px;
    padding:7px 10px;
    display:block;
    float:left;
    color:#333;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid Black;
    border-bottom-width: 0px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-top-left-radius:4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px; 
    background: #E0E0E0; /* old browsers */
    background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
}

.tabs > ul > li:hover
{
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
    cursor:pointer;
    color: #333;
}

.tabs > ul > li.tabActiveHeader
{
    background: #0000FF; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
    cursor:pointer;
    color: #FFF;
}

.tabscontent 
{
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px; 
    padding:10px 10px 25px;
    height:90%;
    background: #E8E8E8; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); /* webkit */
    margin:0;
    color:#333;
}

.newCaseTabContent
{
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border: 2px solid;
    border-top-width: 1px;
    border-top-left-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #CCCCCC; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); /* webkit */
}

这可能是一个新手错误，但我真的需要一些极端的帮助......提前谢谢......

编辑请注意 .css 和 .js 文件在我的项目中它们自己的文件夹中，这就是它声明 Styles/Style.css 和 Scripts/Script.js 的原因

重要更新！！: 好的，所以我发现我的浏览器中打开了兼容模式，然后当我关闭它时，应用程序就可以正常工作了！！就像在我的本地机器上一样。我不认为或不知道这是否是解决此问题的方法，因为它仅适用于我的机器，可能不适用于其他机器，因为使用此应用程序的任何人都必须单独关闭该设置...我怎样才能做到这一点，让我的用户不必这样做？我可以输入一些代码来制作它，以便每个人都可以按照预期的方式查看它吗？

score 0 · Accepted Answer

根据您最近的帖子编辑，我认为这是一个 IE 兼容性问题。

这将使 IE 使用最新的渲染模式（即最好的 HTML5 兼容性）：

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

（您必须将其放入您的 html 文档中head。）

score 0 · Accepted Answer

您确定文件已上传到子目录...可能未创建目录，然后上传失败。通过在浏览器中输入 js 文件的 url 来检查。

如果可行（您可以通过在其中输入 URL 来获取 js），然后将 HTML 中的 URL 更改为包含域名的完整 URL 路径。这将使您走上正确的轨道。

javascript - Javascript无法在服务器上运行

2 回答 2

Related

Reference