Question

我正在使用twitter bootstrap，现在我想为所有链接的网页设置公共标题。在这里，我给你我的主页和标题代码。我在jquery中使用了load（）函数，但它没有工作。你可以帮我解决这个问题。

我的代码在这里，

home.html

<html>
<head>

<link rel="shortcut icon" href="../resources/images/favicon.ico" />
<title>Welcome to Ringee</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- External Css File -->

<link rel="stylesheet" type="text/css" href="../resources/css/home.css">

<!-- Css file Ends -->

<!-- Bootstrap Plugins -->

<link rel="stylesheet"
    href="..\resources\plugin\bootstrap-3.3.5-dist\css\bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
    src="..\resources\plugin\bootstrap-3.3.5-dist\js\bootstrap.min.js"></script>

<!-- Bootstrap Plugins Ends Here -->
<!-- font awesome plugin -->

<link rel="stylesheet"
    href="../resources/plugin/font-awesome-4.4.0/css/font-awesome.css" />

<!-- Ends -->

<!-- css mega menu plugins -->

<link rel="stylesheet"
    href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet"
    href="http://getbootstrap.com/docs-assets/css/docs.css">
<link rel="stylesheet"
    href="../resources/plugin/jQuery-Plugin-For-Auto-Hiding-Navigation-Menu-showup/showup.css">

<!-- css mega menu Ends here -->

<!-- Scripts mega menu -->

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script
    src="..resources/plugin/jQuery-Plugin-For-Auto-Hiding-Navigation-Menu-showup/showup.js"></script>
<script>
    $("button").click(function() {
        $(".bs-navbar-collapse").toggle();
    });
</script>

<!--<script>

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("header").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "E:\WEB-INF\pages\header.txt", true);
  xhttp.send();

</script>-->
<script>
$(document).ready(function(){
$("#header").load("E:\WEB-INF\pages\header.html");
});
</script>


<!-- script ends here -->
</head>
<body>
    <div class="container">

       <!-- Header Section -->

        <div id="header"></div>

        <!-- body section starts here -->

        <div class="col-xs-12 background font-family">

            <!-- image and video section -->

            <div class="row">
                <div class="col-sm-3">
                    <div class="row">
                        <img
                            src="../resources/images/redmi-mobile.png"
                            class="img-responsive img-spacing" width="200px" height="300px">
                    </div>
                    <div class="row">
                        <a href="#"
                            class="btn btn-success btn-lg pull-left button-space"
                            style="margin-bottom: 20px">
                            Download App <span class="fa fa-download"></span>
                        </a>
                    </div>
                </div>

                <div class="col-sm-8 col-xs-12 pull-right space">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" width="600px" height="420px"
                            src="http://www.youtube.com/embed/93isFZYI8Fo"></iframe>
                    </div>
                </div>
            </div>

            <!-- image and video section closing -->
   .....
   .....

header.html

<!-- Header Section -->

        <nav class="navbar navbar-default ">

            <!-- header -->

            <div class="navbar-header pull-right">
                <div class="row-fluid">

                    <a class="navbar-brand" href="#"><span><img
                            src="../resources/images/Ringee-logo.png"
                            class="image-responsive" width="50px" height="50px"/ > <img
                            src="../resources/images/Ringee-name.png"
                            class="image-responsive" width="90px" height="30px"/ ></span> </a>
                    <button class="navbar-toggle pull-right" style="margin-top: 10%"
                        type="button" data-toggle="collapse"
                        data-target=".bs-navbar-collapse">
                        <span class="sr-only">Toggle navigation</span> <span
                            class="icon-bar"></span> <span class="icon-bar"></span> <span
                            class="icon-bar"></span>
                    </button>
                </div>
            </div>

            <!-- header ends -->

            <!-- list starts here -->

            <div class="pull-left">

                <ul
                    class="nav navbar-nav bs-navbar-collapse collapse navbar-collapse pull-left">
                    <li><a href="home.html" class="activePage">Home</a></li>
                    <li class=""><a href="FAQ.html">FAQ</a></li>
                    <li class="section"><a href="blog.html">Blog</a></li>
                    <li class="section"><a href="contact.html">Contact</a></li>
                </ul>
            </div>

            <!-- list ends here -->

        </nav>


        <!-- Header Section Ends-->

Answer 1

试试这个js功能

function loadPage(href)
        {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET", href, false);
            xmlhttp.send();
            return xmlhttp.responseText;
        }

然后使用div函数

在loadPage中加载文件

<div id="header" onload="document.getElementById('header').innerHTML = loadPage(E:\WEB-INF\pages\header.html)"></div>

或您可以使用javascript加载该文件

document.getElementById('header').innerHTML = loadPage(E:\WEB-INF\pages\header.html)

<强>的jQuery

如果你对jquery更熟悉

$("#header").innerHTML = loadPage(E:\WEB-INF\pages\header.html)

使用bootstrap的所有网页的公共标题

1 个答案: