jQuery 如何在每个 html 页面中重用 html 代码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15852401/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reuse the html code in every html page?
提问by GMsoF
Let say I have the code as below:
假设我有如下代码：
<!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>
This is a popup dialog example. Let say I want to use this dialog in all my webpages (a.html, b.html, c.html and etc), what is the best and easiest way to make the code above to be reusable? Because I think that to copy paste the 'overlay_form' into every html pages is not reasonable.
这是一个弹出对话框示例。假设我想在我所有的网页（a.html、b.html、c.html 等）中使用这个对话框，使上述代码可重用的最佳和最简单的方法是什么？因为我认为将 'overlay_form' 复制粘贴到每个 html 页面是不合理的。
I am still at the beginning level in Javascript, so to create a jQuery plugin for this is too hard for me. That's why I would like to seek for other ways to do it. Thanks.
我仍然处于 Javascript 的初级水平，因此为此创建一个 jQuery 插件对我来说太难了。这就是为什么我想寻找其他方法来做到这一点。谢谢。
回答by Spokey
You could put your code in a different .htmlfile and load it with .load()http://api.jquery.com/load/
您可以将代码放在不同的.html文件中并使用http://api.jquery.com/load/加载它.load()
$('#targetid').load('somewhere/a.html'); // loads the .html in the #targetid
回答by dsgriffin
Best practice if you want to re-use the code multiple times is to place all your jQuery code into an external .jsfile, place all your CSS into an external style sheet, and reference those files from each page.
如果您想多次重用代码，最佳做法是将所有 jQuery 代码放入一个外部.js文件，将所有 CSS 放入一个外部样式表，然后从每个页面引用这些文件。
E.g. for the CSS, in a file named style.css:
例如，对于 CSS，在名为 的文件中style.css：
<link rel="stylesheet" type="text/css" href="style.css">
and for the jQuery in a file named jQueryFunctions.js:
对于名为 的文件中的 jQuery jQueryFunctions.js：
<script type="text/javascript" src="jQueryFunctions.js"></script>
In regard to including the same HTML code on different pages, one of the simplest ways I can think of would be to use the PHP include()function. Here's a very simple one-page tutorialon re-using HTML forms on multiple pages using it.
关于在不同页面上包含相同的 HTML 代码，我能想到的最简单的方法之一是使用 PHP 的include()函数。这是一个非常简单的单页教程，用于在使用它的多个页面上重用 HTML 表单。
回答by dsgriffin
put all of your reusable code in a html document and call it to the page using the following php code:
将所有可重用代码放在一个 html 文档中，并使用以下 php 代码将其调用到页面：
<?php include("example.html") ?>
回答by GoalBased
Modest HTMLdoes this.
适度的 HTML 就是这样做的。
It looks like this:
它看起来像这样：
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
覆盖窗体.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>
