在html里怎么样导入外部html文件

在html里怎么样导入外部html文件,第1张

在html里包含额外的html页面一般是用JavaScript代码控制的,调用dom的load方法就可以了。

比如有a.html,需要把另外一个页面b.html也包含进来,那么实现代码如下:

1、a.html代码如下:

<html>

<head>

<script src="jquery.js"></script>引用jquery,调用load方法

<script>

$(function(){

$("#includedContent").load("b.html")用load方法记载b.html

})

</script>

</head>

<body>

<div id="includedContent"></div>定义div,显示加载的html内容

</body>

</html>

2、b.html代码,显示一行文字:

<p>这是被a.html标签</p>

在html页面中引入另一个html页面的标签

1、用iframe标签

<iframe SRC="xxxx.html" ></iframe>

2、用object标签

<object data="xxxx.htm"></object>

3、behavior的download方式

例:

1.IFrame引入

[代码] <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 marginheight=0 SRC="import.htm" ></IFRAME>

2.<object>方法

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

3.Behavior的download方法

[代码]

<span id=showImport></span>

<IE:Download ID="oDownload" STYLE="behavior:url(#default#download)" /> <script>

function onDownloadDone(downDate){  showImport.innerHTML=downDate

}

oDownload.startDownload('import.htm',onDownloadDone)  </script>

超文本标记语言, 标准通用标记语言下的一个应用。“ 超文本 ”就是指页面内可以包含图片、 链接,甚至音乐、 程序等非文字元素。超文本标记语言的结构包括 “头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的 具体内容。

简介:在论坛中经常有网友问到,可以在一个html的文件傍边读取另一个html文件的内容吗?谜底是确定的,而且体式格局不只一种,在以前我只会利用iframe来引用,后来发现了此外的几种体式格局,那今天就总结这几种体式格局让大师参考一下,本人感受第三种体式格局较好!1.IFrame引入,看看下面的代码<IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 marginheight=0 SRC="import.htm" ></IFRAME>你会看到一个外部引入的文件,但会发现有一个近似外框的工具将其包抄,可利用:<iframe name="content_frame" marginwidth=0 marginheight=0 width=100% height=30 src="import.htm" frameborder=0></iframe>但你会发现还会有点问题,就是布景色分歧,你只要在引入的文件import.htm中利用不异的布景色也可以,但若是你利用的是IE5.5的话,可以看看这篇关于透明色的文章 若是想引入的文件过长时不呈现滚动条的话在import.htm中的body中插手scroll=no2.<object>体式格局<object style="border:0px" type="text/x-scriptlet" data="import.htm" width=100% height=30></object>3.Behavior的download体式格局<span id=showImport></span>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8350008.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存