将数据从一个HTML文件传输到另一个

new*_*bie 17 html javascript

我是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种方法:

  1. 会话Cookie
  2. HTML5 LocalStorage
  3. 在url中发布变量并通过windowobject 在next.html中检索它们

  • 你能用一个选项3给我看一个简单的例子吗? (3认同)

小智 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)


Abh*_*thi 5

您可以简单地使用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)

这是通过获取请求发送的


pra*_*ute 5

我用它来设置每个页面上的个人资料图像。

在第一页将值设置为:

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)