在 javascript 中交换页面内容。为什么没有解决方案?
Swap page content in javascript. Why isn't there a solution for this?
我想知道这个问题是否真的没有一个实用的解决方案。即,交换网页的 html 内容。
在这种情况下,chrome 不允许 jquery's load() isn't useful because I have to load the file locally for Node-webkit which isn't working because Cross origin requests。
而且我不会创建一个该死的本地主机网络服务器来加载本地 html。
基本上我的问题是,如果我 link 到菜单栏中的其他 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 和 read/parse 的整个文件.. 但仍然存在将整个文件放入 DOM 的问题。
fs.createReadStream('./path_to_file.html').pipe(parser);
没有简单、标准的纯 javascript 方式来在本地交换内容而无需疯狂的黑客攻击或外部库吗?在像 Electron and NW 这样的工具在桌面应用程序开发中变得越来越流行的这些日子里,Web 不是为此而设计的吗?是否不需要为此实施一些解决方案?
我不熟悉在 Node-webkit 中使用它,但我知道如果您正在加载文件,则执行 AJAX 请求:// url 通常会抛出 CORS 错误. AJAX 不是为在文件系统上工作而设计的,它是为在网络上工作而设计的,因此在您的应用程序中实现一个简单的网络服务器可能是最简单的解决方案。
另一种方法是创建一个 "build" 方法,将每个页面模板的内容插入到主模板中,然后加载它。这样你就可以只使用 jQuery 来替换你的内容 div 的内容就可以了。
我认为你在混合不同的东西。
当您使用 node.js 时,您是在服务器端。这意味着您将向浏览器或其他应用程序发送一些内容,您将得到答案。为此,您正在定义事件。如果你想从你的服务器向浏览器发送事件,你必须在那里定义一些监听器。
如果您有一个网页,您还可以包含一些 jQuery,浏览器将在客户端对其进行解释。如果您希望 html 内容发生变化,当用户单击 link 时,您应该使用 jQuery(在客户端)。使用 jQuery 您还可以定义加载另一个页面的哪些元素。
另一种你也可以与 Electron 一起使用的方法是 JSON 文件。您可以在那里定义更长的文本。您可以在浏览器中加载它们,并且可以通过 require 使用 node.js 轻松导入它们。您还可以使用一个 JSON 文件,它定义了您要加载的其他 JSON 个文件。
但是你应该想一想,electron app是基于web技术的,但它不是本地的webserver,也不是本地的网页。因为您可以通过 html 视图直接与 node.js 通信,这是完全不同的。
如果文件在本地并包含 HTML,您可以使用 Node 文件系统模块加载文件,然后将内容设置为 DOM 对象的内部 HTML -不需要外部库。
我在下面扩展了您的示例。我使用了同步 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>
我想知道这个问题是否真的没有一个实用的解决方案。即,交换网页的 html 内容。
在这种情况下,chrome 不允许 jquery's load() isn't useful because I have to load the file locally for Node-webkit which isn't working because Cross origin requests。 而且我不会创建一个该死的本地主机网络服务器来加载本地 html。
基本上我的问题是,如果我 link 到菜单栏中的其他 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 和 read/parse 的整个文件.. 但仍然存在将整个文件放入 DOM 的问题。
fs.createReadStream('./path_to_file.html').pipe(parser);
没有简单、标准的纯 javascript 方式来在本地交换内容而无需疯狂的黑客攻击或外部库吗?在像 Electron and NW 这样的工具在桌面应用程序开发中变得越来越流行的这些日子里,Web 不是为此而设计的吗?是否不需要为此实施一些解决方案?
我不熟悉在 Node-webkit 中使用它,但我知道如果您正在加载文件,则执行 AJAX 请求:// url 通常会抛出 CORS 错误. AJAX 不是为在文件系统上工作而设计的,它是为在网络上工作而设计的,因此在您的应用程序中实现一个简单的网络服务器可能是最简单的解决方案。
另一种方法是创建一个 "build" 方法,将每个页面模板的内容插入到主模板中,然后加载它。这样你就可以只使用 jQuery 来替换你的内容 div 的内容就可以了。
我认为你在混合不同的东西。
当您使用 node.js 时,您是在服务器端。这意味着您将向浏览器或其他应用程序发送一些内容,您将得到答案。为此,您正在定义事件。如果你想从你的服务器向浏览器发送事件,你必须在那里定义一些监听器。
如果您有一个网页,您还可以包含一些 jQuery,浏览器将在客户端对其进行解释。如果您希望 html 内容发生变化,当用户单击 link 时,您应该使用 jQuery(在客户端)。使用 jQuery 您还可以定义加载另一个页面的哪些元素。
另一种你也可以与 Electron 一起使用的方法是 JSON 文件。您可以在那里定义更长的文本。您可以在浏览器中加载它们,并且可以通过 require 使用 node.js 轻松导入它们。您还可以使用一个 JSON 文件,它定义了您要加载的其他 JSON 个文件。
但是你应该想一想,electron app是基于web技术的,但它不是本地的webserver,也不是本地的网页。因为您可以通过 html 视图直接与 node.js 通信,这是完全不同的。
如果文件在本地并包含 HTML,您可以使用 Node 文件系统模块加载文件,然后将内容设置为 DOM 对象的内部 HTML -不需要外部库。
我在下面扩展了您的示例。我使用了同步 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>