如何在一个html文件中引入另一个html文件

html-css016

如何在一个html文件中引入另一个html文件,第1张

在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),其中“头”部提供关于网页的信息,“主体”部分提供网页的 具体内容。

<!--第一种:jquery获取dom内的id,直接加载想要引入的页面-->

 

        <div id="page"></div>

        <script>

            $("#page").load("header.html")

        </script>

<!--第二种:引入include.js文件,然后用include标签加载想要的页面

            代码如下-->

 

        <script>

            (function(window, document, undefined) {

    var Include39485748323 = function() {}

    Include39485748323.prototype = {

        //倒序循环

        forEach: function(array, callback) {

            var size = array.length

            for(var i = size - 1 i >= 0 i--){

                callback.apply(array[i], [i])

            }

        },

        getFilePath: function() {

            var curWwwPath=window.document.location.href

            var pathName=window.document.location.pathname

            var localhostPaht=curWwwPath.substring(0,curWwwPath.indexOf(pathName))

            var projectName=pathName.substring(0,pathName.substr(1).lastIndexOf('/')+1)

            return localhostPaht+projectName

        },

        //获取文件内容

        getFileContent: function(url) {

            var ie = navigator.userAgent.indexOf('MSIE') > 0

            var o = ie ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest()

            o.open('get', url, false)

            o.send(null)

            return o.responseText

        },

        parseNode: function(content) {

            var objE = document.createElement("div")

            objE.innerHTML = content

            return objE.childNodes

        },

        executeScript: function(content) {

            var mac = /<script>([\s\S]*?)<\/script>/g

            var r = ""

            while(r = mac.exec(content)) {

                eval(r[1])

            }

        },

        getHtml: function(content) {

            var mac = /<script>([\s\S]*?)<\/script>/g

            content.replace(mac, "")

            return content

        },

        getPrevCount: function(src) {

            var mac = /\.\.\//g

            var count = 0

            while(mac.exec(src)) {

                count++

            }

            return count

        },

        getRequestUrl: function(filePath, src) {

            if(/http:\/\//g.test(src)){ return src }

            var prevCount = this.getPrevCount(src)

            while(prevCount--) {

                filePath = filePath.substring(0,filePath.substr(1).lastIndexOf('/')+1)

            }

            return filePath + "/"+src.replace(/\.\.\//g, "")

        },

        replaceIncludeElements: function() {

            var $this = this

            var filePath = $this.getFilePath()

            var includeTals = document.getElementsByTagName("include")

            this.forEach(includeTals, function() {

                //拿到路径

                var src = this.getAttribute("src")

                //拿到文件内容

                var content = $this.getFileContent($this.getRequestUrl(filePath, src))

                //将文本转换成节点

                var parent = this.parentNode

                var includeNodes = $this.parseNode($this.getHtml(content))

                var size = includeNodes.length

                for(var i = 0 i < size i++) {

                    parent.insertBefore(includeNodes[0], this)

                }

                //执行文本中的额javascript

                $this.executeScript(content)

                parent.removeChild(this)

                //替换元素 this.parentNode.replaceChild(includeNodes[1], this)

            })

        }

    }

    window.onload = function() {

        new Include39485748323().replaceIncludeElements()

    }

})(window, document)

        </script>

        <!--下面引入文件-->

<include src="header.html"></include>

 

<!--第三种: 用inframe框架加载页面, 兼容性不好-->

 

<iframe src="xxx.html"></iframe>