使用HTML和JavaScript的母版页

分享于 

18分钟阅读

Web开发

  繁體

介绍

大多数网站页面分为三个部分: header,页面内容和页脚。 通常,页眉和页脚在网站上的所有页面上都相同,只有页面内容从页面变为页面。 "母版页"允许创建页面 header 和页脚,然后再重复使用。

在 ASP.NET 环境中,母版页定义为从页面到页面的内容的位置持有者。 PHP环境中,header 和footer是使用PHP包含工具在网页上显示的"带入"。 有第三方产品提供了类似于 ASP.NET的母版页工具。 此外,还建议使用全局搜索和替换操作。

我的每种方法都有问题。 PHP不是一个选项。 我使用的IDE是 Visual Studio 2008 Express。 没有内置的PHP支持。 全局搜索和替换是最危险的,因为可能发生意外的结果。 第三方技术要求我进入我的口袋,进行付款。 虽然我使用 ASP.NET 支持 IDE,但我希望网页独立于微软,也就是说,只在HTML和JavaScript中编写。

本文介绍了一种使用HTML和JavaScript构建网站"母版页"的方法。

Background

我想创建的页面有以下形式:

Header Content Footer

在站点中,header 和页脚必须是常量。 不常常是不变的,但是相当常数,它们与网页的网页相同。 例如:

Header Footer Loading

我希望 header 包含以下内容:

  • 如果用户单击 logo,则为站点 logo 和目标页
  • 页面标题
  • 页面副标题
  • 将 header 与内容分离的水平线

Header Example

我希望能够修改页面加载中的页面标题和页面副标题。

我希望页脚包含:

  • 链接到其他网站页面
  • 版权声明

Footer Example

我将使用验证服务验证页面,以将W3C验证 icon 放在页脚中。

Validated Footer Example

我还希望能够完全修改 header 和页脚的内容,独立于页面内容。

使用代码

header 和页脚文本位于位于网站目录树中的文本文件中。 我的网站的相关目录结构是:

GGGustafson
 CSS
 GGGustafson.css
 HeaderFooterContents
 footer_contents.txt
 header_contents.txt
 Images
 favicon.ico
 SiteLogo.png
 ValidXHTML10.png
 Scripts
 add_footer.js
 add_header.js
 IO.js
 place_in_outerHTML.js
 ContactMe.html
 Default.html
 PrivacyPolicy.html

请注意,我在微软 Office Live ( MSOL ) 上托管我的网站。 MSOL希望网页为ASPX页或者HTML页。 对于本文,我将在MasterPage可以下载源代码中使用HTML页面。 但是,如果读取器使用 Visual Studio 生成网站页,则选择ASPX页。 定义新页面后,可以删除 aspx.cs 和 designer.cs 自动生成的页面,这些页面是由 Visual Studio 自动生成的。 还可以将网页扩展从更改为。html ( 答复"。

Rename Dialog Box

注意,标签的action 属性可能没有一个带有 。html的目标的目标。 这就是MasterPage下载源码中ContactMeSuccessful网页具有扩展 。aspx的原因。

header封装在 header_contents.txt 脚本中,由 add_header 脚本访问;页脚位于 footer_contents.txt 文件中,由 add_footer 脚本访问。 在文档加载上,执行了这两个JavaScript脚本:

<bodyonload="add_header('PAGE LOGO',
 'PAGE LOGO TARGET',
 'PAGE HEADER',
 'PAGE SUBHEADER');
 add_footer('PAGE VALIDATION LOGO');">

在前面的示例中,使用伪参数。 在实际的页面中,它们将被实际的参数。 例如在我的网站 Default.html 页面上,我使用:

<bodyonload="add_header('Images/SiteLogo.png',
 'Default.html',
 'Journeys',
 'Welcome');
 add_footer('Images/ValidXHTML10.png');">

要使 add_header 脚本执行完成,必须传递四个参数,并且网页必须包含:

<divid="header"></div>

只要在网页( 通常在 <body> 标签之后) 中显示 header,就放置这个"header" <div>

要使 add_footer 脚本执行完成,网页必须包含:

<divid="footer"></div>

只要页脚出现在网页的( 通常,在所需的<script> 包含标记之前) 中,就会放置"页脚" <div>add_footer 脚本接受一个可选参数。

我将 <script></script> 块放置在页脚 <div> 之后,但在 </body> 标记之前。 为了确保HTML在加载脚本之前完全加载,我将属性 defer="defer" 添加到 <script> 包含块中。 注意,<script> 标记的" defer"属性目前仅由 IE 实现。 我希望其他浏览器将来能实现这个标准属性。

用于实现母版页的<script></script> 块包括:

<scripttype="text/javascript"defer="defer"src="Scripts/place_in_outerHTML.js"></script><scripttype="text/javascript"defer="defer"src="Scripts/IO.js"></script><scripttype="text/javascript"defer="defer"src="Scripts/add_footer.js"></script><scripttype="text/javascript"defer="defer"src="Scripts/add_header.js"></script>

add_header 脚本和 header 内容文件的内容取决于 header 所包含的内容。 我之前提到过我希望我的header 包含。 为这里,我需要四个参数到 add_headeradd_header 脚本的修订版本现在是:

// ******************************************************* add_headerfunction add_header ( site_logo,
 site_logo_target,
 page_header,
 page_subheader )
{
 if ( arguments.length == 4 )
 {
 var document_title = "";
 document_title = page_header;
 document_title += ' - ' + page_subheader;
 document.title = document_title;
 if ( document.getElementById )
 {
 var header = document.getElementById ( 'header' );
 if ( header )
 {
 var header_contents = read_contents ( 
 "HeaderFooterContents/header_contents.txt" );
 if ( header_contents )
 {
 header_contents = header_contents.replace ( 
 '{{SiteLogoTarget}}',
 site_logo_target );
 header_contents = header_contents.replace ( 
 '{{SiteLogo}}',
 site_logo );
 header_contents = header_contents.replace ( 
 '{{PageHeader}}',
 page_header );
 header_contents = header_contents.replace ( 
 '{{PageSubHeader}}',
 page_subheader );
 place_in_outerHTML ( header, header_contents );
 }
 }
 } 
 }
}

注意,在读者的建议下,四个可以替换字段(。例如,SiteLogoTargetSiteLogoPageHeaderPageSubHeader ) 现在包含在分隔符"{{" and"} }"中,消除了更换操作的早期模糊。

如果未提供4 个参数,则脚本将退出。 创建文档标题。 如果找不到带有"header"ID的<div>,则脚本将退出。 然后读取header_contents文本文件的内容。 成功读取文件时,会将各种子字符串替换为它们的新值。 finally,修改后的header 内容代替了的header <div>outerHTML。 对于 header,我使用一个包含以下内容的header 内容文件:

<tableclass="header"cellpadding="0"cellspacing="0"><tr><tdclass="left_column left_header"><ahref="{{SiteLogoTarget}}"><imgalt="Site Logo"src="{{SiteLogo}}"style="height:100px;
 width:89px;"/></a></td><tdclass="center_column center_header"><table><trclass="header_title_subtitle"><td><spanid="header_title">{{PageHeader}}</span></td></tr><trclass="header_title_subtitle"><td><spanid="header_subtitle">{{PageSubHeader}}</span></td></tr></table></td><tdclass="right_column right_header"></td></tr><tr><tdcolspan="3"><hrclass="colored_spacer"/></td></tr></table>

add_footer 脚本和页脚内容文件内容取决于页脚所包含的内容。 我之前提到过我想要我的页脚包含。 为此,我需要一个可选参数 add_footer。 然后修改 add_footer 脚本的版本:

// ******************************************************* add_footerfunction add_footer ( footer_image )
{
 if ( document.getElementById )
 {
 var footer = document.getElementById ( 'footer' );
 if ( footer )
 {
 var footer_contents = read_contents ( 
 "HeaderFooterContents/footer_contents.txt" );
 if ( footer_contents )
 {
 if ( footer_image )
 {
 footer_contents = footer_contents.replace ( 
 '{{FooterImage}}',
 footer_image );
 footer_contents = footer_contents.replace ( 
 '{{DisplayFooterImage}}',
 'block' );
 }
 else {
 footer_contents = footer_contents.replace ( 
 '{{FooterImage}}',
 '' );
 footer_contents = footer_contents.replace ( 
 '{{DisplayFooterImage}}',
 'none' );
 }
 place_in_outerHTML ( footer, footer_contents );
 }
 }
 } 
}

注意,在读者的建议下,这两个可以替换字段(。例如,FooterImageDisplayFooterImage ) 现在包含在分隔符"{{" and"} }"中,消除了更换操作。

如果找不到带有"页脚"ID的<div>,则脚本将退出。 然后读取footer_contents文本文件的内容。 如果文件被成功读取,各种子字符串将被它们的新值。 finally,修改后的页脚内容取代了 <div>outerHTML。 对于页脚,我使用包含以下内容的页脚内容文件:

<tableclass="footer"cellpadding="0"cellspacing="4"><tr><tdclass="left_column"rowspan="2"><imgalt=""src="{{FooterImage}}"style="display:{{DisplayFooterImage}};"/></td><tdclass="center_column footer_first_line"><ahref="ContactMe.html"> Contact Me
 </a> |
 <ahref="PrivacyPolicy.html"> Privacy Policy
 </a></td><tdclass="right_column"></td></tr><tr><tdclass="center_column footer_second_line"> © 2010 G. G. Gustafson, All Rights Reserved 
 </td><tdclass="right_column"></td></tr></table>

add_footeradd_header 脚本分别通过IO脚本访问footer_contents和header_contents文件。

// *************************************************************** IO// http://codingforums.com/showthread.php?t=143412// LA MOD String Version. // A tiny ajax library by DanDavis// Revised 20101006// http://www.quirksmode.org/js/xmlhttp.htmlvar XMLHttpFactories = [
 function ( )
 {
 return ( new XMLHttpRequest ( ) );
 },
 function ( )
 {
 return ( new ActiveXObject ( "Msxml2.XMLHTTP" ) );
 },
 function ( )
 {
 return ( new ActiveXObject ( "Msxml3.XMLHTTP" ) );
 },
 function ( )
 {
 return ( new ActiveXObject ( "Microsoft.XMLHTTP" ) );
 }
 ];// ********************************************** createXMLHTTPObjectfunction createXMLHTTPObject()
{
 var xmlhttp = false;
 for ( var i = 0; ( i <XMLHttpFactories.length ); i++ )
 {
 try {
 xmlhttp = XMLHttpFactories [ i ] ( );
 }
 catch ( e )
 {
 continue;
 }
 break;
 }
 return ( xmlhttp );
}// **************************************************** read_contentsfunction read_contents ( url )
{
 var request = createXMLHTTPObject ( );
 request.open ( 'GET', url, false );
 request.setRequestHeader ( 'Content-Type', 'text/html' );
 request.send ( '' );
 return ( request.responseText );
}

JavaScript IO函数是这个"母版页"范例工作的原因。 没有它,在网页 header 和页脚文本中读取是不可能的。

最后,应该提到 place_in_outerHTML 脚本。

// *********************************************** place_in_outerHTMLfunction place_in_outerHTML ( element, 
 contents )
{
 if ( element.outerHTML )
 {
 element.outerHTML = contents;
 }
 else {
 element.innerHTML = contents; 
 }
}

Firefox 不支持 outerHTML 作为元素属性( 它目前仅在 IE 中可用)。 为了保持浏览器不同于 add_headeradd_footer,我调用 place_in_outerHTML。 这个脚本并不是我想要的,但同样,它可以。 通过将JavaScript放在一个单独的文件中,我可以重新检查代码,也可以能做出更改,而不干扰。

网页模板

每当构建新网页时,我将使用以下模板作为起点:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title></title><linkrel="shortcut icon"media="screen,print"href="Images/favicon.ico"/><linktype="text/css"rel="Stylesheet"media="screen,print"href="CSS/GGGustafson.css"/></head><bodyonload="add_header('PAGE LOGO',
 'PAGE LOGO TARGET',
 'PAGE HEADER',
 'PAGE SUBHEADER');
 add_footer('PAGE VALIDATION LOGO');"><divid="header"></div><tableclass="content"cellpadding="0"cellspacing="0"><tr><tdclass="left_column left_content"></td><tdclass="center_column center_content"></td><tdclass="right_column right_content"></td></tr></table><divid="footer"></div><scripttype="text/javascript"defer="defer"src="Scripts/place_in_outerHTML.js"></script><scripttype="text/javascript"defer="defer"src="Scripts/IO.js"></script><scripttype="text/javascript"defer="defer"src="Scripts/add_footer.js"></script><scripttype="text/javascript"defer="defer"src="Scripts/add_header.js"></script></body></html>

Points of Interest

最重要的是,本文中提供的header。页脚和访问功能是我在网站上使用的,应该修改它们。

我建议你使用网页模板( 或者像这样)。 我发现它节省了我很多时间来构建新的网页。

我使用 <table> 来组织我的网页( 其他人可能会认为 <div>的用途就是这样)。 但是为了获得基于三列文档的百分比效果,我发现 <table>的工作比 <div>的效果好。 当然,也许我还不够精通 <div>的工作。

最后,我强烈建议 header 和页脚的内容最初构建在web页面模板中,代替 header 和页脚 <div>。 模板显示的方式与你希望的方式一致时,将页眉和页脚内容移动到各自的文本文件中,然后重新插入页眉和页脚 <div>的。

引用

  • 使用浏览器JavaScript插件加载和保存文件: 包含IO函数的源代码。
  • XMLHttpRequest函数: 包含 XMLHTTPRequest 工厂的源代码。 这段代码取代了一些简单的加载方法并使用浏览器JavaScript保存文件。

浏览器已经成功测试

Internet ExplorerFirefoxNO Google ChromeOperaSafari

历史记录

  • 1 - 修改后的IO.js,add_header.js 和 add_footer.js,以提高安全性。
  • 11/15/2010 - 修改文章以解决读者的评论和正确的版式和逻辑错误;确保范例能够使用。

相关文章