如何将一个HTML页面嵌套在另一个页面中

如题所述

将一个html页面中嵌入另一个html页面需要使用到iframe标签。

iframe标签用法:

<iframe src="你要嵌套的页面.html" frameborder="0" width="300" scrolling="No" height="200" leftmargin="0" topmargin="0"></iframe>

scrolling禁止鼠标滑动,frameborder嵌套页面边框,leftmargin左边距,topmargin上边距

扩展资料:

嵌入页面的几种方法:

一、应用框架技术 

在页面中嵌入外部页面的方法是,在页面中包含外部页面的位置插入“< IFRAME name="XXX" width=X height=X frameborder=0 src="XXX.htm" >< /IFRAME >”语句即可。

如果想在嵌入的外部页面过长时不出现滚动条,在外部文件< body >标签中加入“scroll=no”或者在宿主页面< IFRAME >标签中加入“scrolling=no”即可。

但这样做会出现一个问题,就是宿主页面和外部页面背景色不同,这样会给人造成页面不是一个整体的感觉。这时,只要在引入的外部文件中使用和宿主页面相同的背景色就可以解决这一问题。

注意,如果您使用的是IE 5.5或以上版本的话,直接在标签< IFRAME >内设置属性allowTransparency="true"(即框架背景透明)即可。

二、使用Scriptlets组件技术

应用这种技术的方法是在宿主页面中包含外部页面的位置插入“< OBJECT style="border: 0px" type="text/x-scriptlet" data="XXX.htm" width=X Height=X >< /OBJECT >”语句即可。

在IE 5.0及以后版本中,scriptlets和Html组件(HTCs)被重新命名为Windows脚本编程组件(WSC),其特点类似于上文所讲的框架技术。它有自己的不透明方形区域,并覆盖在宿主页面上,因此不能很平滑地用于具有纹理背景的宿主页面中,其工作方式类似于ActiveX控件,具有自己独立的事件、方法和属性。

三、使用脚本文件技术

document.write方法可以在宿主页面中输出内容,这样就可以通过在宿主页面中引入外部脚本文件来达到嵌入外部页面的目的。方法是在宿主页面中包含外部页面的位置插入“< SCRIPT language="JavaScript" src="import.js" >< /SCRIPT >”,然后对外部页面进行改造,将每一行内容写入document.write中,并另外保存在扩展名为js的新文件中。

这种方法的特点是外部页面不具有自己的方形区域,和宿主页面浑然一体,但由于外部页面内容全部写在脚本中,无法做到所见即所得,必须等到脚本运行时才能看到实际效果,这样就为修改调试增加了困难。

参考资料来源:百度百科:内嵌框架

温馨提示:内容为网友见解,仅供参考
第1个回答  2020-01-29
使用iframe的客户端包含
客户端页面嵌套还可以使用iframe的方法,弊端是必须事先想好被嵌套的页面在首页中要占多大的位置。如果被嵌套页面太大,超过事先定义的宽度或高度,则首页会出现滚动条。这也许正是你所需要的,但也许会完全破坏主页的设计。
iframe的使用很简单,下面的例子会在你的页面中嵌入另一个叫做include.html的页面:
<a
href="included.html">你的浏览器不支持iframe页面嵌套,请点击这里访问页面内容。</a>
这里主页中定义了要插入的页面将显示的高度为400的像素,宽度为450个像素。
我们为什么要在
iframe的里面插入一个普通的超级链接元素
呢?这是因为老版本的浏览器和搜索引擎不支持iframe,虽然现在已经很少有人还会使
用Netscape
4这样老的浏览器了,但是几乎所有人都会使用象Google这样的搜索引擎。在iframe里面加上超级链接可以帮助搜索引擎找到网页的内容。
另外我们可以定义iframe的一些属性来控制网页的显示效果
,除了前面用到的最常用宽度(width)和高度(height)的定义外,如果在任何情况下都不希望出现滚动条的话,可以定义iframe的
scrolling属性等于"no"。如果不希望镶嵌页面的周围出现边框的话,可以将frameborder属性设置为0。下面这个例子显示了
scrolling和frameborder属性的使用:
<a
href="included.html">你的浏览器不支持iframe页面嵌套,请点击这里访问页面内容。</a>
第2个回答  2019-01-04
在asp页面中引用外部页面很简单,使用以下语句就可以:<!--
include
file="要引用的页面"
->
但是在html
静态页面中引用外部页面则没那么方便,主要方法有:
1.使用框架来实现,但是那样占用线程较多,速度慢;
<iframe
width=100%
height=30
marginwidth=0
marginheight=0
src="header.htm"
></iframe>
加上它的一些属性可以实现一些透明,无滚动条等具体的效果.大家可以html教程的相关介绍
2.使用.
js脚本来实现
就是把相关的html文件转化为js文件.再在调用的时候用
<script
src="imp
ort.js"></script>
或<script
src="import.asp"></script>,此时import.asp中的内容必须使用js输入才行。
如果你用此方法来包含像头部,导航条的话,它将不利于搜索引擎的搜集。
另外,编写js输出的内容代码较凌乱,容易出错。
3.下面是一种实现方法:
最好能有一种方法,就像asp页面包含其他页面时那样,用一小段包含语句就可以实现,不要将需要包含的内容出现在本页面内,而是分割出去到另外一个自己的页面。
<span
><ie:download
style="behavior:url(#default#download)"
/>
<script>
function
ondownloaddone(downdata){
showimport1.innerhtml=downdata
}
odownload1.startdownload('top.htm',ondownloaddone)
</script>
注:包含的页面为
top.htm
只要把需要包含的页面改掉就可以了!其中id=showimport
不能改为其他,这种写法为一次包含一个文件。
4.<object>
个人觉得此法方便比较好
<object
type="text/x-scriptlet"
data="import.htm"
width=100%
height=30></object>
5.behavior的download方式
<span
<ie:download
style="behavior:url(#default#download)"
/>
<script>
function
ondownloaddone(downdate){
showimport.innerhtml=downdate
}
odownload.startdownload('import.htm',ondownloaddone)
</script>
6、html中执行ssl
存在这种情况,主机只默认的是index.html,但是需要首页是动态的,除了上述方法,可以使用ssl
[!--#exec
cgi="index.pl"
--]
1、在服务器上打开“服务器端包含”
2、把你的静态文件扩展名改成:shtml
3、在文件中添加<!--#include
file="你要包含的文件"
-->
第3个回答  推荐于2016-10-21

用iframe框架,嵌套一个网页进去即可实现;很简单的;

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

以下是iframe的属性、值、描述

align    leftrighttopmiddlebottom    不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。    
frameborder    10    规定是否显示框架周围的边框。    
height    pixels%    规定 iframe 的高度。    
longdesc    URL    规定一个页面,该页面包含了有关 iframe 的较长描述。    
marginheight    pixels    定义 iframe 的顶部和底部的边距。    
marginwidth    pixels    定义 iframe 的左侧和右侧的边距。    
name    frame_name    规定 iframe 的名称。    
sandbox    ""allow-formsallow-same-originallow-scriptsallow-top-navigation    启用一系列对 <iframe> 中内容的额外限制。    
scrolling    yesnoauto    规定是否在 iframe 中显示滚动条。    
seamless    seamless    规定 <iframe> 看上去像是包含文档的一部分。    
src    URL    规定在 iframe 中显示的文档的 URL。    
srcdoc    HTML_code    规定在 <iframe> 中显示的页面的 HTML 内容。    
width    pixels%    定义 iframe 的宽度。

根据属性修改你嵌套的网页内容;希望我的回答对你有所帮助;

本回答被提问者和网友采纳
第4个回答  2015-10-12
使用iframe
或者用jquery的$.load();方法

在一个网页中嵌入显示另一个网页?
3、使用iframe比较简单,它可以强制一个HTML页面镶嵌在另一个页面中,类似于是用object控件将Flash电影、录像、或者MP3播放器嵌入一个页面中。使用iframe,用户端不需要开启Javascript功能。如何将一个HTML页面嵌套在另一个页面中1、这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它...

如何将一个html页面中嵌入另一个html页面
1、首先,要嵌入html并不一定要写js代码,如图使用iframe标签,设置其src属性即可。注意其scrolling="auto"以添加滚动条。另外,其width和height要单独设置。2、其链接到的html页面内容如图所示。给其添加如图meta标签,增加自动刷新功能。3、在Python编写的httpserver中(Tornado),这两个url的请求都要处理...

如何将一个HTML页面嵌套在另一个页面中
使用iframe比较简单,它可以强制一个HTML页面镶嵌在另一个页面中,类似于是用 object控件将Flash电影、录像、或者MP3播放器嵌入一个页面中。使用iframe,用户端不需要开启Javascript功能。但不利的方面是iframe有固定的高度和宽度,不能随着被嵌入页面的大小而改变。当被嵌入页面大于给定高宽度时,会显示滚动条(当然你也可以...

如何将一个HTML页面嵌套在另一个页面中
longdesc URL 规定一个页面,该页面包含了有关 iframe 的较长描述。 marginheight pixels 定义 iframe 的顶部和底部的边距。 marginwidth pixels 定义 iframe 的左侧和右侧的边距。 name frame_name 规定 iframe 的名称。 sandbox ""allow-formsallow-same-origin...

如何将一个HTML页面嵌套在另一个页面中
使用iframe框架;<iframe src="你要嵌套的页面.html" frameborder="0" width="300" scrolling="No" height="200" leftmargin="0" topmargin="0"><\/iframe> scrolling禁止鼠标滑动,frameborder嵌套页面边框,leftmargin左边距; topmargin上边距 ...

网页里面嵌套网页?
如何将一个HTML页面嵌套在另一个页面中这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可。使用iframe比较简单,它可以强制一个HTML页面镶嵌在另一个页面中,类似于是用object控件将Flash电影、录像、或者MP3播放器嵌入一个...

怎样将一个HTML标签嵌入在另一个HTML标签中?
如何在Div标签中嵌入另一个HTML 回答:1.基于Jquery的DIV嵌套html Html代码:scriptsrc=js\/jquery.js>\/script>divid=btn>新页面\/div> Js代码:(document).ready(function)(){ (#btn#newDivnew.html });});点击“新建页面”进行添加。2.基于纯js代码的嵌套:Html代码:buttontype=buttonid=btnonClick...

如何将一个HTML页面嵌套在另一个页面中
iframe的使用很简单,下面的例子会在你的页面中嵌入另一个叫做include.html的页面:<iframe src="included.html" width="450" height="400" > <a href="included.html">你的浏览器不支持iframe页面嵌套,请点击这里访问页面内容。<\/a> <\/iframe> 这里主页中定义了要插入的页面将显示的高度为400的...

怎样在一个HTML中嵌入另一个HTML页面
HTML中的嵌套通常使用<iframe >标签,iframe 元素会创建包含另外一个文档的内联框架(即行内框架),所有浏览器都支持 使用方法示例:a.html代码 <html> <body> <p style="color: #009F95;">我是嵌入的HTML上面的标签<\/p> <iframe src="b.html" frameBorder="0" width="900" scrolling="no"...

如何将一个网站的内容嵌入另一个网站的页面中
一个网站的内容嵌套到另一个网页中可以使用iframe框架实现 ,如下图,这样子就可以把对方的网页嵌套到你的网页里面展示了。1、如下图代码 2、预览出来的页面效果

相似回答