Question

我是HTML和Javascript的新手，我想要做的是来自an HTML文件我想要提取设置在那里的东西并通过{{1将其显示到another HTML文件}}

这是我到目前为止所做的测试：
testing.html

Javascript

next.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>

asd.js

<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>

function testJS() { var b = document.getElementById('name').value document.getElementById('here').innerHTML = b; } - ＆gt; test.html（将从test.html中提取值并设置为next.html） - ＆gt; ads.js

Answer 1

试试这段代码：在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获取params（在我的代码中使用这种方式），cookies，localStorage等。将name参数存储在URL（？name = ...）和next.html解析URL中，并从prev页面获取所有参数。

PS。我是非母语人士，如果有必要，请你纠正我的信息

Answer 2

设置页面之间持久存在的全局变量的老式方法是在Cookie中设置数据。现代方式是使用本地存储，它具有良好的浏览器支持（IE8 +，Firefox 3.5 +，Chrome 4 +，Android 2 +，iPhone 2+）。使用localStorage就像使用数组一样简单：

localStorage["key"] = value;

... in another page ...
value = localStorage["key"];

您也可以附加事件处理程序来侦听更改，但事件API在浏览器之间略有不同。 More on the topic.

Answer 3

假设你在浏览器环境中讨论这个js（与nodejs之类的其他人不同），不幸的是我认为你想做的事情是不可能的，因为这不是它应该工作的方式。

Html页面通过HTTP协议传送到浏览器，这是一种“无状态”协议。如果您仍需要在页面之间传递值，则可能有3种方法：

会话Cookie
HTML5 LocalStorage
在网址中发布变量，并通过window对象

Answer 4

您只需使用window.location.href发送数据，首先将值从testing.html发送到脚本标记，变量说

<script> 
  var data = value_to_send
  window.loaction.href="next.htm?data="+data
</script>

这是通过get请求发送

Answer 5

使用Javascript localStorage 类，您可以使用浏览器的默认本地存储来保存（键，值）对，然后在需要使用键的任何页面上检索这些值。范例- Pageone.html-

<script>
    localStorage.setItem("firstname", "Smith");
</script>

Pagetwo.html-

<script>
    var name=localStorage.getItem("firstname");
</script>

Answer 6

<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。这里我只是在提交按钮点击事件中获取输入elemnt（id = name）的值，然后加载所需的页面（next.html），如果加载功能成功执行我调用的函数将数据放在所需的位置。

jquery加载函数http://api.jquery.com/load/

Answer 7

以下是使用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>

Answer 8

我将要离开这里，由于限制我无法发表评论，但我发现AlexFitiskin的答案很完美，但需要进行一些小的修改

document.getElementById('here').innerHTML = data.name;

这需要更改为

document.getElementById('here').innerHTML = data.n;

我知道五年后该帖子的所有者将不会发现它具有任何重要性，但这是针对将来可能会遇到的人的。

Answer 9

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

在首页上将值设置为：

localStorage.setItem("imageurl", "ur image url");

或在第二页上获得的价值为：

var imageurl=localStorage.getItem("imageurl");
document.getElementById("profilePic").src = (imageurl);

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

9 个答案: