使用javascript同时更新两个html文件
我对这个话题很陌生，所以这可能是一个简单的问题，但我无法通过谷歌搜索来回答 我有两个HTML文件和一个javascript文件（见下文）。第一个HTML文件包含一个输入字段，用户可以在其中输入以摄氏度为单位的温度。然后使用名为“convTemp”的javascript函数将该数字转换为以开尔文为单位的温度 问题是输出。我希望将结果打印在两个HTML页面上（在“使用javascript同时更新两个html文件,javascript,jquery,html,local-storage,session-storage,Javascript,Jquery,Html,Local Storage,Session Storage,我对这个话题很陌生，所以这可能是一个简单的问题，但我无法通过谷歌搜索来回答 我有两个HTML文件和一个javascript文件（见下文）。第一个HTML文件包含一个输入字段，用户可以在其中输入以摄氏度为单位的温度。然后使用名为“convTemp”的javascript函数将该数字转换为以开尔文为单位的温度 问题是输出。我希望将结果打印在两个HTML页面上（在“要替换的文本中），但目前它仅适用于其中一个文件。如何修改javascript文件/HTML文件以同时更新两个HTML文件而不是一个？欢迎评
要替换的文本中），但目前它仅适用于其中一个文件。如何修改javascript文件/HTML文件以同时更新两个HTML文件而不是一个？欢迎评论！如果不可能使用javascript，那么还能怎么做呢
以下是我用一个小玩具示例演示问题时使用的文件： HTML文件编号1：<html>
<head>
<title>JavaScript-Test</title>
<script src="JSfunc.js" type="text/javascript"></script>
</head>
<body>
<form name="Calc">
<input type="text" name="myNumber" size="3">
<input type="button" value="convert temperatures" onclick="convTemp(document.Calc.myNumber.value, 'output')"><BR>
<p id="output">Here the output will appear and a new tab will open as well.</p>
</body>
</html>
function convTemp(x) {
var res = parseFloat(x) + 273.15;
/*window.open('htmlfile2.html'); /*, "_self" */
if (typeof(Storage) != "undefined") {
localStorage.setItem("resCalc", res);
window.location.href = 'htmlfile2.html';
document.getElementById("output").innerHTML = x + " degrees are " + localStorage.getItem("resCalc") + " Kelvin.";
}
else {
document.getElementById("output").innerHTML = "Sorry, your browser does not support Web Storage...";
}
}
var otherwindow = window.open("htmlfile2.html");
otherwindow.postMessage({ x: x, res: res }, "*");
<html>
<head>
<title>HTML number 2</title>
<script src="JSfunc.js" type="text/javascript"></script>
</head>
<body>
<p id="output">This replacement does not work yet</p>
</body>
</html>
window.addEventListener("message", function (ev) {
// Update your HTML using ev.data
});
var otherwindow = window.open("htmlfile2.html");
otherwindow.postMessage({ x: x, res: res }, "*");
<html>
<head>
<title>HTML number 2</title>
<script src="JSfunc.js" type="text/javascript"></script>
</head>
<body>
<p id="output">This replacement does not work yet</p>
</body>
</html>
window.addEventListener("message", function (ev) {
// Update your HTML using ev.data
});
您只能使用javascript更改当前DOM，但在更改一个页面上的数据后，您可以使用cookies等工具获取两个页面上显示的数据。最好，如果您也使用php或任何服务器端语言，方法是将条目保存在数据库中并从数据库中提取它们 这里有一个从中获取的函数，用于创建和检索cookie
var createCookie = function(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
else {
expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
<html>
<head>
<title>JavaScript-Test</title>
<script src="JSfunc.js" type="text/javascript"></script>
</head>
<body>
<form name="Calc">
<input type="text" name="myNumber" id="myNumber" size="3">
<input type="button" value="convert temperatures" onclick="convTemp(document.Calc.myNumber.value, 'output')"><BR>
<p id="output">Here the output will appear and a new tab will open as well.</p>
</body>
</html>
<html>
<head>
<title>JavaScript-Test Page2</title>
<script src="JSfunc2.js" type="text/javascript"></script>
</head>
<body>
<p id="output">Here the output will appear and a new tab will open as well.</p>
</body>
</html>
您只能使用javascript更改当前DOM，但在更改一个页面上的数据后，您可以使用cookies等工具获取两个页面上显示的数据。最好，如果您也使用php或任何服务器端语言，方法是将条目保存在数据库中并从数据库中提取它们 这里有一个从中获取的函数，用于创建和检索cookie
var createCookie = function(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
else {
expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
<html>
<head>
<title>JavaScript-Test</title>
<script src="JSfunc.js" type="text/javascript"></script>
</head>
<body>
<form name="Calc">
<input type="text" name="myNumber" id="myNumber" size="3">
<input type="button" value="convert temperatures" onclick="convTemp(document.Calc.myNumber.value, 'output')"><BR>
<p id="output">Here the output will appear and a new tab will open as well.</p>
</body>
</html>
<html>
<head>
<title>JavaScript-Test Page2</title>
<script src="JSfunc2.js" type="text/javascript"></script>
</head>
<body>
<p id="output">Here the output will appear and a new tab will open as well.</p>
</body>
</html>
把它放在查询栏里
window.open('htmlfile2.html?temp=' + encodeURIComponent(res));
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var temp = getParameterByName('temp');
console.log(temp);
把它放在查询栏里
window.open('htmlfile2.html?temp=' + encodeURIComponent(res));
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var temp = getParameterByName('temp');
console.log(temp);
通过使用localStorage——正如epascarello和Michael所建议的那样——我可以解决这个问题，尽管我怀疑它是否最美观 以下是文件，可能是其他人遇到了此问题，或者以后可以建议更好的解决方案： htmlFile1.html：
<html>
<head>
<title>JavaScript-Test</title>
<script src="JSfunc.js" type="text/javascript"></script>
</head>
<body>
<form name="Calc">
<input type="text" name="myNumber" size="3">
<input type="button" value="convert temperatures" onclick="convTemp(document.Calc.myNumber.value)"><BR>
<div id="output">Here the output will appear and a new tab will open as well.</div>
</html>
欢迎评论/改进 通过使用localStorage（正如epascarello和Michael所建议的那样），我可以解决这个问题，尽管我怀疑它是否最美观 以下是文件，可能是其他人遇到了此问题，或者以后可以建议更好的解决方案： htmlFile1.html：
<html>
<head>
<title>JavaScript-Test</title>
<script src="JSfunc.js" type="text/javascript"></script>
</head>
<body>
<form name="Calc">
<input type="text" name="myNumber" size="3">
<input type="button" value="convert temperatures" onclick="convTemp(document.Calc.myNumber.value)"><BR>
<div id="output">Here the output will appear and a new tab will open as well.</div>
</html>
欢迎评论/改进 你需要一些后端。javascript可以从第一个页面向服务器发送ajax，服务器可以发送信号更新第二个页面OK，我该怎么做？你能提供一些关键词或什么吗？谢谢（为什么这个问题在出现10秒后就被否决了？）你在后端使用的是哪种技术？@epascarello:这些文件目前就在同一个文件夹中。就这样。输入数字后，调用javascript函数并使用“window.open”打开第二页。目前没有其他连接，但似乎需要其他连接。@kpblc:目前，这些文件位于同一文件夹中，但我也可以将它们上载到服务器。为此，您需要一些后端。javascript可以从第一个页面向服务器发送ajax，服务器可以发送信号更新第二个页面OK，我该怎么做？你能提供一些关键词或什么吗？谢谢（为什么这个问题在出现10秒后就被否决了？）你在后端使用的是哪种技术？@epascarello:这些文件目前就在同一个文件夹中。就这样。输入数字后，调用javascript函数并使用“window.open”打开第二页。目前没有其他连接，但似乎需要其他连接。@kpblc:目前，这些文件仅位于同一文件夹中，但我也可以将它们上载到服务器。好的，谢谢，我将阅读相关内容。你知道如何将其应用于我的案例吗？@Cleb我补充了一个简短的例子：汉克斯，我要试试看！好的，谢谢，我会读的。你知道如何将其应用于我的案例吗？@Cleb我补充了一个简短的例子：汉克斯，我要试试看！谢谢你这么长的回答。我会试试的。用饼干不是最好的主意。Localstorage会更好。是的，这是真的，我在写答案时也考虑过Localstorage@ePascarello本地存储解决方案是什么样子的？谢谢@所有人：虽然我还没有尝试所有的解决方案，但我会投票给所有人，再次感谢你的帮助@Epasarello和michael我现在尝试了这个本地存储解决方案，但仍然不起作用；只更新第一页。编辑后的代码可以在上面找到。如果你能帮我，那就太好了，谢谢！谢谢你这么长的回答。我会试试的。用饼干不是最好的主意。Localstorage会更好。是的，这是真的，我在写答案时也考虑过Localstorage@ePascarello本地存储解决方案是什么样子的？谢谢@所有人：虽然我还没有尝试所有的解决方案，但我会投票给所有人，再次感谢你的帮助@Epasarello和michael我现在尝试了这个本地存储解决方案，但仍然不起作用；只有