Question

此函数使用JQuery中的.load方法更新我的内容。该代码在Google Chrome和Mozilla Firefox上按预期工作，但在IE8和IE9中根本不起作用。

以下是其内容：

 $(function(){

   var newHash='';
    $contentwrapper = $("#contentwrapper");

    $("nav").delegate(".menuOptions", "click", function() 
    {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function()
    {
        newHash = window.location.hash.substring(1);  
        $contentwrapper.load(newHash + " #contentcolumn");
        setTimeout(TitleUpdater, 200);
    });
 });

 function TitleUpdater()
 {
     top.document.title=$("#contentcolumn").attr("title");
 }

我想知道如何使此代码与Internet Explorer兼容！谢谢。

编辑：在Firefox和Chrome上，此代码仅替换一个大<div id="contentcolumn">...</div>，所有样式保持与脚本执行前相同。虽然IE8和IE9只是删除<div id="contentcolumn">...</div>之前的所有html代码（它甚至会覆盖head和body标记。这真是太奇怪了！

这是index.html：

<!DOCTYPE html>
<html>
    <head>
        <title>Vladi Manaev</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/bagums.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    </head>

    <body>
        <div id="maincontainer">

            <div id="topsection">
                <div id="banner"></div>
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container">
                            <nav> 
                                <a class="brand" href="">Bagums.com</a>
                                <ul class="nav">
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Basic Tutorials<b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li><a class="menuOptions" href="BasicTutorials/CTutorial.html" name="CTutorial">C</a></li>
                                            <li><a class="menuOptions" href="BasicTutorials/CppTutorial.html" name="CppTutorial">C++</a></li>
                                            <li><a class="menuOptions" href="BasicTutorials/CsharpTutorial.html" name="CsharpTutorial">C#</a></li>
                                            <li><a class="menuOptions" href="BasicTutorials/JavaTutorial.html" name="JavaTutorial">Java</a></li>
                                            <li><a class="menuOptions" href="BasicTutorials/OtherTutorials.html" name="OtherTutorials">Others</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Projects<b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li><a class="menuOptions" href="MyProjects/CProject.html">C</a></li>
                                            <li><a class="menuOptions" href="MyProjects/CppProject.html">C++</a></li>
                                            <li><a class="menuOptions" href="MyProjects/CsharpProject.html">C#</a></li>
                                            <li><a class="menuOptions" href="MyProjects/JavaProject.html">Java</a></li>
                                            <li><a class="menuOptions" href="MyProjects/Others.html">Others</a></li>
                                        </ul>
                                    </li>

                                </ul>

                                <ul class="nav pull-right">
                                    <li class="dropdown-toggle"><a class="menuOptions" href="OtherPages/Links.html">Links</a></li>   
                                    <li class="dropdown-toggle"><a class="menuOptions" href="OtherPages/Contact.html">Contact</a></li>
                                    <li class="dropdown-toggle"><a class="menuOptions" href="OtherPages/About.html">About</a></li>
                                </ul>
                            </nav>
                        </div> <!-- container -->
                    </div> <!-- navbar-inner -->
                </div><!-- navbar -->
            </div><!-- topsection -->

            <div id="contentwrapper">
                <div id="contentcolumn" title="Vladi Manaev">
                    <div id="mainPostsTitle">Latest News</div>

                    <div class="postWrapper">
                        <div class="post">
                            <div class="postTitle"><div class="postTitleTxt">Third post on website</div></div>
                            <div class="postInfo"> Aug 4, 2012 @ 7:23 pm</div>
                            <div class="postContent">
                                <p>
                                    CONTENT
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="postWrapper">
                        <div class="post">
                            <div class="postTitle"><div class="postTitleTxt">Second post on website</div></div>
                            <div class="postInfo"> Aug 4, 2012 @ 7:22 pm</div>
                            <div class="postContent">
                                <p>
                                     CONTENT
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="postWrapper">
                        <div class="post">
                            <div class="postTitle"><div class="postTitleTxt">First post on website</div></div>
                            <div class="postInfo"> Aug 4, 2012 @ 6:48 pm</div>
                            <div class="postContent">
                                <p>
                                       CONTENT
                                </p>
                            </div>
                        </div>
                    </div>

                </div><!-- contentcolumn -->
            </div><!-- contentwrapper -->

            <div id="footer"> 
                <nav>
                    <div> Copyright &copy; 2012 created by <a class="menuOptions" href="OtherPages/Contact.html"> Vladi Manaev</a></div>
                </nav>
            </div><!-- footer -->

        </div><!-- maincontainer -->

        <!-- Placed at the end of the document so the page load faster -->
        <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
        <script type="text/javascript" src="scripts/bootstrap-dropdown.js"></script>


    <script>
     $(function(){

       var newHash='';
        $contentwrapper = $("#contentwrapper");

        $("nav").delegate(".menuOptions", "click", function() 
        {
            window.location.hash = $(this).attr("href");
            return false;
        });

        $(window).bind('hashchange', function()
        {
            newHash = window.location.hash.substring(1);  
            $contentwrapper.load(newHash + " #contentcolumn");
            setTimeout(TitleUpdater, 200);
        });
     });

     function TitleUpdater()
     {
         top.document.title=$("#contentcolumn").attr("title");
     }

</script>

    </body>
</html>

Answer 1

当我改变我的href以＃开头时这样：

<a class="menuOptions" href="#BasicTutorials/CTutorial.html" name="CTutorial">C</a>

...

它也开始在IE上工作！我的猜测是window.location.hash不适用于IE ...当我添加＆＃34;＃＆＃34;它解决了这个问题。

感谢大家的帮助！

为什么这个JQuery代码不能在IE8和IE9上运行？

1 个答案: