Question

Hello所有我最近开始使用html，但我想在这种情况下我想要从一个html页面发送一个值到下一个html页面，就像网站在注册成功后如何显示我们的名字一样。这里我有写了两个html页面，

pageOne.html

<!DOCTYPE html>
<head>
<title>
Home
</title>
<meta charset="UTF-8">
</head>
<style>
.myP{
color: lightgreen;}
</style>
<body>
<p id="p1" class="myP" onclick="myFun()">DataSend</p>
</body>
<script>
function myFun(){
document.getElementById("p1").style.color = "blue";
var textprevi=document.getElementById("p1").innerHTML;
localStorage.setItem("message", textprevi); 
window.open("pageTwo.html","_self");
}
</script>
</html>

和我的第二个

pageTwo.html

<!DOCTYPE html>
<html>
<body onload="fun">
<input type="text" id="tBox">
</body>
<script>
function fun()
{
document.getElementById("tBox").innerHTML = localStorage.getItem("message");
}

</script>
</html>

但是当我尝试上述解决方案时，id =＆＃34; tBox ＆＃34;是空的，但我希望它充满价值=＆＃34; DataSend＆＃34;来自pageOne.html。请帮我解决这个问题。提前谢谢。

Answer 1

问题在于这一行

document.getElementById("tBox").innerHTML = localStorage.getItem("message");

这里tBox是一个输入元素。因此，您必须使用value而不是innerHTML

document.getElementById("tBox").value= localStorage.getItem("message");

Answer 2

您可以使用查询字符串参数来执行此操作在第一页：

function myFun(){
  document.getElementById("p1").style.color = "blue";
  var textprevi=document.getElementById("p1").innerHTML;
  window.open("pageTwo.html?data=" + textprevi,"_self");
}

在第2页

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var data = getParameterByName('data');

Answer 3

你在pageTwo.html中犯了两个错误。

<!DOCTYPE html>
<html>
<body onload="fun()"><!-- You didn't invoke the function here -->
<input type="text" id="tBox">
</body>
<script>
function fun()
{
document.getElementById("tBox").value = localStorage.getItem("message"); // You need to set the value for input fields, not innerHTML.
}

</script>
</html>

这些更改应该可以使您的代码正常工作。

将javascript变量从一个html页面传递到另一个页面

3 个答案: