如何将 <div> 从不同的文件加载到我的页面中

Question

我希望我的页面有一个导航菜单，但我不想每次更新它时都将它复制并粘贴到每个网页，所以我试图将它放在一个单独的文件中并加载它进入 div

Answer 1

在jQuery中你可以使用.load( url [, data ] [, complete ] )函数。
For more detail click here

Answer 2

<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="content.html"></div> 

<script>
w3IncludeHTML();
</script>

</body>
</html>

或PHP:

<html>
<body>

<div class="menu">
<?php include 'menu.php';?>
</div>

<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>

</body>
</html>

还有其他方法，我只列出了两个。

Answer 3

正如您所描述的，您不想加载整个页面，而只想从中加载一个 div。据我所知，普通的 javascript 是不可能的。因此，我建议将此 div 放在单独的 html 文件中（我们称之为 common.html），然后将其加载到每个页面中。这可以通过以下方式实现：

document.getElementById("placeholder").innerHTML='<object type="text/html" data="common.html" ></object>';

Answer 4

最简单的方法是创建一个 php 文件并在其中插入您的代码。

例如：

在您的主文件中插入：

<div class="container">
<?php require 'example.php';?>
</div>

在您的 "example.php" 文件中插入：

<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>

如何将 <div> 从不同的文件加载到我的页面中

How can I load a <div> from a different file into my page

html

css

resources

external