单页Webapp中的Javascript执行问题_Web_Web Applications_Single Page Application

单页Webapp中的Javascript执行问题

web web-applications

单页Webapp中的Javascript执行问题,web,web-applications,single-page-application,Web,Web Applications,Single Page Application,我一直在尝试设计一个单页webapp（一个游戏），将不同的HTML文档动态加载到单个网页中我使用纯Javascript（没有库），并使用XMLhttprequest下载HTML文件并在单个网页上动态显示它们。除了Javascript之外，这一切都非常有效因为我的Javascript无法知道在任何时候加载了哪个动态文档，所以我的所有脚本都在尝试运行，并且在脚本尝试访问页面上不存在的元素时，会导致大量错误我需要能够动态下载和运行Javascript文件，或者我需要能够检测我正在显示的HTML文

我一直在尝试设计一个单页webapp（一个游戏），将不同的HTML文档动态加载到单个网页中

我使用纯Javascript（没有库），并使用XMLhttprequest下载HTML文件并在单个网页上动态显示它们。除了Javascript之外，这一切都非常有效

因为我的Javascript无法知道在任何时候加载了哪个动态文档，所以我的所有脚本都在尝试运行，并且在脚本尝试访问页面上不存在的元素时，会导致大量错误

我需要能够动态下载和运行Javascript文件，或者我需要能够检测我正在显示的HTML文档，并且只激活相关的Javascript代码

有人知道我的问题的解决方案吗，或者有更好的想法吗

谢谢

Barry

我能理解你的问题，你想根据特定场景动态加载所有内容，首先在呈现HTML时，我建议您使用MVC和observer模式，其次，要动态加载脚本，您需要

场景1：加载（['script1'，'script2']）

场景2：加载（['script2'，'script3']））

场景3：加载（['script1']）

这就是你想要的吗？

我已经设法自己编写了解决方案，谢谢

解决方案说明。

它加载一个JSON文件。JSON文件中是表示我的网站的对象列表。每个JSON网页都有一个HTML网页地址和我想要加载的所有JavaScript文件的列表。请注意，此文件中的一些对象是供我的程序将来使用的

然后，它使用XMLhttpRequest获取JSON文件中的第一个网页，并将内容放入index.html页面

在load_javascript（x）函数下，它首先通过查找datajsloader属性来尝试删除任何先前动态添加的javascript文件。这是一个自定义属性，我的程序将其附加到任何动态添加的JavaScript，以便在用户更改我程序中的网页时可以找到并删除它

在相同的函数（load_javascript）中，程序将遍历需要动态添加到当前页面的javascript文件列表，然后将数据jsloader附加到当前页面

我为什么这么做。

我正在编写一个多线程、多玩家的Facebook扑克游戏，它使用web套接字与节点后端服务器进行对话。我在这个游戏中有多个网页，所有这些网页都需要通过web套接字连接到我的后端节点服务器。每次用户在网页之间导航时，WebSocket连接都会重置，网页必须重新连接到服务器

我认为更好的解决方案是有一个网页和一个JavaScript文件，使用web套接字连接到节点后端服务器，我只需更改该网页的内容，即使游戏更改了网站，也保持WebSocket连接的活动状态。到目前为止，它已经奏效了

Javascript文件

let website_data;

(function() {

    let request = new XMLHttpRequest();

    request.open("GET", "/json/mysites.json");

    request.onreadystatechange = function() {
        if(request.readyState === 4 && request.status === 200)
        {       
            website_data = JSON.parse(this.responseText);
            load_webpage(0);
        }
    }

    request.send();
})()


function load_webpage(x)
{
    let xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("app").innerHTML = xhttp.responseText;   
                load_javascript(x);           
        }
    };

    xhttp.open("GET", website_data[x].html_address);
    location.hash = website_data[x].hash;

    xhttp.send();    
}


function load_javascript(x)
{
    let element;

    // gets a list of all 
    let scripts = document.getElementsByTagName("script");

    let t = scripts.length;
    while (t--)
    {
        if(scripts[t].hasAttribute('data-jsloader') && scripts[t].getAttribute('data-jsloader') != x)
        {
            console.log(scripts[t].getAttribute('data-jsloader')); 
            scripts[t].parentNode.removeChild(scripts[t]);
        }
    }

    console.log(document.getElementsByTagName("script"));

    // load javascript files
    for(let i = 0; i < website_data[x].js_script.length; i++)
    {
        // console.log("Adding Javacscript File: " + website_data[x].js_script[i]);
        element = document.createElement('script');
        element.setAttribute("data-jsloader", x.toString());
        element.setAttribute("type", "text/javascript");
        element.setAttribute("src", website_data[x].js_script[i]);
        document.getElementsByTagName("head")[0].appendChild(element);
    }
}

Index.html（加载网页内容的位置）


主销

为什么人们会记下提问的人？真烦人。我只是想得到一些帮助，我只是想最好地解释一下情况。我感谢你的建议，不过我自己已经设法解决了如何做到这一点。我已经用我的代码更新了stackoverflow页面。

[
{
    "page_number":0,
    "html_address":"/views/splashpage.html",
    "hash": "splashpage.html",
    "js_script":["/js/background.js","/js/splashpage.js"]
},
{
    "page_number":1,
    "html_address":"/views/menu.html",
    "hash": "menu.html",
    "js_script":["/js/menu.js"]
},
{
    "page_number":2,
    "html_address":"/views/lobby.html",
    "hash": "lobby.html",
    "js_script":["/js/lobby.js"]
},
{   
    "page_number":3,        
    "html_address":"/views/kingpin.html",
    "hash": "game.html",
    "js_script":["/js/cards.js", 
                 "/js/chat.js", 
                 "/js/chips.js", 
                 "/js/ws_client.js", 
                 "/js/betting_controls.js", 
                 "/js/kingpin.js",
                 "/js/footer.js", 
                 "/js/ads_and_purchases.js"] 
    }
]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kingpin</title>

    <!-- index css -->
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
    <div id="app"></div>


</body>
</html>