javascript - 为什么从 javascript 到另一个 javascript 出现未定义错误？

Question

我有 A.html + A.js、B.html + B.js

和A.html

<div class="navbar">
  <img class="img_1" href="http://blaaaa.jpg">
  <a class="button">OK</a>
</div>

和 A.js

var img_src;
  $(document).ready(function() {

  $(document).on('click', '.button', function() {
  var img_set = document.getElementById('img_1');
  img_src = img_set.src;
  console.log("1: "+img_src); // successfully print.
  location.href = "B.html";

});

和B.html

<div>
  <img class="img_2">
</div>

和 B.js

 $(document).ready(function() {
   $('.img_2').attr("src",img_src); // not set image
   console.log("2: "+img_src); // undefined error...
 });

我如何知道问题是否发生？

我在标题上设置了两个脚本，但也出现错误..

<script type='text/javascript' src="js/A.js"></script>
<script type='text/javascript' src="js/B.js"></script>

或

<script type='text/javascript' src="js/B.js"></script>
<script type='text/javascript' src="js/A.js"></script>

Answer 1

你必须明白每个页面都有自己的 javascript 内存。如果两个页面都位于自己的实体上，则一个页面无法访问另一页面的内存内容。 (一个异常(exception)是<iframe>，但即便如此，做起来也很复杂)。

假设您有两个页面:第 1 页和第 2 页。在第 1 页中，您有 var value=11;以及第 2 页 var value=22; 。它们具有相同的名称，但无法互相访​​问。如果您使用value在第 1 页中，您得到 11。而不是 22。同样，在第 2 页中，您得到 22，而不是 11。如果您这样做 value = value + 100仅在第 1 页，然后 value第 1 页是 111。value第 2 页中的值仍然是 22。因此，一页上的一个脚本无法访问另一页上的另一个脚本。 (如果你允许这样做，那么就会存在巨大的安全风险...)

有了这些知识，让我们看看您的示例。

开始时，您已加载 A.html它执行以下脚本。

var img_src;
$(document).ready(function() {

  $(document).on('click', '.button', function() {
    var img_set = document.getElementById('img_1');
    img_src = img_set.src;
    console.log("1: "+img_src); // successfully print.
    location.href = "B.html";

});

如果单击该按钮，它将在单击处理程序中执行上述语句。我在下面添加了评论来解释发生的情况。

var img_set = document.getElementById('img_1'); // get the image by id "img_1"
img_src = img_set.src; // variable img_src is now set with the given source
console.log("1: "+img_src); // prints the source
location.href = "B.html"; // load the page to B.html

在脚本期间，变量 img_src包含信息。但最后，您将向 B.html 发起加载请求。这是一个不同页面，有自己的内存。当 B.html加载后，执行此脚本

$(document).ready(function() {
  $('.img_2').attr("src",img_src); // not set image
  console.log("2: "+img_src); // undefined error...
});

更具体地说

$('.img_2').attr("src",img_src)

您在这里要做的是使用 img_src 的信息设置图像元素的源。成立。但如前所述，您已重新加载页面，这会为该页面创建新的内存。在这里，在这个内存中，img_src未声明(和初始化)。 您正在尝试从内存尚不知道的变量中获取信息。

要解决这个问题，您必须有一个有效的变量，该变量已声明并初始化。这可以通过传递img_src的内容来完成。来自A.js至B.js将其作为参数放入 URL、本地存储......