请问html页面怎么引入公共的Html页面呢？

<!--第一种：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>

通过嵌套iframe 实现引用html页面

<script type="text/javascript">

$(function () {

document.getElementById("ifm").src =""//Url地址

$("#ifm").load(function () {

var h = document.body.clientHeight

var w = document.body.clientWidth

document.getElementById("ifm").height = h + "px"

document.getElementById("ifm").width = w + "px"

})

})

</script>

<body style="overflow-y:hiddenoverflow-x:hidden">

<div id="pageone" style="">

<iframe name="ifm" id="ifm" scrolling="yes" style="background-color: transparent" marginwidth="0" marginheight="0" frameborder="0">

</iframe>

</div>

</body>

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

1、用iframe标签

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

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

2、用object标签

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

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

扩展资料：

1、iframe标签定义及使用说明：

<iframe>标签规定一个内联框架。

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

2、object标签定义和用法

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

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

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

参考资料来源：百度百科-HTML

参考资料来源：百度百科-iframe

---