-
2021-07-02 14:04:30
通过使用html框架,可以在一个浏览器窗口中展示多个页面。也就是一个html文件中可以引入多个html文件。在网页中框架使用比较少,但我们还是需要了解下。
方式1:iframe
使用iframe标签来实现。具体的属性及意义:
- src 指向不同的网页,也就是html文件路径。
- width height 用来设置iframe引入网页的宽高大小。
- frameborder 定义iframe表示是否显示边框。1表示有,0表示没有代码示例:<div><iframesrc="demo_iframe.htm" width="500" height="500" frameborder="0"></iframe></div>
方式2:frame
<frame>标签定义一个frameset中一个特定的窗口(框架)。特别注意不能与body同时使用,否则不起作用。
frameset标签具体的属性及意义:
- cols 设置框架中列的数目和尺寸,使用逗号分开。
- rows 定义框架中行的数目和尺寸,使用逗号分开。
- frameborder 框架是否设置边框,1表示有,0表示没有
- scrolling 框架内是否允许滚动条。
- noresize 规定无法调整窗口大小。
frame 的src设置了引入窗口文档的地址。
示例代码:
<html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html>
由于单页面应用广泛,多页面基本都用在网站搭建中,所以html框架应用比较少,这节内容作为了解。
更多相关内容 -
网页嵌套音频视频源码
2012-05-09 23:49:45很齐全的网页端视频或者音频的播放器。可以直接复制使用。希望对开发影音系统的你有帮助 -
js实现网页防止被iframe框架嵌套及几种location.href的区别
2021-01-02 08:24:22首先我们了解一下:[removed].href、location.href、self.location.href、parent....“parent.location.href”是上一层页面跳转 “top.location.href”是最外层的页面跳转 举个例子说明(如上图): 如果A,B,C,D -
div嵌套html不用iframe
2020-09-28 06:09:48在不用iframe的情况下嵌套页面,所以只好在div中嵌套,下面是具体的实现,主要使用到了jquery,大家可以参考下 -
C# Android 嵌套H5网页 Android端外壳
2021-08-19 11:54:27Android 使用WebView 嵌套H5页面,有需求页面做Android端外壳的可以直接修改代码内的网址 就可以直接使用 开发环境VS2017 -
HTML怎么在一个页面嵌套多个页面?
2021-06-10 15:25:30回答:Insert title herefunction PReview(oper){if (oper < 10){bdHTML=Window.document.body.innerHTML;...//设置打印开始区域ePRnstr="";//设置打印结束区域PRnHTML=bdHTML.SUbstring(bdHTML.indexOf(sPRns...回答:
Insert title herefunction PReview(oper)
{
if (oper < 10){
bdHTML=Window.document.body.innerHTML;//获取当前页的HTML代码
sPRnstr="";//设置打印开始区域
ePRnstr="";//设置打印结束区域
PRnHTML=bdHTML.SUbstring(bdHTML.indexOf(sPRnstr)+18); //从开始代码向后取HTML
PRnHTML=PRnHTML.SUbstring(0,PRnHTML.indexOf(ePRnstr));//从结束代码向前取HTML
Window.document.body.innerHTML=PRnHTML;
Window.PRint();
Window.document.body.innerHTML=bdHTML;
} else {
Window.PRint();
}
}
function xx(){
Window.PRint();
}
预览功能可以使用谷歌浏览器,ie预览功能同上,其他好像不支持
直接粘贴到页面(HTML)中就可以使用
style="wIDth: 500px;height: 500px">
-
Dreamweaver网页制作怎么使用css样式嵌套?
2020-09-22 17:07:15Dreamweaver网页制作怎么使用css样式嵌套?Dreamweaver设计网页的时候,想要使用css样式嵌套,该怎么制作呢?下面我们就来看看详细的教程,需要的朋友可以参考下 -
如何将一个HTML页面嵌套在另一个页面中
2020-12-19 22:02:23展开全部这个在做网页中常e69da5e887aa62616964757a686964616f31333339666636要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可。这样便于维护,如果有很...展开全部
这个在做网页中常e69da5e887aa62616964757a686964616f31333339666636要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可。这样便于维护,如果有很多网页,当通用内容需要修改时,只改一个文件就可以了,不需要每个文件单独修改。
最典型的应用比如页脚的版权信息等内容可以放在一个叫做footer.html文件里, 然后其他页面文件在页面内容的最后包含这个文件就可以了,具体例子下面有。
要
html文件嵌套,最简单的办法是使用SSI(Server Side
Include)技术,也就是在服务器端两个文件就被合并了。除了少数免费网页寄存服务外,几乎所有的网页寄存服务器都支持
SSI。这也是一个比较推荐的方法,它与ASP和ASP.NET网页使用的语法一模一样。如果网站管理员偏向使用PHP或JSP的话,语法会稍有不同。
对于不能使用SSI、ASP、ASP.NET、PHP和JSP等服务器端动态页面语言的情况,这里还将介绍两种客户端镶嵌的办法:JavaScript和iframe的方法。当这两种客户端的方法都有很大的弊病,一般不推荐使用。
下面对各种方法单独具体介绍。
1、SSI (Server Side Include)
SSI是一种简单的动态网页制作技术,但是有些服务器要求网页文件扩展名为.shtml才能识别文件中SSI命令。所以如果你的SSI命令看起来不工作,先别放弃,试着把文件扩展名改为.shtml,也许会成功。如果知道自己的服务器是否支持SSI,请看另一篇文章。
使用SSI一个局限性是页面一定要放在网页服务器上才能看到效果,在本地是不好调试的。当然,如果非要在本地调试,就本地装一个Apache服务器好了。
比如你想在每个网页的底部加上同样的版权信息,像
© 2009 程序员实验室 版权所有
可以把这行信息放到一个叫做footer.html的文件里,footer.html的内容为:
© 程序员实验室 版权所有 ;这样同一路径下的其他页面文件要包含footer.html的SSI命令是:
(常用)
或者
这
两者的几乎是一样的,不同之处在于include
virtual后面取的是一个URL形式的路径,甚至还可以执行一个CGI程序并包含其输出结果,如果你的服务器支持CGI的话。而include
file后面取的是一个文件系统路径,并且不能执行CGI程序。两者都可以接受相对路径,所以对上面这个简单例子,两者的效果是一样的。如果你不知道
URL路径与文件系统路径两者的区别的话,就用include virtual
更多关于SSI的介绍,请看这篇SSI的介绍文章。
2、PHP
如果你的服务器支持PHP的话,用PHP引用footer.html文件的写法如下:
这句命令所在的文件扩展名必须被为.php。
除了引用本服务器上的文件,PHP的include命令还可以用来引用其它网站上的html文件,比如:
当然你要得到其它网站的允许才能引用别人的文件。
3、ASP和ASP.NET
如果你使用的是老式的ASP,则语法是与上面SSI一样的,不需要任何修改,只要把命令所在文件的扩展名改为.asp即可。
对于ASP.NET,也是类似,不同之处在于,因为SSI命令是在ASP命令运行之前被首先编译,所以文件名中不能够使用ASP.NET的变量。如果一定要用的话,就用ASP.NET的命令来做文件嵌套吧。
比如:
Response.WriteFile ("footer.html")
%>
更多关于怎样在ASP.NET中实现动态文件嵌套,请参考微软的这篇文章。
4、JSP (Java Server Page)
JSP文件需要在基于Java的服务器上运行,比如Apache Tomcat。JSP包含文件的语法是:
5、客户端包含
5。1 客户端包含的利弊
客户端包含有两种方式:JavaScript和iframe。让我们先看看两种方法各有什么利弊。
两种方法中Javascript生成的页面格式比较好,Javascript可以从一个URL取到页面片断然后镶嵌在另一个页面的任何位置
。其结果与服务器端包含的结果基本上一样,但弊端是客户端必须开启Javascript功能(目前大多数人是选择开启的,但也有少数出于安全方面的考虑不
开启)。另一个弊端是搜索引擎是看不到由Javascript包含的页面的内容的,这对你的网站推广比较不利。
使用iframe比较简单,它可以强制一个HTML页面镶嵌在另一个页面中,类似于是用
object控件将Flash电影、录像、或者MP3播放器嵌入一个页面中。使用iframe,用户端不需要开启Javascript功能。但不利的方面
是iframe有固定的高度和宽度,不能随着被嵌入页面的大小而改变。当被嵌入页面大于给定高宽度时,会显示滚动条(当然你也可以使用
scrolling = "no"
来强制滚动条不显示,但这样页面内容会显示不完整),影响页面美观。另外就是搜索引擎可能不收录iframe引用的页面,不利网站推广。
5。2 使用JavaScript的客户端包含
这个方法主要适用于Firefox浏览器(任何操作系统)、IE5以上(Windows)、苹果的Safari浏览器(MacOS X),可以使用一项叫做XMLHTTP 的API技术来通过Javascript程序读取一个动态读取一个XML文件。这种方法也可以用来读取一个HTML文件,并放到当前网页文件的指定位置。
专业网站设计者:不要用这个!
也许在某些情况下你不得不用JavaScript来实现网页嵌套,但是这只是一种转弯抹角的替代方法。当你的服务器可以支持前面讲的服务器端嵌套方法时,
尤其是专业人士,应尽可能避免使用这种方法,因为你的客户可能会投诉你做的网页内容无法被Google搜索到,或不能在某些浏览器中正常显示。
记住这种方法做的网页只能在Firefox,Safari,和IE5以上版本的浏览器中正常显示。大部分人都是用这几种浏览器的,但是不是所有人,而且有些用户因为安全因素考虑会关闭Javascript功能。
重要提示:如果你是在本地电脑上调试网页而不是在服务器上浏览,最新版本的IE浏览器会自动屏蔽
Javascript动态生成的部分,并显示警告信息,你必须选择”允许显示动态内容”网页才能正常显示。当你把这些网页文件放到服务器上去的时候这个问
题就会自动消失的,因为IE会辨别出主页和被包含的网页内容都来自同一个服务器。
好了,说了够多了,下面是具体怎么做。把以下代码放在网页的
里面:function clientSideInclude(id, url) {
var req = false;
// Safari, Firefox, 及其他非微软浏览器
if (window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch (e) {
req = false;
}
} else if (window.ActiveXObject) {
// For Internet Explorer on Windows
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
req = false;
}
}
}
var element = document.getElementById(id);
if (!element) {
alert("函数clientSideInclude无法找到id " + id + "。" +
"你的网页中必须有一个含有这个id的div 或 span 标签。");
return;
}
if (req) {
// 同步请求,等待收到全部内容
req.open(’GET’, url, false);
req.send(null);
element.innerHTML = req.responseText;
} else {
element.innerHTML =
"对不起,你的浏览器不支持" +
"XMLHTTPRequest 对象。这个网页的显示要求" +
"Internet Explorer 5 以上版本, " +
"或 Firefox 或 Safari 浏览器,也可能会有其他可兼容的浏览器存在。";
}
}
有
了这段代码我们就可以在网页的任何位置插入另一个页面了。首先我们要生成一个作为”容器”的HTML控件,比如,并给这个”容
器”控件一个ID,比如includefooter,然后把这个ID和要包含的页面的URL地址传递给前面写的这个js函数
clientSideInclude就可以了。
一个需要注意的地方是函数clientSideInclude只有在页面被完全加载后才能工作,所以我们需要在
标签的onload事件上来调用这个函数,这是最保险的调用时机,因为这个事件触发的时候浏览器肯定已经完全解析了页面中所有HTML了。
所以,具体代码是:
在需要插入另一页面的地方写:
在页面开始处标签里写:
5。3 使用iframe的客户端包含
客户端页面嵌套还可以使用iframe的方法,弊端是必须事先想好被嵌套的页面在首页中要占多大的位置。如果被嵌套页面太大,超过事先定义的宽度或高度,则首页会出现滚动条。这也许正是你所需要的,但也许会完全破坏主页的设计。
iframe的使用很简单,下面的例子会在你的页面中嵌入另一个叫做include.html的页面:
你的浏览器不支持iframe页面嵌套,请点击这里访问页面内容。
这里主页中定义了要插入的页面将显示的高度为400的像素,宽度为450个像素。
我们为什么要在
iframe的里面插入一个普通的超级链接元素呢?这是因为老版本的浏览器和搜索引擎不支持iframe,虽然现在已经很少有人还会使
用Netscape
4这样老的浏览器了,但是几乎所有人都会使用象Google这样的搜索引擎。在iframe里面加上超级链接可以帮助搜索引擎找到网页的内容。
另外我们可以定义iframe的一些属性来控制网页的显示效果
,除了前面用到的最常用宽度(width)和高度(height)的定义外,如果在任何情况下都不希望出现滚动条的话,可以定义iframe的
scrolling属性等于"no"。如果不希望镶嵌页面的周围出现边框的话,可以将frameborder属性设置为0。下面这个例子显示了
scrolling和frameborder属性的使用:
你的浏览器不支持iframe页面嵌套,请点击这里访问页面内容。
已赞过
已踩过<
你对这个回答的评价是?
评论
收起
-
在vue中实现嵌套页面(iframe)
2020-10-15 01:12:05主要介绍了在vue中实现嵌套页面(iframe),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
使用CSS做出一个嵌套导航.
2020-09-25 12:58:38除非你的网站只有一页,不然你一定会用的导航的.事实上,导航在网页设计中是最重要部分之一.你要用很多时间去考虑如何让浏览者更容易访问你的网站. -
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2021-01-19 16:13:561. js如何判断是否在iframe中 Js代码 //方式一 if (self.frameElement && self.frameElement.tagName == IFRAME) { ...2. 防止网页被别站用 iframe嵌套 将下面的代码加到您的页面 <head></head> 位置 -
wpf嵌套网页及子窗体
2018-12-17 17:15:05wpf嵌套网页及子窗体, -
同一网页多重嵌套的TAB选项卡.rar
2019-07-10 09:49:00在网页上显示多个选项卡,多重嵌套的网页TAB标签特效,点击触发和鼠标滑过触发的都包括在内,根据自己的需要可选用不同的触发版本。其实通过点击的那种,也就是大家熟悉的选项卡特效,鼠标滑上去就触发的就是滑动门... -
网站开发进阶(十一)如何将一个jsp页面嵌套在另一个页面中
2021-06-10 17:54:24如何将一个jsp页面嵌套在另一个页面中这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可。这样便于维护,如果有很多网页,当通用内容...如何将一个jsp页面嵌套在另一个页面中
这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可。这样便于维护,如果有很多网页,当通用内容需要修改时,只改一个文件就可以了,不需要每个文件单独修改。
最典型的应用比如页脚的版权信息等内容可以放在一个叫做footer.jsp文件里,然后其他页面文件在页面内容的最后包含这个文件就可以了。
JSP文件需要在基于Java的服务器上运行,比如Apache Tomcat。JSP包含文件的第一种方法的语法是:
此指令表示:静态地包含页面,不管其内容如何,不过是静态页面还是动态页面都首先将页面的内容先加进来。
第二种方法是使用动作元素:
当JSP页面被请求时引入指定文件。(先执行,后包含)此标签表示法:能动态区别加载进来的是动态页面还是静态页面,对于静态页面则直接将资源包含(仅取其文本)。
我们都知道在jsp中include有两种形式,分别是
前者是指令元素、后者是行为元素。具体它们将在何处用?如何用及它们有什么区别?这应该是很多人看到它都会想到的问题。下面一起来看看吧。
通常当应用程序中所有的页面的某些部分(例如标题、页脚和导航栏)都相同的时候,我们就可以考虑用include。具体在哪些时候用,哪些时候用.这种形式。首先要明白的是它们之间的区别。只有了解了它们用法的不同才理解该在何时去用以及如何选择。
,jsp的include指令元素读入指定页面的内容。并把这些内容和原来的页面融合到一起。(这个过程是在翻译阶段:也就是jsp被转化成servlet的阶段进行的。
这里对翻译阶段进行一下说明:我们知道,jsp页面不能原封不动地被传送给浏览器,所有的jsp元素都必须首先由服务器进行处理。这是通过将jsp页面转达化成servlet,然后执行这个servlet来完成的。服务器需要一个jsp容器来处理jsp页面。jsp容器通常以servlet的形式来实现,这个servlet经过配置,可以处理对jsp页面的所有请求。
Jsp容器负责将jsp页面转化成servlet(称为jsp页面实现类?JSP Page implementation class),并编译这个servlet。这两步就构成了翻译阶段.
由此我们就会知道:jsp页面是把include指令元素所指定的页面的实际内容(也就是代码段)加入到引入它的jsp页面中,合成一个文件后被jsp容器将它转化成servlet。可以看到这时会产生一个临时class文件和一个java文件。
理论归理论,实际操作过程中还是会遇到形形色色的问题。按照上述方法进行代码的拆分,结果报错:500服务器内部错误!
文章来源: shq5785.blog.csdn.net,作者:No Silver Bullet,版权归原作者所有,如需转载,请联系作者。
原文链接:shq5785.blog.csdn.net/article/details/49950699
-
内外嵌套在一起联动的网页TAB选项卡.rar
2019-07-10 19:08:27内外嵌套在一起联动的网页TAB选项卡,似乎本代码更想表现的是两个选项卡标签的互相嵌套作用,外层和内层各一个TAB选项卡,一共有近6个不同的演示页面来演示不同的嵌套选项卡功能,有的还支持记忆(Cookies)功能,... -
Electron中嵌套网页
2021-02-06 10:59:50有时候需要在桌面应用程序中嵌套网页,甚至是整个桌面...把webView当做是一个容器一般,将外来网页放在容器中显示,但是要是使用,需要在主进程当中,创建窗口时,使用webViewTag设置为true const mainWindow = new B -
django 双重嵌套模板
2017-02-09 23:03:29打算做网站左边栏的二级链接,通过从数据库外联键(ForeignKey)获取子节点,再使用Django模板{% for <个体> in <父节点>.<个体所在表名>...但该模板还存在渲染错误,会出现子节点渲染后的父节点与子节点在同一层的问题。 -
网页嵌套视频,一个简单的例子
2009-06-30 09:42:12网页嵌套视频,一个简单的例子,想看到效果的话,可以访问http://wzzs.huaian.gov.cn/45416/45419/45419.html -
超链接打开网页嵌套层
2011-08-30 14:37:07超链接打开可移动层,连接打开超炫效果,实现关灯效果 -
页面中嵌套 定位显示另一个页面局部
2013-11-11 16:26:36页面中嵌套 定位显示另一个页面局部,通过框架结构定位显示 -
微信小程序嵌套网页
2019-04-22 11:50:57微信小程序 ...功能:实现无菜单网页嵌套 一行代码搞定: <web-view src="https://mp.weixin.qq.com/"></web-view> 删除底部菜单 app.json 删掉tabBar 的数据 ... -
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2020-10-27 17:11:13Extjs中TabPane在一些特殊用途时把其嵌在其他的网页中,很多新手朋友可能对此不是很熟悉,小编就在本文章中详细的介绍一下,感兴趣的你可不要错过了啊,希望本文对你有所帮助 -
通过iframe嵌套网页
2018-07-05 15:59:16找了一套工作台界面,但是他的每一个网页的跳转都是打开新的网页,在改造的公共部分时候如果修改一个页面需要把每一个网页的同一个地方都修改,不利于维护,所以采用html的iframe标签,只做一个框架网页,其他的网页... -
导出打印嵌套svg网页
2019-02-25 11:20:34将网页转换为canvas,包括含有svg的网页,完美解决了网页导出png图片的问题。另外附加了打印网页的适配A4纸的解决方案。 -
如何将一个HTML页面嵌套另一个页面中
2017-07-10 10:23:44如何将一个HTML页面嵌套另一个页面中 这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可。这样便于维护,如果有很多网页,当通用内容... -
易语言-网页元素代码分析易语言源码 嵌套识别 代码提取
2021-06-26 07:56:14网页元素代码分析源码 嵌套识别 代码提取 -
java浏览器+swing嵌套网页+源码免费
2012-08-29 14:56:01java浏览器+swing嵌套网页+源码免费 我的博客:http://blog.csdn.net/yjflinchong -
Python爬虫之Selenium中frame/iframe表单嵌套页面
2021-01-19 23:28:04在Web应用中经常会遇到frame/iframe表单嵌套页面的应用,WebDriver只能在一个页面上对元素识别与定位,对于frame/iframe表单内嵌页面上的元素无法直接定位。这时就需要通过switch_to.frame()方法将当前定位的主体...