Javascript 将具有相同标题的多个页面嵌入到多个<；部门>；_Javascript_Html

Javascript 将具有相同标题的多个页面嵌入到多个<；部门>；

javascript html

Javascript 将具有相同标题的多个页面嵌入到多个<；部门>；,javascript,html,Javascript,Html,我想嵌入urlhttp://localhost:8081/static/bar.html在我的index.html的主div中，我写了以下内容： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Awesome echarts</title> <script src=&quo

我想嵌入url

http://localhost:8081/static/bar.html

在我的

index.html

的主

div

中，我写了以下内容：

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

但在浏览器中加载时，我出现了一个错误：

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调用这些文件？

这是一个我刚刚测试过的测试示例，工作正常，可以满足您的需要

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 atrribute:*/
                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>


window.test=“这是一个测试”；
函数includeSource（）{
var z，i，elmnt，file，xhttp；
/*循环浏览所有HTML元素的集合：*/
z=document.getElementsByTagName（“*”）；
对于（i=0；i


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>


.标题{
字体大小：50px；
颜色：蓝紫色；
}
试验
点击我
console.log（window.test）；

观察div上的source
属性，它将用于定义要加载的html文件的路径，您可以将js和css包含在同一个文件中
它起作用了
如果出现问题，请告诉我；）
 对象
不是一个div
，它是另一个具有自己上下文的文档-并且此上下文不能直接访问其父窗口

和其中定义的变量。您不应该像这样注入javascipt。js必须在页面末尾初始化，以便等待加载所有内容。现在，在您的例子中，您可以为您的逻辑创建不同的js文件，并将其包含在

index.html

@HasanAYousef wait的末尾。如果您仍然希望代码位于不同的文件中，那么如果您愿意，我可以给您一些提示wanta@HasanAYousef好的，等等，我想出了一个好主意，你能解释一下为什么：

/*删除属性，然后再次调用此函数：//

如果header.html有另一个

源属性怎么办？以便加载更多的源代码code@HasanAYousef请接受我需要名誉的回答；）您需要removeAttribute
，因为函数必须再次运行，您不想再次加载内容，includeSource
正在再次运行，因为如果header.html具有更多的源属性，那么它也可以加载这些属性。这就是我写这篇文章时脑子里想的一切thing@HasanAYousef我把它留给你去发现；）感到困倦。顺便说一句，我喜欢这个问题。这样的问题在这样的情况下很少见
<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>