Question

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

要将上述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中没有显示任何内容。

Answer 1

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

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

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

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

如果您使用--allow-file-access-from-files启动Chrome，也可以强制Chrome允许在Windows上进行本地文件访问，更多信息请参见this stackoverflow question

Answer 2

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

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

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

除了丢失的Doctype之外，没有什么我能看到你提供的最小例子特别错误，所以我猜你可能是这个问题：

如果您没有doctype，浏览器将以Quirks模式呈现页面。并且jQuery不是设计用于怪异模式。

解决方案：将以下行添加到代码顶部并再次尝试：

<!DOCTYPE html>

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

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

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

希望有所帮助。

Answer 3

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

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

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

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

有一些方法可以尝试告诉您的浏览器“不，没关系，我想允许这样......”但是您知道，这已经变得非常困难，因为它经常会默默地打破新的浏览器版本。我经常把我的头撞到墙上，所以我建议你不要试图让你的浏览器按照你要做的那样行。

现在，为什么这会在现场网站上运行？这就是发生的事情。

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

您的浏览器执行javascript。

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

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

要在您的开发机器上运行，您最终有3个选择：

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

2）创建自己的“localhost”Web服务器。然后，您可以使用localhost / index.html等访问您的站点。这足以阻止浏览器关闭您的文件加载请求，因为您正在请求HTTP操作，请注意FILE操作。

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

隐藏的第四选择是使用HTML5文件系统功能，但是对技术的支持很差，我建议你甚至不要尝试 - 你面临的错误纯粹是你的开发机器，所以改变你纯粹用于的技术小的发展便利似乎很愚蠢。

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

我正在使用javascript在另一个html页面中加载一些html页面。它在Mozilla Firefox中运行良好但在Google Chrome和IE10中无法运行

3 个答案: