我是HTML和Javascript的新手,我正在尝试做的是从an HTML文件我想要提取设置那里的东西并another HTML通过文件显示它Javascript
以下是我到目前为止所做的测试:
testing.html
<html>
<head>
<script language="javascript" type="text/javascript" src="asd.js"></script>
</head>
<body>
<form name="form1" action="next.html" method="get">
name:<input type ="text" id="name" name="n">
<input type="submit" value="next" >
<button type="button" id="print" onClick="testJS()"> Print </button>
</form>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
next.html
<head>
<script language="javascript" type="text/javascript" src="asd.js"></script>
</head>
<body>
<form name="form1" action="next.html" method="get">
<table>
<tr>
<td id="here">test</td>
</tr>
</table>
</form>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
asd.js
function testJS()
{
var b = document.getElementById('name').value
document.getElementById('here').innerHTML = b;
}
Run Code Online (Sandbox Code Playgroud)
test.html- > ads.js(将从test.html中提取值并设置为next.html) - >next.html
小智 23
试试这段代码:在testing.html中
function testJS() {
var b = document.getElementById('name').value,
url = 'http://path_to_your_html_files/next.html?name=' + encodeURIComponent(b);
document.location.href = url;
}
Run Code Online (Sandbox Code Playgroud)
并在next.html:
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
document.getElementById('here').innerHTML = data.name;
}
Run Code Online (Sandbox Code Playgroud)
说明:javascript无法在不同页面之间共享数据,我们必须使用一些解决方案,例如URL get params(在我的代码中使用这种方式),cookies,localStorage等.将name参数存储在URL中(?name = ...)和next.html解析URL并从prev页面获取所有参数.
PS.我是非母语人士,如果有必要,请你纠正我的信息
Lie*_*yan 17
设置页面之间持久存在的全局变量的老式方法是在Cookie中设置数据.现代方式是使用本地存储,它具有良好的浏览器支持(IE8 +,Firefox 3.5 +,Chrome 4 +,Android 2 +,iPhone 2+).使用localStorage就像使用数组一样简单:
localStorage["key"] = value;
... in another page ...
value = localStorage["key"];
Run Code Online (Sandbox Code Playgroud)
您也可以附加事件处理程序来监听更改,尽管事件API在浏览器之间略有不同.更多关于这个话题.
小智 9
假设你在浏览器环境中谈论这个js(不像nodejs那样),不幸的是我认为你想要做的事情是不可能的,因为这不是它应该工作的方式.
Html页面通过HTTP协议传送到浏览器,HTTP协议是一种"无状态"协议.如果您仍需要在页面之间传递值,则可能有3种方法:
windowobject 在next.html中检索它们小智 6
使用 Javascript localStorage类,您可以使用浏览器的默认本地存储来保存 (key,value) 对,然后在您需要使用密钥的任何页面上检索这些值。示例 - Pageone.html -
<script>
localStorage.setItem("firstname", "Smith");
</script>
Run Code Online (Sandbox Code Playgroud)
Pagetwo.html -
<script>
var name=localStorage.getItem("firstname");
</script>
Run Code Online (Sandbox Code Playgroud)
您可以简单地使用window.location.href首先将要发送的值存储testing.html在脚本标记中来发送数据,变量说
<script>
var data = value_to_send
window.loaction.href="next.htm?data="+data
</script>
Run Code Online (Sandbox Code Playgroud)
这是通过获取请求发送的
我用它来设置每个页面上的个人资料图像。
在第一页将值设置为:
localStorage.setItem("imageurl", "ur image url");
Run Code Online (Sandbox Code Playgroud)
或在第二页获取值为:
var imageurl=localStorage.getItem("imageurl");
document.getElementById("profilePic").src = (imageurl);
Run Code Online (Sandbox Code Playgroud)