[英]Transfer data from one HTML file to another
我是 HTML 和 JavaScript 的新手,我想做的是从一个 HTML 文件中提取设置在那里的内容并通过 JavaScript 将其显示到另一个 HTML 文件中。
这是我到目前为止所做的测试:
测试.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>
下一个.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>
asd.js
function testJS()
{
var b = document.getElementById('name').value
document.getElementById('here').innerHTML = b;
}
test.html
-> ads.js
(将从 test.html 中提取值并设置为 next.html)-> next.html
试试这个代码:在 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;
}
在 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;
}
说明:javascript不能在不同页面之间共享数据,我们必须使用一些解决方案,例如URL get params(在我的代码中我使用这种方式),cookies,localStorage等。将name参数存储在URL中(?name = ...) 并在 next.html 中解析 URL 并从上一页获取所有参数。
PS。 我是非英语母语人士,如有必要,请您更正我的信息
设置在页面之间持续存在的全局变量的老式方法是在 Cookie 中设置数据。 现代方法是使用本地存储,它具有良好的浏览器支持(IE8+、Firefox 3.5+、Chrome 4+、Android 2+、iPhone 2+)。 使用 localStorage 就像使用数组一样简单:
localStorage["key"] = value;
... in another page ...
value = localStorage["key"];
您还可以附加事件处理程序以侦听更改,尽管事件 API 在浏览器之间略有不同。 更多关于这个话题。
假设您在浏览器环境中谈论这个 js(与其他类似 nodejs 不同),不幸的是,我认为您尝试做的事情是不可能的,因为这不是它应该工作的方式。
Html 页面通过 HTTP 协议传递给浏览器,这是一种“无状态”协议。 如果您仍然需要在页面之间传递值,可能有 3 种方法:
window
对象在 next.html 中检索它们使用 Javascript localStorage类,您可以使用浏览器的默认本地存储来保存(键、值)对,然后使用键在您需要的任何页面上检索这些值。 示例 - Pageone.html -
<script>
localStorage.setItem("firstname", "Smith");
</script>
Pagetwo.html -
<script>
var name=localStorage.getItem("firstname");
</script>
您可以简单地使用window.location.href
发送数据,首先将要从testing.html
发送的值存储在脚本标签中,变量说
<script>
var data = value_to_send
window.loaction.href="next.htm?data="+data
</script>
这是通过获取请求发送的
我用它在每个页面上设置个人资料图像。
在第一页设置值为:
localStorage.setItem("imageurl", "ur image url");
或在第二页上获取值:
var imageurl=localStorage.getItem("imageurl");
document.getElementById("profilePic").src = (imageurl);
嗨,我要把这个留在这里,因为限制,我无法发表评论,但我发现 AlexFitiskin 的答案很完美,但需要做一个小修正
document.getElementById('here').innerHTML = data.name;
这需要更改为
document.getElementById('here').innerHTML = data.n;
我知道五年后帖子的所有者不会发现它有任何重要性,但这是为将来可能遇到的人准备的。
<html>
<head>
<script language="javascript" type="text/javascript" scr="asd.js"></script>
</head>
<body>
<form name="form1" action="#" 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>
客户端脚本
function testJS(){
var name = jQuery("#name").val();
jQuery.load("next.html",function(){
jQuery("#here").html(name);
});
}
jQuery 是一个 js 库,它简化了它的编程。 所以我推荐使用 jQuery rathar 然后 js。 在这里,我只是在提交按钮单击事件上获取输入元素(id = name)的值,然后加载所需的页面(next.html),如果加载函数成功执行,我将调用一个函数,它将数据放在所需的位置。
jquery 加载函数http://api.jquery.com/load/
以下是使用 html 将值从一个页面传递到另一个页面的示例代码。 在这里,来自 page1 的数据被传递到 page2 并使用 javascript 检索。
1) page1.html
<!-- Value passing one page to another
Author: Codemaker
-->
<html>
<head>
<title> Page 1 - Codemaker</title>
</head>
<body>
<form method="get" action="page2.html">
<table>
<tr>
<td>First Name:</td>
<td><input type=text name=firstname size=10></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type=text name=lastname size=10></td>
</tr>
<tr>
<td>Age:</td>
<td><input type=text name=age size=10></td>
</tr>
<tr>
<td colspan=2><input type=submit value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>
2) page2.html
<!-- Value passing one page to another
Author: Codemaker
-->
<html>
<head>
<title> Page 2 - Codemaker</title>
</head>
<body>
<script>
function getParams(){
var idx = document.URL.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
for (var i=0; i<pairs.length; i++){
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
}
}
return params;
}
params = getParams();
firstname = unescape(params["firstname"]);
lastname = unescape(params["lastname"]);
age = unescape(params["age"]);
document.write("firstname = " + firstname + "<br>");
document.write("lastname = " + lastname + "<br>");
document.write("age = " + age + "<br>");
</script>
</body>
</html>
我对 Alex Fitiskin 的答案进行了编码,并添加了一些额外的代码。 我在 onLoad 函数中添加了一个参数来获取表单的提交事件,并首先阻止它的默认行为。
这是代码:
测试.html
<html>
<head>
<script language="javascript" type="text/javascript" src="test.js"></script>
</head>
<body>
<form name="form1" action="next.html" method="get" onsubmit="return testJS(event)">
name:<input type="text" id="name" name="n">
<input type="submit" value="next">
<!-- <button type="button" id="print" onClick="testJS()"> Print </button> //Button not needed anymore -->
</form>
</body>
</html>
下一个.html
<head>
<script language="javascript" type="text/javascript" src="test.js"></script>
</head>
<body>
<form name="form1" action="next.html" method="get">
<table>
<tr>
<td id="here">test</td>
</tr>
</table>
</form>
</body>
</html>
测试.js
function testJS(e) {
e.preventDefault();
var b = document.getElementById('name').value,
url = 'http://path_to_next_location/next.html?name=' + encodeURIComponent(b);
document.location.href = url;
}
function onLoad() {
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;
}
window.onload = onLoad;
这样onload函数就会被自定义的onLoad函数代替,表单不会按默认方式提交,而是使用testJS函数里面的代码。
避免使用本地存储,因为 get 方法不安全。 最好的选择是使用脚本设置为模块,然后通过 2 个 js 文件将数据导出和导入到 html 文件。 变量值可以使用模块方法在页面之间传递。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.