Embedding multiple pages with same header in multiple <div>

Question

I want to embed url http://localhost:8081/static/bar.html in the main div at my index.html , so I wrote the below:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Awesome echarts</title>
        <script src="https://go-echarts.github.io/go-echarts-assets/assets/echarts.min.js"></script>
        <link href="https://go-echarts.github.io/go-echarts-assets/assets/bulma.min.css" rel="stylesheet">
    </head>
    <body>
        <div id="main">
            <object id="foo" name="foo" type="text/html" data="http://localhost:8081/static/bar.html"></object>
        </div>
    </body>
</html>

Where my bar.html is:

<div class="select" style="margin-right:10px; margin-top:10px; position:fixed; right:10px;"></div>

<div class="container">
    <div class="item" id="eeUwxscJvXae"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    var myChart_eeUwxscJvXae = echarts.init(document.getElementById('eeUwxscJvXae'), "white");
    var option_eeUwxscJvXae = {
        title: {"text":"Bar-示例图",},
        tooltip: {},
        legend: {},
        toolbox: {"show":true,"feature":{"saveAsImage":{},"dataZoom":{},"dataView":{},"restore":{}}},
        xAxis: [{"data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"axisLabel":{"show":true},"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        series: [
        {"name":"商家A","type":"bar","data":[43,10,4,12,6,38],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"商家B","type":"bar","data":[21,44,37,19,32,34],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_eeUwxscJvXae.setOption(option_eeUwxscJvXae);
</script>

<style>
    .container {margin-top:30px; display: flex;justify-content: center;align-items: center;}
    .item {margin: auto;}
</style>

But While loading it at the browser, I got an error:

Uncaught ReferenceError: echarts is not defined
    at bar.html:9

Why this is happening, is not it assumed that sub div are calling the header in the caller file?

I got it resolved by re-wriitng the header in the bar.html file, ie:

    <head>
        <script src="https://go-echarts.github.io/go-echarts-assets/assets/echarts.min.js"></script>
        <link href="https://go-echarts.github.io/go-echarts-assets/assets/bulma.min.css" rel="stylesheet">
    </head>

But is not this meaning double loading of the echarts.min.js and the bulma.min.css and what if I wanted to embed multiple pages like this, in multiple div s in the index.html do I need to call these files for every single div?

Answer 1

This is an example that I just tested. It works fine, and will suffice for your purpose.

index.html

<html>

<head>

</head>

<body>
    <div source="header.html"></div>
    <script>
        window.test = "this is a test";

        function includeSource() {
            var z, i, elmnt, file, xhttp;
            /*loop through a collection of all HTML elements:*/
            z = document.getElementsByTagName("*");
            for (i = 0; i < z.length; i++) {
                elmnt = z[i];
                /*search for elements with a certain attribute:*/
                file = elmnt.getAttribute("source");
                if (file) {
                    /*make an HTTP request using the attribute value as the file name:*/
                    xhttp = new XMLHttpRequest();
                    xhttp.onreadystatechange = function() {
                        if (this.readyState == 4) {
                            if (this.status == 200) {
                                elmnt.innerHTML = this.responseText;
                            // now we'll run the js if there is some direct js code in script tags
                            var html = document.createElement('html');
                            html.innerHTML = this.responseText;
                            const scripts = html.getElementsByTagName("script");
                            for (const script of scripts) {
                                eval(script.innerText);
                            }
                            }
                            if (this.status == 404) {
                                elmnt.innerHTML = "Page not found.";
                            }
                            /*remove the attribute, and call this function once more:*/
                            elmnt.removeAttribute("source");
                            includeSource();
                        }
                    }
                    xhttp.open("GET", file, true);
                    xhttp.send();
                    /*exit the function:*/
                    return;
                }
            }
        };
        includeSource();
    </script>
</body>

</html>

header.html

<style>
    .header {
        font-size: 50px;
        color: blueviolet;
    }
</style>

<div class="header">
    <span>Test</span>
    <button onclick="console.log(window.test)">click me</button>
</div>
<script>
    console.log(window.test);
</script>

Observe the source attribute on the div; it'll be used to define the path of the html file you want to load and you can include your JS and CSS in the same file.

Embedding multiple pages with same header in multiple <div>

Question

1 answers

solution1
1 ACCPTED 2020-10-11 19:47:12

Embedding multiple pages with same header in multiple <div>

Question

1 answers

solution1 1 ACCPTED 2020-10-11 19:47:12

solution1
1 ACCPTED 2020-10-11 19:47:12