Question

我有这个引导模板：http://wrapbootstrap.com/preview/WB0412697

我已将index.html中的标题部分删除，并将其放入其自己的名为header.html的文件中。

我已尝试使用位于这些堆栈溢出页面上的JQuery技术，并且无法在index.html中获取呈现header.html的页面： - Make header and footer files to be included in multiple html pages，Common Header / Footer with static HTML和Include another HTML file in a HTML file

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->  
<head>
<title> Welcome...</title>

<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">

<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">

<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">  
<link rel="stylesheet" href="assets/plugins/parallax-slider/css/parallax-slider.css">

<!-- CSS Theme -->    
<link rel="stylesheet" href="assets/css/theme-colors/default.css">

<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
</head> 

<body>
<div class="wrapper">
<!--=== Header ===-->    

<!--=== End Header ===-->

在标题和结尾标题之间，我尝试过：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(function(){
$("#header").load("header.html"); 

});
</script>

以及上述链接中的其他示例以及。我也尝试过：

<!--#include virtual="insertthisfile.html" -->

如果有效的话会非常好，因为它看起来非常简单并且

<?php include("filename.html"); ?>

但是在将.html文件更改为.php后，我的浏览器只会呈现纯文本。

有什么建议吗？我做错了什么？

Answer 1

你可以制作一个像这样的php文件。我希望你希望<head>保持不变

<?php
$header = file_get_contents('header.html');
$main = file_get_contents('main.html');
$footer = file_get_contents('footer.html');
echo $header;
echo $main;
echo $footer;
?>

然后您可以根据$_GET使用if语句

选择不同的主要内容文件

<?php
$header = file_get_contents('header.html');

if($_GET['page'] == 'home'){
   $main = file_get_contents('home.html');
}
else if ($_GET['page'] == 'contact'){
   $main = file_get_contents('contact.html');
}

$footer = file_get_contents('footer.html');
echo $header;
echo $main;
echo $footer;
?>

Answer 2

第一步：为页脚和标题创建div

        <!DOCTYPE html>
        <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
        <!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
        <!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->  
        <head>
        <title> Welcome...</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- Meta -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Favicon -->
        <link rel="shortcut icon" href="favicon.ico">

        <!-- CSS Global Compulsory -->
        <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/style.css">

        <!-- CSS Implementing Plugins -->
        <link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
        <link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">  
        <link rel="stylesheet" href="assets/plugins/parallax-slider/css/parallax-slider.css">

        <!-- CSS Theme -->    
        <link rel="stylesheet" href="assets/css/theme-colors/default.css">

        <!-- CSS Customization -->
        <link rel="stylesheet" href="assets/css/custom.css">
    <script type="text/javascript"> 
                $(function () {
                $.get("header.html", function (respons) {
                    var header1 = respons;
                    $("body").append(header1);
                });
            });
    </script>
        </head> 

        <body>
</body>
</html>

Answer 3

只使用PHP代码：

<?php 

 // Include file with header
      include("./include/header.php"); 


 // This bit always includs to the "center" Call page file via URL
      if (isset($_GET['page'])){
      $file=$_GET['page'];
      $file2= dirname($_SERVER['SCRIPT_FILENAME'])."/".$file.".php";
           if(file_exists($file2)){
                if(substr_count($file,"../")>0){
                          echo "Warning!";
                          }elseif($file=="index" or $file=="/index"){
                                    echo "Warning!";         
                          }else{
                               include $file2;
                          }
                }else{
                     include "./include/404.php";
                }
      }else{
           include "uvod.php";
      }


 // Include file with footer
      include("./include/footer.php");

?>

包含header.html以包含多个html页面

3 个答案: