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

让说，我有如下代码：如何在每个html页面重用html代码？

<!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插件对我来说太难了。这就是为什么我想寻求其他方式来做到这一点。谢谢。

来源

2013-04-06 GMsoF

你可以把你的代码在不同的.html文件，并http://api.jquery.com/load/

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

来源

2013-04-06 15:05:28 Spokey

我一直在寻找到代码的重用，并像jQuery的接近最好的，但是，我有问题应用我的CSS到加载的内容。什么是正确的方法来做到这一点？ – 2015-06-21 18:20:27

这个a.html会被GoogleBot索引好吗？ – walv 2017-09-03 20:01:55

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

E.g.在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表单。

来源

2013-04-06 15:02:51 lifetimes

加载它把所有的可重用代码的HTML文件中，并使用下面的PHP代码调用它的页面：

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

来源

2013-04-06 16:08:24

不要以为他使用'php'，他没有标记它。 – Spokey 2013-04-06 16:14:05

我没有注意到，我会离开我的答案，以防万一...... – 2013-04-06 16:23:30

我得到了答案，我一直在寻找，谢谢user1102285。 – 2017-11-01 08:16:31

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>

来源

2013-09-06 01:15:39 GoalBased

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

回答

相关问题