1

我为下拉菜单编写了代码，并希望将该代码插入其他 html 文件中。下拉菜单代码。

http://jsfiddle.net/techspartan/49Bpb/

为了将上述 HTML 代码插入到其他 HTML 文件中，我使用了以下代码：

  <html>
     <head>
       <script src="jquery-2.0.3.js"></script>
       <script type="text/javascript">
         $(document).ready(function(){
           $('#topdiv').load('index.html');
         });
       </script>
     </head>

    <body>
     <div id="topdiv">
     </div>
    </body>
 </html>

基本上我想在一个位置声明我的 DropDownMenu 代码，这样如果我对菜单代码进行更改，我就不必编辑每个具有 DropDown 的 HTML 文件。

上面的代码在 Firefox 中运行，但在 Chrome 和 IE-10 中没有显示。

4

3 回答 3

3

您是否在您的机器上本地工作，没有任何网络服务器？Chrome 不允许通过 AJAX 从您的文件系统加载文件（请参阅错误报告）。

您可以使用 XAMPP 或类似的东西通过本地网络服务器提供您的文件。

如果您在 Windows 上，XAMPP 可能是启动和运行本地网络服务器的最简单方法：http: //www.apachefriends.org/en/xampp.html

在 Mac 上，您也可以使用 MAMP http://www.mamp.info/en/index.html

如果您使用 Chrome 启动它，您也可以强制 Chrome 允许在 Windows 上访问本地文件，此 stackoverflow 问题--allow-file-access-from-files中的更多信息

于 2013-11-07T16:43:21.733 回答
1

对于它的价值，我有jQuery().load()用于将内容注入页面的代码，它工作得很好。

如果这是作为页面标准部分的静态内容，那么在服务器上执行此操作的其他答案/评论可能是正确的；像这样的东西通常最好包含在服务器上，因为它会使您的网站比通过 Javascript 在页面加载时执行得更好。（事实上​​，以这种方式加载静态菜单可能会在用户加载页面时给您的网站带来明显的性能问题；请注意！）。

然而，一般来说，使用 Javascript 向页面动态添加内容的技术是完全有效的，并且是常用的，所以我将基于此来回答这个问题。

除了缺少 Doctype 之外，我看不出您提供的最小示例有什么特别错误，所以我猜这可能是您的问题：

如果您没有 doctype，浏览器将以 Quirks 模式呈现页面。并且 jQuery 不是为在怪癖模式下工作而设计的。

解决方案：将以下行添加到代码顶部，然后重试：

<!DOCTYPE html>

您可能还想检查 IE 是否也没有在兼容模式下显示您的页面，因为这也可能导致问题。如果是，您还可以将 X-UA-Compatible 元标记添加到页面<head>部分，以强制 IE 进入标准模式：

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

最后，如果您需要支持 IE8 或更早版本，您应该从 jQuery v2 切换回最新版本的 jQuery v1（当前为 1.10.2），因为 jQuery v2 不适用于 IE8 或更早版本。

希望有帮助。

于 2013-11-07T16:59:25.237 回答
1

您遇到的问题不是由于您的代码有任何问题，而是由于现代浏览器的安全策略。以下是您的开发机器上发生的情况：

您的浏览器会加载您的本地 HTML 文件。

您的浏览器执行 javascript，它会尝试访问您机器上的文件。

你的浏览器说：“不！” 因为这是一个巨大的安全错误 - 如果没有此政策，网站可能会读取您硬盘上的每个文件或将您的任何私人信息的副本静默发送到他们的服务器，这仅仅是因为您访问了启用了 javascript 的网站。坏的！

有一些方法可以告诉你的浏览器“不，没关系，我想允许这个......”......但是你知道，这变得非常困难，因为它经常默默地被新的浏览器版本打破。我经常把头撞到墙上，所以我可能会建议你跳过尝试让你的浏览器对你正在尝试做的事情正常。

现在，为什么这在实时站点上有效？这就是发生的事情。

您的浏览器会加载一个网站。

您的浏览器执行 javascript。

该脚本要求从网站加载/访问文件。

你的浏览器说......“好吧，我们已经在这个网站上，所以确定！从那个网络服务器加载你想要的所有文件！” 您的浏览器会友好地获取文件，并将其返回到您的脚本中，您可以在其中轻松地将 HTML 包含到您心中的内容中。

要在您的开发机器上完成这项工作，您最终有 3 个选择：

1) 将文件上传到 Web 服务器，然后在那里进行测试。

2) 制作您自己的“本地主机”网络服务器。然后，您可以使用 localhost/index.html 等内容访问您的站点。这足以防止浏览器关闭您的文件加载请求，因为您正在请求 HTTP 操作，请注意 FILE 操作。

3) 尝试强制您的浏览器允许这些请求。细节因浏览器而异，有些浏览器根本不允许你这样做，我自己已经放弃了。

隐藏的第四个选择是使用 HTML5 文件系统功能，但对技术的支持如此差，我建议你甚至不要尝试 - 你面临的错误纯粹是你的开发机器，所以改变你正在使用的技术纯粹是为了一个小的开发方便似乎很傻。

Severin 提供了优秀的 XAMPP 和 MAMP 软件包的链接，这是让自己成为一个好的开发 localhost 服务器的最简单方法。

于 2013-11-07T17:32:31.067 回答