请问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>

 body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {

            margin: 0

            padding: 0

        }

        * {

            box-sizing: border-box

        }

        table{

            border-collapse:collapse

        }

        body {

            font-family: "Microsoft YaHei"

        }

        ul, li {

            list-style: none

        }

        a {

            text-decoration: none

            color: #232323

        }

        input, textarea {

            outline: none

            box-shadow: none

        }

        textarea {

            resize: none

            overflow: auto

        }

        .clearfix {

            zoom: 1

        }

        .clearfix:after {

            content: "."

            width: 0

            height: 0

            visibility: hidden

            display: block

            clear: both

        }

        .fl {

            float: left        }

        .fr {

            float: right        }

        .tl {

            text-align: left

        }

        .tc {

            text-align: center        }

        .tr {

            text-align: right

        }

        .ellipse {

            overflow: hidden

            text-overflow: ellipsis

            white-space: nowrap

        }

---