在html页面中包含共享页面的方法


Posted in Javascript onOctober 24, 2008

How do I include one HTML file inside another?
It's very common practice to have a consistent theme on a web site. You might have a standard navigation bar or a logo or even just a page footer with copyright and administrative information. Rather than actually having that information on each and every page it would certainly be nice if you could write your navigation bar once, keep it in one file, and then reference that file in each of several different pages. Make a change to the navigation bar in one place and instantly all pages are updated.
Welcome to "include" files - an incredibly powerful facility that can do this, and so much more, on your web site.

Includes break down into two categories: client and server. A "client" side include is one performed by your browser. Unfortunately, there is no specific syntax in HTML for client side includes so we have to play a small game using javascript. A "server" side include is exactly that - the include happens on your web server so the client browser never even knows it happened.
Server Side Includes
We'll start with the conceptually easier one: the server side include. The specific syntax will vary based on what type of server you have and what your pages are written in.
Simple HTML pages on most common web servers can use a syntax called Server Side Include, or SSI. As an example in an HTML file a.html we can place this line:
<!--#include FILE="b.inc" -->
The page seen by a browser viewing a.html will consist of the contents of a.html before the include line, followed by the contents of b.inc, followed by the contents of a.html after the include line. Put the HTML for your navigation bar in a file like b.inc, and all your pages can show the exact same bar.
SSI is available on both Apache and Microsoft IIS web servers. On Apache some configuration may be needed but even if you don't have access to the actual server configuration files it can typically also be enabled by commands in a file named .htaccess that you will either find or can create in your server's web directory. Read more about Apache SSI here. Under IIS, SSI is enabled anytime you use ".asp" pages -- so the only configuration you need do is to name your pages .asp instead of .html. Read more about Server Side Include in ASP pages here.
Another popular ASP-like programming environment is PHP. PHP's include syntax is very simple:
<? readfile("b.inc"); ?>
Naturally, PHP has a host of additional processing ability but much like ASP the only requirement to make the include above work is to have PHP on your web server and name your file ".php".
With all of the above approaches, the browser viewing the page knows absolutely nothing about the include - it all happened before the page was downloaded. However, sometimes processing an include on the server isn't the right option. That's where processing an include on the client comes in.
Client Side Includes
As I mentioned above, there is no actual syntax for a client-side include but we can mimic one using Javascript. For example:
<script src="b.js" type="text/javascript"> </script>
When encountered the browser downloads the script "b.js", executes it, and prints any output that the script might generate as if it were inline HTML. Technically that's not an include but the script "b.js" could be nothing more than a series of javascript "print" statements such as these:
document.write("<table>")
document.write("<tr>")
... and so on
You can see it's "printing" the HTML you want included. In other words, if you can format your include file as a series of javascript prints, you can use client-side include to insert it.
Now things can get very interesting, because we'll introduce two things: remote includes, and CGI programs, into the mix.
Remote Includes
The files we've included so far have been assumed to be on your own server in the same location as your other HTML pages. In almost all cases you can "include" using a full URL to any other server on the internet.
For client-side includes it's very simple. It just works:
<script src="http://example.com/b.js" type="text/javascript"> </script>
This works just like the earlier example execpt that b.js will get loaded from example.com rather than your own server. Similarly, PHP also "just works":
<? readfile("http://example.com/b.inc"); ?>
Unfortunately Apache SSI directives do not support remote includes. But there's almost always a way and we have a workaround using CGI.
CGI Includes
So far we've included only "static" HTML pages. As it turns out you can "include" the output of a server-run CGI program. This then becomes our solution for Apache's lack of support for remote includes. We'll start with this very short Perl program:
use LWP::Simple;
print "Content-type:text/html\n\n";
getprint ($ENV{'QUERY_STRING'});
We'll call it "proxy.pl". Proxy.pl must be appropriately installed on your server into your cgi-bin directory or its equivalent. By being local to your server Include directives can reference it.
Proxy.pl simply fetches the contents of URL passed as a parameter. This means we can perform an apache remote include this way:
<!--#include VIRTUAL="/cgi-bin/proxy.pl?http://example.com/b.inc" -->
It works like this:
The include executes proxy.pl with the parameter "http://example.com/b.inc"
Proxy.pl then fetches b.inc from example.com and prints it.
The result is that the contents of b.inc show up as an included file.
Includes + remote includes + CGI
So far we've used a CGI program to fetch what is essentially just another static html file. In fact, if we put all these pieces together we can create some very useful and interesting internet applications.
Randy Cassingham of This is True wanted to be able to provide his readers who had web sites the ability to host one of his stories. Sounds like a job for an include file, right? But he also wanted that story to change every day. That's more than a static HTML page; that's a CGI program that outputs a different story each day.
The result is tad.pl (True-A-Day) - a Perl script that picks a new story every day and outputs HTML. Given what we've talked about so far so you can probably guess how it's used. As a client side include:
<script src="http://www.thisistrue.net/cgi-bin/tad.pl" type="text/javascript"> </script>
That's it in its simplest form. Note that:
tad.pl is written in Perl. It does whatever it needs to gather the HTML for the story to be output.
tad.pl outputs javascript. In fact, tad.pl's output is nothing more than a series of "document.write" statements.
The client browser executes the javascript. The result is that it prints the HTML that tad.pl constructed for today's story.
Using tad.pl in a server-side include looks like this:
<!--#include VIRTUAL="/cgi-bin/proxy.pl?http://www.thisistrue.net/cgi-bin/tad.pl?ssi=1" -->
Note that as discussed above we had to use a local CGI program, proxy.pl, to fetch the remote URL.
Note also that we've added an additional parameter, ssi=1. This causes tad.pl to output the HTML it gathers without the javascript document.write statements. The final sequence looks like this:
proxy.pl executes on your server, and is passed the URL "http://www.thisistrue.net/cgi-bin/tad.pl?ssi=1".
proxy.pl fetches that URL, causing tad.pl to execute on www.thisistrue.net.
tad.pl once again does whatever it needs to gather the HTML for the story to be output.
tad.pl outputs the HTML to be included.
That output is returned to proxy.pl, which in turn prints it, where it becomes the "included text".
The client browser sees nothing but HTML - the HTML from the containing page with the HTML from tad.pl inserted in place of the include statement.
As you can see, includes are not only a great organizational tool allowing you to collect common information into fewer files, but also a powerful way to add functionality to your web site and perhaps others. I'll end this with True-A-Day included via a client side include:

Javascript 相关文章推荐
js 数据类型转换总结笔记
Jan 17 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
YUI模块开发原理详解
Nov 18 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 #Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 #Javascript
checkbox 多选框 联动实现代码
Oct 22 #Javascript
javascript网页关闭时提醒效果脚本
Oct 22 #Javascript
javascript Select标记中options操作方法集合
Oct 22 #Javascript
JavaScript Undefined,Null类型和NaN值区别
Oct 22 #Javascript
javascript TextArea动态显示剩余字符
Oct 22 #Javascript
You might like
PHP Stream_*系列函数
2010/08/01 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
德国购买门票网站:ADticket.de
2019/10/31 全球购物
一道SQL面试题
2012/12/31 面试题
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
最美孝心少年事迹材料
2014/08/15 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
PHP实现rar解压读取扩展包小结
2021/06/03 PHP