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

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

在这种情况下，jquery的load()是没有用的，因为我必须加载文件本地Node-webkit这是不工作的，因为Cross origin请求不允许在chrome上。我不会创建一个该死的localhost webserver只是为了加载一个本地的html片段。

基本上我的问题是，如果我链接到菜单栏中的其他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 linen" + 
        "and this is on anothern" +
        "and this is on a third";

祝你像这样手动连接300行html文件。至少在ES6中有一个更好的方法来做到这一点。

也许我可以使用像node-htmlparser和读取/解析整个文件。但是将整个部分放入DOM中仍然存在问题。

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

有没有简单的，标准的纯javascript的方式来交换本地内容没有疯狂的黑客或外部库?在电子和NW等桌面应用开发工具越来越流行的今天，难道web不是为此而设计的吗?难道没有必要为此实现一些解决方案吗?

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

我在下面扩展了您的示例。我已经使用了同步API，但是您也可以简单地使用异步API。注意，"Page loaded"只出现一次，计时器继续在后台执行。请确保这些文件位于与主页相同的目录中。

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

我不熟悉使用这个在Node-webkit，但我知道，执行AJAX请求，如果你正在加载一个文件://url通常会抛出一个CORS错误。AJAX不是为文件系统设计的，它是为网络设计的，因此在应用程序中实现一个简单的web服务器可能是最简单的解决方案。

另一种方法是创建一个"构建"方法，将每个页面模板的内容插入到主模板中，然后加载它。这样，您就可以使用jQuery替换内容div的内容，这样就可以了。

我想你把不同的东西混在一起了。

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

如果你有一个网页，你也可以包括一些jQuery，浏览器将在客户端解释。如果您想要改变html内容，当用户单击链接时，您应该使用jQuery(在客户端)。使用jQuery，您还可以定义加载另一个页面的哪些元素。

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

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

相关内容

最新更新

热门标签：