如何在每个 html 页面中重用 html 代码？答案

【问题标题】：How to reuse the html code in every html page?如何在每个 html 页面中重用 html 代码？
【发布时间】：2013-09-06 12:32:37
【问题描述】：

假设我的代码如下：

<!DOCTYPE HTML>
<html>
<head>
<style>
#overlay_form{
    position: absolute;
    border: 5px solid gray;
    padding: 10px;
    background: white;
    width: 270px;
    height: 190px;
}
#pop{
    display: block;
    border: 1px solid gray;
    width: 65px;
    text-align: center;
    padding: 6px;
    border-radius: 5px;
    text-decoration: none;
    margin: 0 auto;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    //open popup
    $("#pop").click(function(){
        $("#overlay_form").fadeIn(1000);
        positionPopup();
    });

    //close popup
    $("#close").click(function(){
        $("#overlay_form").fadeOut(500);
    });
});

//position the popup at the center of the page
function positionPopup(){
    if(!$("#overlay_form").is(':visible')){
        return;
    }
    $("#overlay_form").css({
        left: ($(window).width() - $('#overlay_form').width()) / 2,
        top: ($(window).width() - $('#overlay_form').width()) / 7,
        position:'absolute'
    });
}

//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);

</script>
</head>
<body>

<a href="#" id="pop" >PopUp</a>
<br />
<form id="overlay_form" style="display:none">
<h2> Put your contents here..</h2>
<label>Username: </label><input type="text" name="username" /><br /><br />
<label>Password: </label><input type="text" name="password" /><br /><br />
<input type="button" value="Login" />
<a href="#" id="close" >Close</a>
</form>


</body>
</html>

这是一个弹出对话框示例。假设我想在我的所有网页（a.html、b.html、c.html 等）中使用此对话框，使上述代码可重用的最佳和最简单的方法是什么？因为我认为将“overlay_form”复制粘贴到每个 html 页面中是不合理的。

我还处于 Javascript 的初级阶段，所以为此创建一个 jQuery 插件对我来说太难了。这就是为什么我想寻求其他方法来做到这一点。谢谢。

【问题讨论】：

标签： jquery html css

【解决方案1】：

您可以将您的代码放在不同的 .html 文件中并使用 .load() http://api.jquery.com/load/ 加载它

$('#targetid').load('somewhere/a.html'); // loads the .html in the #targetid

【讨论】：

我一直在研究代码重用，并且最喜欢 jQuery 方法，但是，我在将我的 css 应用于加载的内容时遇到了问题。这样做的正确方法是什么？
此 a.html 将如何被 GoogleBot 索引？

【解决方案2】：

如果您想多次重复使用代码，最佳做法是将所有 jQuery 代码放入外部 .js 文件中，将所有 CSS 放入外部样式表中，然后从每个页面引用这些文件。

例如对于 CSS，在名为 style.css 的文件中：

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

对于 jQuery，在一个名为 jQueryFunctions.js 的文件中：

<script type="text/javascript" src="jQueryFunctions.js"></script>

关于在不同页面上包含相同的 HTML 代码，我能想到的最简单的方法之一是使用 PHP include() 函数。 Here's a very simple one-page tutorial 在使用它的多个页面上重用 HTML 表单。

【讨论】：

【解决方案3】：

将所有可重用的代码放在一个 html 文档中，并使用以下 php 代码将其调用到页面：

<?php include("example.html") ?>

【讨论】：

别以为他在用php，他没有标记。
我得到了我想要的答案，谢谢 user1102285。

【解决方案4】：

Modest HTML 会这样做。

看起来像这样：

main.xhtml

<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <include>overlayForm</include>
  </head>
  <body>
    <overlayForm/>
  </body>
</html>

overlayForm.xml

<form style="display:none">
  <h2> Put your contents here..</h2>
  <label>Username: </label><input type="text" name="username" /><br /><br />
  <label>Password: </label><input type="text" name="password" /><br /><br />
  <input type="button" value="Login" />
  <a href="#" id="close" >Close</a>
</form>

【讨论】：