HTML 导入产生 404 错误（找不到页面）答案

【问题标题】：HTML Import produces 404 error (page not found)HTML 导入产生 404 错误（找不到页面）
【发布时间】：2018-08-19 11:03:15
【问题描述】：

我尝试使用以下代码将名为 navigationBar.html 的文件导入到我的主文档中：

<head>
    <link rel="import" href="navigationBar.html">
</head>
<body>
<script>
    var link = document.querySelector('link[rel=import]');
    var content = link.import.querySelector('#idBar');
    document.body.appendChild(content.cloneNode(true));
</script>
</body>

两个文件都在同一个目录中，但我在 DevTools 的 Network 选项卡中看到 404 错误：

我做错了什么？

【问题讨论】：

标签： html import http-status-code-404

【解决方案1】：

我认为在这种情况下使用 PHP 很好。将您的 .html 扩展名更改为 .php，然后尝试 MainPage.php 和 navigationBar.php

我不知道您的代码。这只是一个例子。只需将 MainPage 和 navigationBar .html 扩展名更改为 .php 并将 navigationBar.php 包含到 MainPage.php 文件中。

MainPage.php

<html>

<head>

<title> Main Page </title>

<?php
include("navigationBar.php") // Add your navigatonbar file name here
?>

<body>

Web Site contenet.

</body>

</html>

导航栏.php

<html>

<head>

<style>

.navbar /* Design Of The Nav */
{
  padding-top: 18px;
  padding-bottom: 18px;
  background: #002248;
  margin-bottom: 0;
  margin-left: -10;
  margin-right: -10;
  margin-top: 0;
  border-bottom: 3px solid yellow;
  border-top: 3px solid yellow;
}

</style>

</head>

<body>

<nav class="navbar navbar-default">

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">

        <li><a href="index.php" class="BorderRight">Home</a></li>

        <li class="dropdown">
          <a href="#" class="BorderRight" class="dropdown-toggle" data-toggle="dropdown">About Us <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Vision</a></li>
            <li><a href="#">Mission</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="Articles.php">News</a></li>
          </ul>
        </li>

      </ul>

    </div><!-- /.navbar-collapse -->

</nav>

<script>

//make menus drop automatically
    $('ul.nav li.dropdown').hover(function() {
        $('.dropdown-menu', this).fadeIn();
    }, function() {
        $('.dropdown-menu', this).fadeOut('fast');
    });//hover

</script>

</body>
</html>

【讨论】：