页面标题为单独包含在多个页面中的html文件时，在header中显示页面标题

Question

我创建了一个带有侧边菜单的顶部栏，以便在多个页面中导航。我想根据加载的页面在此顶部栏中显示页面标题。这是我的顶栏：

function openNav() {
    document.getElementById("mySidepanel").style.width = "280px";
}

function closeNav() {
    document.getElementById("mySidepanel").style.width = "0";
}

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
    dropdown[i].addEventListener("click", function() {
	    this.classList.toggle("active");
	    var dropdownContent = this.nextElementSibling;
	    if (dropdownContent.style.display === "block") {
	        dropdownContent.style.display = "none";
	    } else {
	        dropdownContent.style.display = "block";
	    }
	});
}

body,html{
	padding:0;margin:0;
	background-color:#F4F4F4;
}

#wrapper-header{
	color:white;
    font-size: 28px;
	float:left;
	width:105%;
	height:65px;
	background-color:#2E2D30;
}

#main-header{
	position:relative;
	width:1200px;
	left:50%;
	margin-left:-580px;
	height:auto;
}

.page-title{
	position: absolute;
    height: 20px;
    left: 25%;
    top: 45%;
    transform: translate(-50%, -50%);
}

.sidepanel {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #111;
	font-family: 'Times New Roman', Times, serif;
	overflow-x: hidden;
	padding-top: 60px;
	transition: 0.5s; 
  }
  
  .sidepanel a, .dropdown-btn {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	color: #818181;
	display: block;
	border: none;
    background: none;
	transition: 0.3s;
	outline: none;
	font-family: 'Times New Roman', Times, serif;
  }
  
  .sidepanel a:hover, .dropdown-btn:hover {
	color: #f1f1f1;
  }
  
  .sidepanel .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
  }
  
  .openbtn {
	font-size: 20px;
	cursor: pointer;
	background-color: #2E2D30;
	color: white;
	padding: 10px 15px;
	border: none;
	transform: scale(1.6);
  }
  
  .openbtn:hover {
	background-color: rgb(53, 53, 53);
  }

.dropdown-container {
	display: none;
	background-color: #262626;
	padding-left: 8px;
	font-family: 'Times New Roman', Times, serif;
  }
  
  .fa-caret-down {
	margin-left: 18px;
	float: right;
	padding-right: 2px;
  }

<div id="wrapper-header">
	<div id="main-header" class="object">
		<button class="openbtn" onclick="openNav()">&#9776;</button>
		<div class="page-title">PAGE TITLE</div>
    </div>
</div>

<!-- NAVBAR -->

<div id="mySidepanel" class="sidepanel">
	<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
	<a href="#">Recientes</a>
	<button class="dropdown-btn">Para empezar
    	<i class="fa fa-caret-down"></i>
    </button>
	<div class="dropdown-container">
		<a href="#">Nivel 1-5</a>
    	<a href="#">Nivel 6-10</a>
		<a href="#">Nivel 11-15</a>
	</div>
	<a href="#">Arreglos</a>
</div>

所以基本上它会在带有“page-title”类的元素中显示页面标题。到目前为止，我一直在避免使用 php，因为它是一个静态网页，并且我在本地托管它。这就是为什么我使用 jquery 而不是 php 或任何其他服务器端方法在多个页面中包含 html 文件的原因。

Answer 1

参考这个answer，它正在解决同样的情况（在其他文件中重用一个html文件）。

您可以使用 jQuery

轻松完成

---

更新答案

只需将此功能添加到您的页面：

function setPageName(pageName) {
  var title = $('.page-title');
  title.text(pageName);
}

并确保在将其他 html 文件加载到此页面后运行它。 [Repl.it Link]