將數據從一個 HTML 文件傳輸到另一個

Question

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

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 get params（在我的代碼中我使用這種方式），cookies，localStorage等。將name參數存儲在URL中（？name = ...) 並在 next.html 中解析 URL 並從上一頁獲取所有參數。

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 在瀏覽器之間略有不同。 更多關於這個話題。

Answer 3

假設您在瀏覽器環境中談論這個 js（與其他類似 nodejs 不同），不幸的是，我認為您嘗試做的事情是不可能的，因為這不是它應該工作的方式。

Html 頁面通過 HTTP 協議傳遞給瀏覽器，這是一種“無狀態”協議。 如果您仍然需要在頁面之間傳遞值，可能有 3 種方法：

會話 Cookie
HTML5 本地存儲
在 url 中發布變量並通過window對象在 next.html 中檢索它們

Answer 4

使用 Javascript localStorage類，您可以使用瀏覽器的默認本地存儲來保存（鍵、值）對，然后使用鍵在您需要的任何頁面上檢索這些值。 示例 - Pageone.html -

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

Pagetwo.html -

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

Answer 5

您可以簡單地使用window.location.href發送數據，首先將要從testing.html發送的值存儲在腳本標簽中，變量說

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

這是通過獲取請求發送的

Answer 6

我用它在每個頁面上設置個人資料圖像。

在第一頁設置值為：

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

或在第二頁上獲取值：

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

Answer 7

嗨，我要把這個留在這里，因為限制，我無法發表評論，但我發現 AlexFitiskin 的答案很完美，但需要做一個小修正

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

這需要更改為

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

我知道五年后帖子的所有者不會發現它有任何重要性，但這是為將來可能遇到的人准備的。

Answer 8

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

Answer 9

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

我對 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函數里面的代碼。

Answer 11

避免使用本地存儲，因為 get 方法不安全。 最好的選擇是使用腳本設置為模塊，然后通過 2 個 js 文件將數據導出和導入到 html 文件。 變量值可以使用模塊方法在頁面之間傳遞。

將數據從一個 HTML 文件傳輸到另一個

問題描述

11 個解決方案

解決方案1
42 2013-07-06 10:49:37

解決方案2
22 2013-07-06 10:46:50

解決方案3
12 2013-07-06 10:52:07

解決方案4
6 2018-07-01 10:57:27

解決方案5
5 2014-08-27 18:16:29

解決方案6
4 2018-10-23 08:55:29

解決方案7
2 2018-07-22 17:32:36

解決方案8
0 2013-07-06 12:07:59

解決方案9
0 2018-07-01 13:00:52

解決方案10
0 2022-03-23 16:49:07

解決方案11
0 2022-06-15 09:18:13

將數據從一個 HTML 文件傳輸到另一個

問題描述

11 個解決方案

解決方案1 42 2013-07-06 10:49:37

解決方案2 22 2013-07-06 10:46:50

解決方案3 12 2013-07-06 10:52:07

解決方案4 6 2018-07-01 10:57:27

解決方案5 5 2014-08-27 18:16:29

解決方案6 4 2018-10-23 08:55:29

解決方案7 2 2018-07-22 17:32:36

解決方案8 0 2013-07-06 12:07:59

解決方案9 0 2018-07-01 13:00:52

解決方案10 0 2022-03-23 16:49:07

解決方案11 0 2022-06-15 09:18:13

解決方案1
42 2013-07-06 10:49:37

解決方案2
22 2013-07-06 10:46:50

解決方案3
12 2013-07-06 10:52:07

解決方案4
6 2018-07-01 10:57:27

解決方案5
5 2014-08-27 18:16:29

解決方案6
4 2018-10-23 08:55:29

解決方案7
2 2018-07-22 17:32:36

解決方案8
0 2013-07-06 12:07:59

解決方案9
0 2018-07-01 13:00:52

解決方案10
0 2022-03-23 16:49:07

解決方案11
0 2022-06-15 09:18:13