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, i.e.:

    <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 divs in the index.html do I need to call these files for every single div?

object is not a div, it's another document with its own context - and this context doesn't have direct access to its parent window and variables defined there. — raina77ow
– raina77ow, Commented Oct 11, 2020 at 18:58
you shoule not be injecting javascipt like that. js must be initalised at the end of the page so that it waits for everything to load. now in your case you could create different js file for your logic and include it at the end of index.html — Harkal
– Harkal, Commented Oct 11, 2020 at 18:59
if you still want your code to be in different files then i can give you some hint if you wanta — Harkal
– Harkal, Commented Oct 11, 2020 at 19:31

halfer · Accepted Answer · 2021-08-13 09:41:12Z

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.

edited Aug 13, 2021 at 9:41

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Oct 11, 2020 at 19:47

Harkal

1,82815 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Hasan A Yousef Over a year ago

Great, that, can you explain why to: /*remove the attribute, and call this function once more:*/

Harkal Over a year ago

what if the header.html have another source attribute ? so that it loads more source code

Harkal Over a year ago

@HasanAYousef please accept the answer i m need of reputation ;)

Harkal Over a year ago

you need to removeAttribute because the function has to run again and you dont want to load the content again and includeSource is running again beacause if the header.html have some more source attributes then it can load that as well. this is all i had in my mind while writing this thing

Harkal Over a year ago

@HasanAYousef i leave it to you to discoveer that out ;) feeling sleepy. btw i loved the question. such questions are rarely seen on SO

|

Collectives™ on Stack Overflow

Embedding multiple pages with same header in multiple <div>

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related