使用 jQuery .load 加载外部 html 文件时遇到问题答案

【问题标题】：Trouble loading external html file with jQuery .load使用 jQuery .load 加载外部 html 文件时遇到问题
【发布时间】：2013-07-10 00:26:59
【问题描述】：

我正在尝试在一个简单页面上动态加载内容。我想淡入我正在尝试链接的 content.html，然后我点击的任何其他链接都会从 content.html 加载一个 div 并淡入。我想我用.load("html.html #section"); 来做这个，但这是尽可能我得到了。

这是我的<head>

    <!-- JQUERY -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <!-- SCRIPTS -->
    <script type="text/javascript">
    $(document).ready(function(){
        // $(".content").load("content.html");
        // $(".content").fadeIn(800);
        $(".menu ul li a").click(function(){
            $(".content").load("content.html");
        });
    });
</script>

我试图加载内容 div 的正文页面

<body>
    <div class="wrapper">
        <div class="gradient">
            <div class="header">
                <div class="nav">
                    <div class="logo">
                        <strong>
                            <a href="index.html">
                                <img src="images/logo.png" alt="Sam Jarvis logo"/>
                            </a>
                        </strong>
                    </div>
                    <div class="menu">
                        <ul>
                            <li><a href="#home">HOME</a></li>
                            <li><a href="#about">ABOUT</a></li>
                            <li><a href="#work">PORTFOLIO</a></li>
                            <li><a href="#clients">CONTACT</a></li>
                        </ul>
                    </div>  
                </div>
            </div>
            <div class="content">

            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footerText">    
            <div class="footerCopyright">
                <p>© 2013 Sam Jarvis | Design and Development. All Rights Reserved.</p>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="#home">HOME</a></li>
                    <li><a href="#about">ABOUT</a></li>
                    <li><a href="#work">PORTFOLIO</a></li>
                    <li><a href="#clients">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </div>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>

控制台说

OPTIONS file://localhost/Users/eveo/Projects/Sites/Sam/content.html Origin null is not allowed by Access-Control-Allow-Origin. jquery.min.js:6
send jquery.min.js:6
x.extend.ajax jquery.min.js:6
x.fn.load jquery.min.js:6
(anonymous function) index.html:21
x.event.dispatch jquery.min.js:5
v.handle jquery.min.js:5
XMLHttpRequest cannot load file://localhost/Users/eveo/Projects/Sites/Sam/content.html. Origin null is not allowed by Access-Control-Allow-Origin. index.html:1

【问题讨论】：

你的控制台说什么？
应该可以，有什么问题？
不知道，发布了控制台日志，但我仍然不确定:(
你正在刷新页面吗？
您的请求似乎来自file://localhost，而不是http://localhost。从网络服务器工作，你不会有这个问题。 XAMP、WAMP 等

标签： jquery load

【解决方案1】：

$(document).ready(function(){
     $(".menu ul li a").click(function(e){
            e.preventDefault();
            $(".content").load("content.html",function() {
                $(".content").fadeIn(800);
            });
      });
});

如果您从链接动态加载以防止任何可能的页面刷新，请始终使用preventDefault()。此外，您可以使用.load() 回调到.fadeIn() 内容。当然，如果您尝试从文件系统加载 HTML 内容，这一切都是徒劳的。

【讨论】：

您好，感谢您编辑回复，我会采取更先进的方法。