Question

我的javascript正在动态生成内容onclick，我想将动态生成的内容附加到另一页上的div，该页将在click事件之后打开。

这是我尝试过的：

$(document).ready(function () {
  // dynamically generate stuff in #storage-div
  $.get(url, function(data) {
    $('#storage-div').append(data);
  })
  $(document).load('url #target-div', function(target) {
    $(target).append('#storage-div');
  })
})

由于#storage-div是异步的，所以我一直空着ajax。

我想做的是像在样式表中那样将ref标记放在<head>中，然后我可以访问#storage-div而不必再次使用ajax。有可能吗？

Answer 1

JavaScript变量仅在单个页面加载期间存在。即使将其存储到div中，下一页加载也不会记住。如果要存储JS变量并在另一页上使用它们，请查看存储localStorage。

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

那么您可以像这样使用

：

$(document).ready(function () {
  // dynamically generate stuff in #storage-div
  $.get(url, function(data) {
    localStorage.setItem('some-var', data);
  })
})

然后在第二页上获取它。

localStorage.getItem('some-var');

Answer 2

一种方法是将存储div放在文件中，在这里我将其称为test.html。由于我们在get上使用dataurl，因此应该对其进行缓存，并在从静态html加载storage-div后将其插入每页的storage-div内部。

test.html

的内容

<body>
  <div id="storage-div">
    <div>I am here before in the markup.</div>
  </div>

  <div id="another-happy-div">
    <div>Happy Happy day</div>
  </div>
</body>

首页：获取该内容并将其附加到正文中。

$(function() {
  // note .one not .on here, only one time
  $('body').one('click', '#clicker', function() {
    $(this).hide(); //hide button, one only
    var url = "ajax/test.html"; // contains storage-div
    var dataurl = "somethingurlish";
    $.get(url, function(datahtml) {
      $(datahtml).find('#storage-div').appendTo('body');
      console.log('storage appended');
      $('#storage-div').load(dataurl, function() {
        console.log('storage loaded with data');
      });
    });
  });
});

#storage-div {
  background-color: #ffdddd;
}

#target-div {
  background-color: #ffffdd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<body>
  <button id="clicker">Click Me</button>

  <div id="something">
    <div>whatever works for us, ajax after this at end of body</div>
  </div>
</body>

第二页：获取并附加到另一个div

$(function() {
  // note .one not .on here, only one time
  $('body').one('click', '#clicker', function() {
    var url = "ajax/test.html"; // contains storage-div
    $(this).hide(); //hide button, one only
    $('#target-div').load(url + " #storage-div", function() {
      console.log('target div loaded with storage-div');
      var dataurl = "somethingurlish";
      $.get(dataurl, function(datahtml) {
        // append to loaded content
        $('#storage-div').append(datahtml);
        console.log('storage appended');
      });
    });
  });
});

#storage-div {
  background-color: #ffdddd;
}

#target-div {
  background-color: #ffffdd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<body>
  <button id="clicker">Click Me</button>
  <div id="target-div">
    <div>A targeting we will go, I get replaced</div>
  </div>
</body>

jQuery在另一个页面上访问div

2 个答案: