在 html 頁面之間共享變量

Question

首先，我知道這個主題還在 StackOverflow 中，但我還沒有完全理解它是如何工作的，閱讀現有的答案。 所以，對不起，我希望現在明白了。

我不知道我的方法是否不正確以及為什么會不正確。

我有一個 html 頁面，它就像其他幾個頁面的“遮陽板”，所以從這個“主”頁面，我可以看到其他頁面將它們嵌入到遮陽板頁面的區域（使用 iframe）。

同時，我對所有頁面（包括遮陽板）都有一個通用的 .js 文件。

因此，例如，如果我在 .js 中有一個聲明為“hello world”（字符串類型）的變量，我可以從 visor 或嵌入頁面訪問該變量，並且仍然具有其原始值。 但是，如果我從遮陽板（或嵌入式）更改其勇氣，則其他頁面無法讀取從其他頁面更改的新勇氣。

它可能使全局頁間變量？。

我嘗試使用 localStorage，但它僅適用於使用它的特定頁面。

所以，讓我們或多或少地看看：

.JS文件

var Example = "Hello world";

function TellMe()
{
    alert(Example);
}

function ChangeVar()
{
    Example = "Goodbye world";
}

---

第 1 頁（當然，在 head 部分中引用了 .js 文件）

<div onclick="ChangeVar();">click!</div>

---

第 2 頁（當然，在 head 部分中引用了 .js 文件），但是在單擊了第 1 頁的 div 之后

<div onclick="TellMe();">click!</div>

這將提醒“Hello World”，而不是“Goodbye World”。

所以我理解每個頁面都有自己的 .js 變量版本，即使所有頁面都使用相同的 .js，甚至當一個 html 被另一個（嵌入 iframe）訪問時。

單擊帶有消息“再見世界”的第 2 頁的 div 后，如何獲得此示例？。

---

我會解釋得更清楚，看到關於黑客攻擊、浪費其他頁面和誇大銀行賬戶的答案數量。

它只是一個文檔頁面（來自軟件），我有一個“遮陽板”頁面，從中我可以訪問其他頁面。 實際上，我在根文件夾中有“visor”頁面，而在此根目錄中的文件夾中的其他頁面都在同一個域中，不是嗎？

我想要頁面上的“下一個”和“上一個”按鈕，以避免用戶返回遮陽板並選擇新頁面，但我需要知道用戶正在觀看的頁面編號，了解下一個或上一個顯示的頁面。

Answer 1

我正在與您分享有關 localstorage 的非常簡單的示例，該示例應該可以滿足您的要求。 假設您有兩個文件 page1.html 和 page2.html。

在 page1.html 中添加以下幾行

<div id="notes">
</div>

<script>
if(typeof(Storage)!=="undefined")
  {
  localStorage.lastname="Smith";
  document.getElementById("notes").innerHTML="Last name: " + localStorage.lastname;
  }
else
  {
  document.getElementById("notes").innerHTML="Sorry, your browser does not support web storage...";
  }
</script>

page2.html 內部

<div id="notes">
</div>

<script>
if(typeof(Storage)!=="undefined" && localStorage.lastname)
  {
  document.getElementById("notes").innerHTML="Last name: " + localStorage.lastname;
  }
else
  {
  document.getElementById("notes").innerHTML="Sorry, your browser does not support web storage...";
  }
</script>

您現在可以在任何頁面中訪問來自 localstorage 的值。

另外一個選項

您可以通過查詢字符串參數將值從一個頁面傳遞到另一個頁面。 例如。 <a href='page2.html?index=someValue'>goto next page</a>現在在 page2.html 中，您可以通過 javascript 獲取此索引值並設置所需字段。

希望能解答您的疑問。

Answer 2

HTML 本地存儲應該是您正在尋找的。 這是了解更多信息的鏈接 - http://diveintohtml5.info/storage.html

您也可以使用window.name稱為 JavaScript 會話。 但它只有在使用相同的窗口/選項卡時才有效。 鏈接 - http://www.thomasfrank.se/sessionvars.html

另外顯然還有餅干。

我的偏好順序是我陳述我的解決方案的順序。

Answer 3

這里的問題是Javascript的安全問題。

由於CORS問題，即使執行jQuery .load()等簡單事件，頁面上的其他腳本也不會加載。

Variables在頁面之間是不可傳遞的，尤其是iframes ，因為可能存在各種惡意活動。

我的建議是在您正在進行的每個iframe加載相同的JS文檔（如果您能夠這樣做）。

您將無法將js文件load到不在您的域中的站點。

Answer 4

是的，基本上，你們都是對的。

只需在 localStorage.variableToManipulate 中存儲您想要在頁面之間操作的變量就足夠了。 如果我們想要，直接。

這樣就足夠了（我將重復我更正的第一個示例）：

.JS文件

localStorage["Example"] = "Hello world";

function TellMe()
{
    alert(localStorage["Example"]);
}

function ChangeVar()
{
    localStorage["Example"] = "Goodbye world";
}

第 1 頁（當然，在 head 部分中引用了 .js 文件）

<div onclick="ChangeVar();">click!</div>

第 2 頁（當然，在 head 部分中引用了 .js 文件），但是在單擊了第 1 頁的 div 之后

<div onclick="TellMe();">click!</div>

但是，只是一件事，當您進行此類測試時，請記住只打開一個 html 頁面。 我正在測試打開的兩個（Visor 和 PageN），我認為每個人都使用自己的 localStorage 變量實例（由自己的頁面本身修改）。

只是一個菜鳥愚蠢的錯誤！。 對不起，非常感謝您的幫助！

Answer 5

我知道現在已經晚了，但是無論誰想在同一域下的頁面之間共享數據，他們都可以使用SharedWorker