HTML導入產生404錯誤（找不到頁面）

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 個解決方案

解決方案1
0 2018-03-11 09:17:23

HTML導入產生404錯誤（找不到頁面）

問題描述

1 個解決方案

解決方案1 0 2018-03-11 09:17:23

解決方案1
0 2018-03-11 09:17:23