如何将一个HTML页面嵌套在另一个页面中
一 在原页面嵌入其他页面
1、使用iframe框架
客户端页面嵌套可以使用iframe的方法,弊端是必须事先想好被嵌套的页面在首页中要占多大的位置。
如果被嵌套页面太大,超过事先定义的宽度或高度,则首页会出现滚动条。这也许正是你所需要的,
但也许会完全破坏主页的设计。
< iframe >------ < / iframe >
<iframe src="要放在框架里面的网址或文件" height="" width=""> </ifrmae>
例: <iframe src="text.asp" height="200" width="600">
<a href="text.asp">
你的浏览器不支持iframe页面嵌套,请点击这里访问页面内容。
</a>
</ifrmae >
可加属性 scrolling="No" 意为滚动条不随内容改变而出现 -- 多余的内容会被自动隐藏!
frameborder="0" 嵌套页面边框
leftmargin="0" 左边距
topmargin="0" 上边距
onscroll="true" 当元素滚动条被滚动时执行脚本 ,在HTML 5 中定义了该元素
插入<a>,是因为老版本的浏览器和搜索引擎不支持iframe,虽然现在已经
很少有人还会使用Netscape 4这样老的浏览器了,但是几乎所有人都会使用象Google这样的搜索引擎。
在iframe里面加上超级链接可以帮助搜索引擎找到网页的内容。
2、SSI (Server Side Include)
SSI是一种简单的动态网页制作技术,但是有些服务器要求网页文件扩展名为.shtml才能识别文件中SSI命令。所以如果你的SSI命令看起来不工作,先别放弃,试着把文件扩展名改为.shtml,也许会成功。如果知道自己的服务器是否支持SSI,请看另一篇文章。
使用SSI一个局限性是页面一定要放在网页服务器上才能看到效果,在本地是不好调试的。当然,如果非要在本地调试,就本地装一个Apache服务器好了。
比如你想在每个网页的底部加上同样的版权信息,像
© 2009 程序员实验室 版权所有
可以把这行信息放到一个叫做footer.html的文件里,footer.html的内容为:
<center> © 程序员实验室 版权所有</center>;
这样同一路径下的其他页面文件要包含footer.html的SSI命令是:
<!- #include virtual="footer.html" ->(常用)
或者
<!- #include file="footer.html" ->
这两者的几乎是一样的,不同之处在于include virtual后面取的是一个URL形式的路径,甚至还可以执行一个CGI程序并包含其输出结果,如果你的服务器支持CGI的话。而include file后面取的是一个文件系统路径,并且不能执行CGI程序。两者都可以接受相对路径,所以对上面这个简单例子,两者的效果是一样的。如果你不知道URL路径与文件系统路径两者的区别的话,就用include virtual
3、ASP和ASP.Net
如果你使用的是老式的ASP,则语法是与上面SSI一样的,不需要任何修改,只要把命令所在文件的扩展名改为.asp即可。
对于ASP.NET,也是类似,不同之处在于,因为SSI命令是在ASP命令运行之前被首先编译,所以文件名中不能够使用ASP.NET的变量。如果一定要用的话,就用ASP.NET的命令来做文件嵌套吧。
比如:
<%
Response.WriteFile ("footer.html")
%>
更多关于怎样在ASP.NET中实现动态文件嵌套,请参考微软的这篇文章。
4、PHP
如果你的服务器支持PHP的话,用PHP引用footer.html文件的写法如下:
<?php include("footer.html"); ?>
这句命令所在的文件扩展名必须被为.php。
除了引用本服务器上的文件,PHP的include命令还可以用来引用其它网站上的html文件,比如:
<?php include(http://www.prglab.com/examples/footer.html); ?>
当然你要得到其它网站的允许才能引用别人的文件。
5、JSP (JavaServer Page)
JSP文件需要在基于Java的服务器上运行,比如Apache Tomcat。JSP包含文件的语法是:
<%@ include file="footer.html" %>
如何将一个HTML页面嵌套在另一个页面中的更多相关文章
- 网站开发进阶(十一)如何将一个jsp页面嵌套在另一个页面中
如何将一个jsp页面嵌套在另一个页面中 这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可.这样便于维护,如果有很多网页,当通用 ...
- 网站开发进阶(十)如何将一个html页面嵌套在另一个页面中
如何将一个html页面嵌套在另一个页面中 1.IFrame引入 <IFRAME NAME="content_frame" width=100% height=30 margi ...
- 用js把数据从一个页面传到另一个页面
用js把数据从一个页面传到另一个页面的层里? 如果是传到新页面的话,你网站基于什么语言开发直接用get或者post获取,然后输出到这个层 通过url传参 如果是HTML页面的话JS传到新页面就wind ...
- asp.net使用post方式action到另一个页面,在另一个页面接受form表单的值!(报错,已解决!)
原文:asp.net使用post方式action到另一个页面,在另一个页面接受form表单的值!(报错,已解决!) 我想用post的方式把一个页面表单的值,传到另一个页面.当我点击Default.as ...
- 用js通过url传参把数据从一个页面传到另一个页面
好长时间没写博客了,时值五一,外面到处人山人海,本宝宝还是好好呆在家学习吧.好了,言归正传.在没有后台支持的情况下,如何实现从一个页面像另一个页面来传递数据呢?应该很多人遇到过这个问题吧.那我就来说说 ...
- html页面嵌套两个iframe页面导致第二个iframe页面高度失效的问题
1:这是因为最里面嵌套的iframe页面html和body高度无法设置问题,我的解决办法是js去控制iframe高度 2:js获取最子页面(content内容区域)的高度 var ifremHeigh ...
- 在layui中,新的页面怎么获取另一个页面传过来的数据,并可以对数据进行判断,layui中的后台分页(table)。
例如:打开一个新页面的同时,传数据. layer.open({ type: 2, title: '新增项目', shadeClose: false, shade: [0.3], maxmin: tru ...
- MFC 如何在一个窗体中嵌套在另一个窗体中
其中的一个方法是讲子窗体设置为非模式对话框,具体操作为 :设置子窗体的border属性为none,style为 child. 在父窗体中需要用create来实现,具体例子如下. 在父窗体的OnInit ...
- vue中路由返回上一个页面,恢复到上一个页面的滚动位置
第一步:路由文件的配置(对你所需要的vue文件进行保存缓存标志的添加) import Vue from 'vue' import Router from 'vue-router' import Hel ...
随机推荐
- UEditor的jQuery插件化 -转
UEditor本身并不依赖jQuery,但如果在项目中同时使用两者的话,可能会希望使用jQuery语法创建和获取编辑器实例.为此,需要为jQuery编写插件,代码如下: (function ($) { ...
- Vuejs——(6)Vuejs与form元素
版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 资料来于官方文档: http://cn.vuejs.org/guide/forms.html 本 ...
- 消息中间件——kafka
1.1.1 什么是消息中间件 消息中间件利用高效可靠的消息传递机制进行平台无关的数据交流,并基于数据通信来进行分布式系统的集成.通过提供消息传递和消息排队模型,它可以在分布式环境下扩展进程间的通信.对 ...
- 8.AOP全自动
CGLIB字节码增强 l没有接口,只有实现类. 采用字节码增强框架 cglib,在运行时 创建目标类的子类,从而对目标类进行增强. 导入jar包: 自己导包(了解): 核心:hibernate-dis ...
- git 命令(补充篇)的本质理解
1 标签, git tag tag_name SHA 本质: 在某次commit 上打上标签tag_name ,标签在代码库中起着"锚点"的作用. 注意: commit 由 SHA ...
- css 如何“画”一个抽奖转盘
主要描述的是如何运用 css 绘制一个抽奖转盘,并运用原生 js 实现转盘抽奖效果. 先来张效果图: 布局 一般来说,转盘一般有四个部分组成:外层闪烁的灯.内层旋转的圆盘.圆盘上的中奖结果.指针. 所 ...
- JS 实现九宫格算法
九宫格算法核心: 利用控件索引index计算出控件所在的行数和列数: 利用控件计算出left距离: 利用控件计算出top距离: 写特效时需要用到定位 公式: 行 row=parseInt(i/cols ...
- HoloLens开发手记 - 手势输入 Gesture input
手势是HoloLens三个首要输入形式之一.一旦你使用凝视定位了一个全息图像,手势允许你与它交互.手势输入允许你使用手或者点击器原生地与全息图像交互. 手势之外,你也可以在应用中使用语音输入来交互. ...
- spring boot -thymeleaf-日期转化
<span th:text="${#dates.format(date)}" ></span><span th:text="${#dates ...
- python之PIL模块基础功能
Image主要是打开图片后,对图片进行编辑,主要有以下一些常用功能: 1.读取并显示图片: from PIL import Image img = Image.open("H:\\salar ...