javascript - 全局变量不显示在div中

Question

我在 .js 文件的开头声明了一个变量:

var option="blabla";

在第 1.html 页上，我单击了指向第 2.html 页的链接

<script>document.write(option);</script>

2.html 上没有显示任何文本。当我在 2.html 上刷新浏览器时，输出未定义。

我需要做什么才能在点击链接后立即显示文本？

<小时/>

或者，如何让以下代码在 2.html 上输出 strUrl:

在 1.html 上我有一个链接:

<a href="2.html" onclick="function1("item")">

在 2.html 上我有一个 div:

<div id="display">document.write(strUrl);</div>

然后我的 .js 文件中有:

function1(searchitem)
{
    strUrl = 'http://blabla.com/' 
    + '?key=' + searchitem;
}

Answer 1

您尝试在一个页面上创建一个 Javascript 变量，然后在另一个页面上使用它。这或多或少是一个广泛的问题，因为您希望跨页面维护值。首先，您需要决定在哪里定义该值以及在哪里使用它。如果这更像是服务器端变量，那么您需要在服务器端定义它，然后将其生成到 Javascript 代码中。如果您使用 PHP，那么您可以这样做:

<script type="text/javascript>
    var foo = '<?php echo $bar; ?>';
</script>

当然，您需要初始化 $bar 才能做到这一点。如果变量应该是客户端变量，那么您需要使用 localStorage，就像 1.html 上的这样:

localStorage.setItem("option", "blablabla");

然后将其加载到2.html上:

localStorage.getItem("option");

或者，如果您需要在服务器端和客户端都使用它，那么您可以使用 cookie 来实现此目的。使用 cookies 稍微复杂一些，但是my answer to another question应该能让你继续前进。

让我们重点关注这对您不起作用的原因。当页面卸载时，Javascript 变量将不再存在，因此此后您将无法使用它的值。因此，您需要以某种方式保留它，将其存储在服务器或运行浏览器的计算机上。

作为旁注，我应该提到，如果您在页面的 iframe 内加载某些页面，则可以跨页面使用 Javascript 变量，但这是一种不同的情况。