在多個頁面中嵌入具有相同標題的多個頁面<div>

Question

我想在index.html的主div中嵌入 url http://localhost:8081/static/bar.html ，所以我寫了以下內容：

<!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>

我的bar.html在哪里：

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

但是在瀏覽器中加載它時，我收到一個錯誤：

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

為什么會發生這種情況，是不是假設 sub div 正在調用調用者文件中的標題？

我通過重寫bar.html文件中的標題來解決它，即：

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

但這不意味着echarts.min.js和bulma.min.css雙重加載，如果我想像這樣嵌入多個頁面，在index.html多個div中我需要調用這些文件嗎？每一個div？

Answer 1

這是我剛剛測試的一個例子。 它工作正常，足以滿足您的目的。

索引.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>

標題.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>

觀察div上的source屬性； 它將用於定義要加載的 html 文件的路徑，您可以將 JS 和 CSS 包含在同一文件中。

在多個頁面中嵌入具有相同標題的多個頁面<div>

問題描述

1 個解決方案

解決方案1
1 已采納 2020-10-11 19:47:12

在多個頁面中嵌入具有相同標題的多個頁面<div>

問題描述

1 個解決方案

解決方案1 1 已采納 2020-10-11 19:47:12

解決方案1
1 已采納 2020-10-11 19:47:12