Fatal编程技术网
  • javascript/
  • Javascript 函数似乎没有加载我正在传递的部分html文件

Javascript 函数似乎没有加载我正在传递的部分html文件

javascript jquery html twitter-bootstrap

Javascript 函数似乎没有加载我正在传递的部分html文件,javascript,jquery,html,twitter-bootstrap,partials,Javascript,Jquery,Html,Twitter Bootstrap,Partials,我试图使用jQuery.load（）函数将一个分部（在本例中是navbar）加载到一个特定的div中（使用我给它的id作为目标）。在开发我正在构建的站点时，我一直在使用Gulp，我设置它的方式非常有效。收割台装载和工作正常，没有问题。我遇到的问题是，如果我试图在本地加载文件而不运行Gulp。大多数元素、CSS、JS执行时都没有问题，根据developer tools network选项卡，jQuery CDN加载良好，但是没有找到包含我试图传递到.load（）函数的Navbar部分的html文件

我试图使用jQuery.load（）函数将一个分部（在本例中是navbar）加载到一个特定的div中（使用我给它的id作为目标）。在开发我正在构建的站点时，我一直在使用Gulp，我设置它的方式非常有效。收割台装载和工作正常，没有问题。我遇到的问题是，如果我试图在本地加载文件而不运行Gulp。大多数元素、CSS、JS执行时都没有问题，根据developer tools network选项卡，jQuery CDN加载良好，但是没有找到包含我试图传递到.load（）函数的Navbar部分的html文件。我尝试过更改特定脚本标记的位置、更改文件名等，但似乎没有任何效果

 <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>STHR | NEWS</title>
      <link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" href="./css/main.css">
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">     </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
    $(function(){
      $('#header').load('../_header.html');
      $('#footer').load('../_footer.html');
    });
  </script>
</head>
<body>
  <div id="header"></div>`


STHR |新闻
$（函数（）{
$（'#header'）.load（'../_header.html'）；
$（'#footer'）.load（'../_footer.html'）；
});
`
我在控制台中遇到以下两个错误：

 <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>STHR | NEWS</title>
      <link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" href="./css/main.css">
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">     </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
    $(function(){
      $('#header').load('../_header.html');
      $('#footer').load('../_footer.html');
    });
  </script>
</head>
<body>
  <div id="header"></div>`
bootstrap.min.js:6未捕获错误：bootstrap的JavaScript需要jQuery（匿名函数）@bootstrap.min.js:6

 <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>STHR | NEWS</title>
      <link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" href="./css/main.css">
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">     </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
    $(function(){
      $('#header').load('../_header.html');
      $('#footer').load('../_footer.html');
    });
  </script>
</head>
<body>
  <div id="header"></div>`
jquery.min.js:4 XMLHttpRequest无法加载file:///Users/andrewpohl/personal_websites/STHR/_header.html. 跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https、chrome扩展资源

 <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>STHR | NEWS</title>
      <link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" href="./css/main.css">
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">     </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
    $(function(){
      $('#header').load('../_header.html');
      $('#footer').load('../_footer.html');
    });
  </script>
</head>
<body>
  <div id="header"></div>`
更新：我对XMLHttpRequest的错误做了进一步的研究，显然，如果您没有通过本地服务器运行文件，这将成为一个问题。我没有意识到这个问题，只是通过命令行将文件直接打开到浏览器，而没有设置简单的服务器。当我开始使用一个简单的Python服务器时，我注意到头部开始加载，而没有使用gulp。

使用ready函数来完成此操作

 <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>STHR | NEWS</title>
      <link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" href="./css/main.css">
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">     </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
    $(function(){
      $('#header').load('../_header.html');
      $('#footer').load('../_footer.html');
    });
  </script>
</head>
<body>
  <div id="header"></div>`

<script type="text/javascript">
   jQuery(document).ready(function(){
      jQuery("#header").load("");
      jQuery("#footer").load("");
   });
</script>


jQuery（文档）.ready（函数（）{
jQuery（“#header”）.load（“”）；
jQuery（“#footer”）.load（“”）；
});
您必须告诉JQuery等待DOM加载，然后才能对其进行操作。在
标记的末尾，DOM中仍然没有加载
#头。
欢迎使用堆栈溢出！请拍摄，环顾四周，并通读，特别是不要张贴代码/标记的图片。发布代码/标记。展示你的尝试。说出它做了什么，以及你期望它做什么。注意控制台中的任何错误（如果没有，请注意您已经查看了，并且没有错误）。感谢您的回复和提供的信息。我不得不问，为什么没有代码标记的图片？不能搜索，不能复制和粘贴，在不同的屏幕尺寸上很难阅读，如果你的颜色感觉“不同”，很难阅读，…很酷，这完全有道理。谢谢你为什么人们对这个问题投反对票？“你必须告诉JQuery等待DOM加载，然后才能对它采取行动。”不，你不必这么做。你可以把你的
脚本
标记放在
正文
的末尾，就在结束的
标记之前，这主要是它们所属的地方。我已经尝试过将.load函数包装在.ready函数中，也尝试过将脚本标记放在标记的前面，但都不是workT.J。我知道这一点，但如果您不在生产环境中，我倾向于认为这是一个不雅观的（思考更快的）解决方案。打开一个webconsole并尝试手动加载它。
$.load（'../\u header.html'）
是否返回正确的代码段？我尝试在控制台中运行该代码段，但它没有做任何事情

 <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>STHR | NEWS</title>
      <link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" href="./css/main.css">
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">     </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
    $(function(){
      $('#header').load('../_header.html');
      $('#footer').load('../_footer.html');
    });
  </script>
</head>
<body>
  <div id="header"></div>`