html 怎样直接引入另一个页面

html-css0206

html 怎样直接引入另一个页面,第1张

html文件引入其它html文件的三种方法:

可以在一个html的文件当中读取另一个html文件的内容吗?答案是确定的,而且方法不只一种,在以前我只会使用iframe来引用,后来发现了另外的几种方法,那今天就总结这几种方法让大家参考一下。

1.IFrame引入

a.html引入b.html的内容

<iframe name="content_iframe" marginwidth=0 marginheight=0 width=100% height=30 src="b.html" frameborder=0></iframe>

参数:

runat="server" 这个最好加上Iframe跳转 asp.net 可在当前iframe中跳转

src 链接到的地址URl

frameborder 是否显示边框(0无边框 1有边框)

scrolling 是否有滚动条(yes有滚动条 no无滚动条)

allowtransparency 背景是否透明(yes透明 no不透明)

详细介绍:http://www.cnblogs.com/kingboy2008/archive/2011/05/10/2055545.html

不足:很多页面都有下拉单,那么iframe 就不方便使用了,因为是在a窗口里面嵌入了b窗口。那么iframe的窗口则是固定不变的。没法自动调节。iframe 这个我没用过,之前看过一些小说网站,因为对内容的隐秘性,不让读者能复制内容,他们就是用了iframe的方法。

比如此处的下拉单要到内容部分,这样iframe就不适用了。那么用include方式就很方便。接下来会有include方式详解。

2.<object>方式

<object style="border:0px" type="text/x-scriptlet" data="import.htm" width=100% height=30></object>

定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码。

<object>标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持,这一点并未实现。

浏览器的对象支持有赖于对象类型。不幸的是,主流浏览器都使用不同的代码来加载相同的对象类型。

而幸运的是,object 对象提供了解决方案。如果未显示 object 元素,就会执行位于 <object>和 </object>之间的代码。通过这种方式,我们能够嵌套多个 object 元素(每个对应一个浏览器)。

而我用object方式就常用于插入一个flash插件。

将内容引入放置到你的div中

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' name='flashDiv' id='flashDiv' border='none'

codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0'>

<param name='movie' value='js/webchat.swf'>

<param name='quality' value='high'>

<embed src='js/webchat.swf' width='1100' height='680' quality='high' name='flashDiv'

type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' </embed>

</object>

详细链接:http://blog.163.com/horse622@126/blog/static/477054722009102492216760/

param的详解:http://201205083157.iteye.com/blog/1863322

3.include(这是我此处重点讲解,也是最方便使用的)

一个网站很多页面里面,一部分内容的代码是一样的,比如:head,footer,menu等。那么我们则可以写一个头部,一个尾部,一个menu然后引入到需要用的页面里面,则不需用写重复的代码了。include是在a.html里面嵌入b.html的代码,是将代码拼凑完整,而不是在浏览器中嵌入一个浏览器。

这样的好处是,当重复代码修改一个小地方时候,只需在一个html里面修改,不需要重复修改代码,也不会因为页面太多导致漏掉未修改。

我将内容分成4部分,然后将heder、menu、footer引入到index里面,将会看见网页代码就成完整的了:

将一个html页面中嵌入另一个html页面步骤如下:

1、首先,要嵌入html并不一定要写js代码,如图使用iframe标签,设置其src属性即可。注意其scrolling="auto"以添加滚动条。另外,其width和height要单独设置。

2、其链接到的html页面内容如图所示。给其添加如图meta标签,增加自动刷新功能。

3、在Python编写的httpserver中(Tornado),这两个url的请求都要处理。以本程序为例,用户浏览器载入main以后,main页面中的iframe标签会自动载入todolist。

4、如图是通过浏览器访问main页面,可以看到下面的框框中显示的就是todolist页面的内容。

5、另外,其右侧自带滚动条,而且这个潜入的页面设置了自动刷新,会时刻保持更新。

6、如果关闭了httpserver,会看到如簇所示情况,嵌入的页面刷新失败。但是main页面没有自动刷新,无影响。

html中引入调用另一个html的方法,尝试了好几种,都列出来: 

其中第一种是最好的,其他的方法,可以尝试看看,是不是适合你当前项目

一、div+$(“#page1”).load(“b.html”) 

参考代码:

二、iframe 

参考代码:

三、object引入 

参考代码:

四、import引入 

参考代码:

五、bootstrap的panel组件,或者easyui的window组件,有点类似这个效果;

HTML里用如何包含引用另一个html文件

整理了3个方法,一个是HTML的iframe标签,别两个是JS引用。比如要在arr.html文件里引用index.html文件,方法如下。

1、HTML引用方法:

<iframe name="toppage" width=100% height=100% marginwidth=0 marginheight=0 frameborder="no" border="0"  src="index.html" ></iframe>

2、JS引用方法:

<object style="border:0px" type="text/x-scriptlet" data="index.html" width=100% height=100%></object>

3、<script type="text/javascript" src="index.js"></script>

html 中include另外一个页面

两个页面     technologies.html  head.html  在  technologies.html 中使用 include

使用chrome 打开 technolliges.html,页面没有任何显示。原因 html不支持 include,解决方案参考:csdn: html中include方法 。参考方法将.html改成 .aspx,在technologies.aspx中打开可以显示 head.html中的内容。有一个未解决问题  windows 2000 IIS 中的  default.aspx 页面不支持默认主页面,支持default.html,暂时无法使用该方案,但可以尝试另外一个iframe方案,iframe方案支持在html页面中包含其它页面。