在 javascript 中交换页面内容。为什么没有解决方案？答案

【问题标题】：Swap page content in javascript. Why isn't there a solution for this?在 javascript 中交换页面内容。为什么没有解决方案？
【发布时间】：2015-12-10 00:39:09
【问题描述】：

我想知道这个问题是否真的没有单一的实用解决方案。即交换网页的html内容。

在这种情况下，jquery's load() 没有用，因为我必须为 Node-webkit 加载文件本地，这不起作用，因为Cross origin requests 不是允许在铬上。而且我不会仅仅为了加载本地 html 而创建一个令人讨厌的 localhost 网络服务器。

基本上我的问题是，如果我链接到菜单栏中的其他 html 文件，整个 javascript 也会重新加载，这使得无法在后台不中断地保持进程运行。如果 Html 页面重新加载 包括 Javascript 文件在内的所有内容都重新加载。 杀死 Node-webkit Node Js 等的当前进程。

这里有一段代码只是为了说明我不想想要做什么。

<html>
<head>
    <script>
    setInterval(function() {
        console.log("this task can't be interrupted!");
    }, 3000);
    </script>
    <script src="more_important_js_tasks_running_here.js"></script>
</head>
<body>
    <div id="menu">
        <ul class="pure-menu-list">
            <li><a href="file1.html">If I click here I will kill my javascript task 1</a></li>
            <li><a href="file2.html">If I click here I will kill my javascript task 2</a></li>
            <li><a href="file3.html">If I click here I will kill my javascript task 3</a></li>
        </ul>

        <div class="this is the content I would like to change.. maybe 100 lines of code or whatever">


        </div>
    </div>
</body>
</html>

所以我可以把所有东西都放在一个字符串中，然后做

document.body.innerHTML = "<p>whatever</p>”;

但这并不实用，因为没有很好的方法将所有内容放在一行中。将所有内容编码到一行中也可能会意外出错。一大串 html 是不可避免的。

document.body.innerHTML = "<p class="p">If this happens it will break</p>";

多行字符串也不是一个好的选择

var str = "Javascript \ 
    multi-line \
    strings \
    are \
    awful";

没有简单的方法可以将您的代码复制粘贴到其中，并且此代码可能会因为任何转义字符后的一个空格而中断。也许串联？

var a = "hey man, this is on a line\n" + 
        "and this is on another\n" +
        "and this is on a third";

祝你好运，像这样手动连接你的 300 行 html 文件。至少there is a better way to do this in ES6.

也许我可以使用 node-htmlparser 之类的东西并读取/解析整个文件。但仍然存在将整个文件放入 DOM 的问题。

fs.createReadStream('./path_to_file.html').pipe(parser);

是否没有简单、标准的纯 JavaScript 方式来在本地交换内容而无需疯狂的黑客攻击或外部库？网络不是为此而设计的吗？在这些日子里，Electron 和 NW 等工具在桌面应用程序开发中变得越来越流行，难道不需要为此实施一些解决方案吗？

【问题讨论】：

标签： javascript node.js html node-webkit electron

【解决方案1】：

如果文件在本地并包含 HTML，您可以使用 Node FileSystem 模块加载文件，然后将内容设置为 DOM 对象的内部 HTML - 不需要外部库。

我在下面扩展了您的示例。我使用了同步 API，但您也可以轻松使用异步 API。请注意，“页面已加载”出现一次，您的计时器将继续在后台执行。确保文件与主页面位于同一目录中。

<html>
<head>
    <script>
    setInterval(function() {
        console.log("this task can't be interrupted!");
    }, 3000);

    function loadPage(fileName)
    {
        var fs = require('fs');
        fs.readFile(fileName, function (err, data)
        {
            if (err) throw err;
            console.log(data);

            document.getElementById("content").innerHTML = data;
        });
    }
    alert("Page loaded");
</script>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="#" onclick="javascript:loadPage('page1.html')">Page 1</a></li>
            <li><a href="#" onclick="javascript:loadPage('page2.html')">Page 2</a></li>
        </ul>
        <div id="content" />
    </div>
</body>
</html>

【讨论】：

【解决方案2】：

我不熟悉在 Node-webkit 中使用它，但我知道如果您正在加载 file:// url，执行 AJAX 请求通常会引发 CORS 错误。 AJAX 不是为在文件系统上工作而设计的，它是为通过网络工作而设计的，因此在您的应用中实现一个简单的 Web 服务器可能是最简单的解决方案。

另一种方法是创建一个“构建”方法，将每个页面模板的内容插入到主模板中，然后加载它。这样你就可以使用 jQuery 来替换你的内容 div 的内容，你会一切都好。

【讨论】：

【解决方案3】：

我认为你在混合不同的东西。

当您使用 node.js 时，您处于服务器端。这意味着您将向浏览器或其他应用程序发送一些内容，然后您将得到答案。为此，您正在定义事件。如果你想从你的服务器向浏览器发送事件，你必须在那里定义一些监听器。

如果您有一个网页，您还可以包含一些 jQuery，浏览器将在客户端解释这些 jQuery。如果您希望更改 html 内容，当用户单击链接时，您应该使用 jQuery（在客户端）。使用 jQuery，您还可以定义加载另一个页面的哪些元素。

另一种方式，您也可以与 Electron 一起使用 JSON 文件。在那里你可以定义更长的文本。您可以在浏览器中加载它们，并且可以通过 require 使用 node.js 轻松导入它们。您也可以使用一个 JSON 文件，它定义了您要加载的其他 JSON 文件。

但是您应该考虑一下，电子应用程序是基于网络技术的，但它不是本地网络服务器或本地网页。因为您可以通过完全不同的 html 视图直接与 node.js 通信。

【讨论】：