Question

我尝试使用以下代码将名为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的“网络”选项卡中看到404错误：

我做错了什么？

Answer 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>

navigationBar.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>

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

1 个答案: