使用javascript同时更新两个html文件 [英] Update two html files at the same time using javascript
问题描述
我有两个HTML文件和一个JavaScript文件（见下文）。第一个HTML文件包含一个输入字段，用户可以输入摄氏度的温度。然后使用名为convTemp的javascript函数将此数字转换为Kelvin温度。
问题是输出。我想要在两个HTML页面上打印结果（在< p id =output>要替换的文本中< / p>），但目前它仅适用于其中一个文件。如何修改javascript文件/ HTML文件以同时更新两个HTML文件，而不仅仅是一个？欢迎任何评论！如果它不可能使用JavaScript，还有什么可以做的？
以下是我使用小玩具示例演示问题的文件：
HTML档案编号1：
< html>
< head>
< title> JavaScript-Test< / title>
< script src =JSfunc.jstype =text / javascript>< / script>
< / head>
< body>
< form name =Calc>
< input type =textname =myNumbersize =3>
< input type =buttonvalue =convert temperaturesonclick =convTemp（document.Calc.myNumber.value，'output'）>< BR>
< p id =output>在这里，输出将会出现，同时也会打开一个新标签。< / p>
< / body>
< / html>
HTML档案编号2：
< HTML>
< head>
< title> HTML编号2< / title>
< script src =JSfunc.jstype =text / javascript>< / script>
< / head>
< body>
< p id =输出>此替换功能尚未运作< / p>
< / body>
< / html>
Javascript档案：
函数convTemp（x，tID）{
var res = parseFloat（x）+ 273.15;
window.open（'htmlfile2.html'）; / *，_self* /
document.getElementById（tID）.innerHTML = x +degrees are+ res +Kelvin。;
}
编辑：
我尝试了localStorage解决方案，但它仍然没有工作。现在，js文件如下所示：
函数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 is+ localStorage.getItem（resCalc）+Kelvin。;
}
else {
document.getElementById（output）。innerHTML =对不起，您的浏览器不支持Web Storage ...;
}
}
任何想法？谢谢！
编辑2：我添加了一个工作解决方案（见下文）。如果任何人有更好的解决方案，请张贴它 - 谢谢！
通过使用localStorage - 如epascarello和Michael建议的 - 可以解决问题，但我怀疑它是最美观的。
以下是这些文件，可能有其他人遇到此问题或稍后可能会提出更好的解决方案：
htmlFile1.html：
< html>
< head>
< title> JavaScript-Test< / title>
< script src =JSfunc.jstype =text / javascript>< / script>
< / head>
< body>
< form name =Calc>
< input type =textname =myNumbersize =3>
< input type =buttonvalue =convert temperaturesonclick =convTemp（document.Calc.myNumber.value）>< BR>
< div id =output>这里会显示输出结果，同时也会打开一个新标签页。< / div>
< / html>
< HTML>
< head>
< title> HTML编号2< / title>
< script src =JSfunc.jstype =text / javascript>< / script>
< / head>
< body>
< div id =output>此替换现在可以正常工作。< / div>
< script> showData（）;< / script>
< / body>
< / html>
和js文件JSfunc.js：
函数convTemp（x）{
var res = parseFloat（x）+ 273.15;
if（typeof（Storage）！=undefined）{
//localStorage.setItem(\"resCalc，resString）;
setData（resCalc，res.toString（））;
setData（origVal，x）;
showData（）;
window.open（'htmlfile2.html'）; //;_self
}
else {
document.getElementById（output）。innerHTML =对不起，您的浏览器不支持Web Storage ...;
}
}
函数setData（tfield，tval）
{
localStorage.setItem（tfield，tval）;
}
函数showData（）
{
var tstr = localStorage.getItem（resCalc）;
var x = localStorage.getItem（origVal）;
document.getElementById（output）。innerHTML = x +degrees is+ tstr +Kelvin。;
}
欢迎评论/改进！
I am very new to this topic so it might be a simple question but I could not answer it by googling.
I have two HTML files and a javascript file (see below). The first HTML file contains an input field where an user can enter a temperature in degree celcius. This number is then converted to the temperature in Kelvin using a javascript function called "convTemp".
Problem is the output. I would like to get the result printed on both HTML pages (in "< p id="output" > text to be replaced < /p >") but currently it works only for one of the files. How can I modify the javascript file/HTML files to update both HTML files at the same time and not only one? Any comments are welcome! If it is not possible using javascript, how else could it be done?
Here are the files I use demonstrating the problem using a small toy example:
HTML file number 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>
HTML file number 2:
<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>
Javascript file:
function convTemp(x, tID) {
var res = parseFloat(x) + 273.15;
window.open('htmlfile2.html'); /*, "_self" */
document.getElementById(tID).innerHTML = x + " degrees are " + res + " Kelvin.";
}
Edit: I tried the localStorage solution but it still does not work. The js file now looks as follows:
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...";
}
}
Any ideas? Thanks!
Edit 2: I added a working solution (see below). If anyone has a better solution, please post it - thanks!
By using localStorage - as suggested by epascarello and Michael - I could solve the problem although I doubt that it is the most aesthetic one.
Here are the files, maybe someone else runs into this problem or can suggest a better solution later on:
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>
htmlfile.2.html:
<html>
<head>
<title>HTML number 2</title>
<script src="JSfunc.js" type="text/javascript"></script>
</head>
<body>
<div id="output">This replacement does work now.</div>
<script>showData();</script>
</body>
</html>
And the js file JSfunc.js:
function convTemp(x) {
var res = parseFloat(x) + 273.15;
if (typeof(Storage) != "undefined") {
//localStorage.setItem("resCalc", resString);
setData("resCalc", res.toString());
setData("origVal", x);
showData();
window.open('htmlfile2.html'); //, "_self"
}
else {
document.getElementById("output").innerHTML = "Sorry, your browser does not support Web Storage...";
}
}
function setData(tfield, tval)
{
localStorage.setItem(tfield, tval);
}
function showData()
{
var tstr = localStorage.getItem("resCalc");
var x = localStorage.getItem("origVal");
document.getElementById("output").innerHTML = x + " degrees are " + tstr + " Kelvin.";
}
Comments/improvements are always welcome!
这篇关于使用javascript同时更新两个html文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
