如何在第二個 HTML 頁面中定義的一個 HTML 頁面編輯元素中觸發 JS function？

Question

基本上我有兩個 HTML 頁面，並且都連接到同一個 JS 文件。 我想要一個由第一個 HTML 中的事件處理程序元素觸發的 function 來編輯第二個 HTML 頁面中的元素，然后打開它。

這是一個非常基本的示例：

 $("#p1").click(function() { $("#p2el").text("TEST"); })

 <button id="p1">CLICK</button>

在此示例中，按鈕p1定義在第一個 HTML 中， p2el元素定義在第二個 HTML 頁面中，兩者都鏈接到同一個 JS 文件。

在上面的例子中，我還在 function 中使用了location.href 。 想法是，元素被編輯，並自動加載第二個 HTML 頁面。

它不起作用，我不知道為什么。 第二個 HTML 頁面加載，但元素p2el未編輯。

我懷疑這與未傳輸到第二個 HTML 的數據有關，但我不確定為什么以及到底發生了什么。 我嘗試在 function 中使用localStorage ，然后使用存儲的數據作為編輯第二個 HTML 頁面中元素的條件...

 function second() { if(localStorage["key"] == "on") { $("#p2el").text("TEST"); location.href = "secondpage.html" } } $("#p1").click(function() { localStorage["key"] = "on"; second() })

......但它沒有工作。

我希望有人可以幫助我。

Answer 1

導航到新頁面會完全重置“JavaScript 環境”。

你的 JS 文件被重新加載，一切重新開始。 有些事情會通過頁面加載持續存在，例如本地存儲和 cookies，但 function 調用肯定不會。

要做你想做的事，你需要：

1. 監聽 click 事件，並保存它在某處被點擊的事實。
   （你已經在這樣做了）
2. 在頁面加載時，檢查存儲以確定是否在某個時間單擊了按鈕。 如果是的話，做任何你想做的事。 您可能希望重置存儲的值，因此這只發生一次。

這可能會為您解決問題：

if(localStorage["key"] === true) { 
  localStorage["key"] = false; // reset the key.
  $("#p2el").text("TEST");
}

$("#p1").click(function() { 
  localStorage["key"] = true;
  location.href = "secondpage.html"
});