通过JavaScript从另一个页面按id获取元素

Question

我有两页index.html和about.html。在about.html中，有一个表aI需要使用id = 'id1'从TD中获取值，并将其赋给某个变量X，以便稍后在页面index.html中使用。

如果我把它放在一页中，这将会完美地工作。

​

var X = document.getElementById('id1').innerHTML;
alert(X); // 123

...
<td id='id1'>123</td>
...

但是如何从about.html的id1中获取价值呢？我更喜欢JavaScript，因为目前我不太擅长jQuery，但如果不可能，jQuery也会很好。

​

Answer 1

一种方法是将x的值存储到localStorage中，如下所示：

localStorage.setItem('someName', x);

然后从你的其他页面访问它(假设这两个页面是同一域名的一部分)：

x = localStorage.getItem('someName', x);

Answer 2

您可以使用window.localStorage：

  localStorage.setItem('x', document.getElementById('id1').innerHTML);

现在，在第二页上，您可以获得它：

 var x = localStorage.getItem('x');
 if(x){
    alert(x);
 }

你可以在网址中发送它，比如说你可以创建像about.HTML?x=thevalue这样的网址。然后在about页面上：

if(location.href.index of('=') !== -1){
    var x = location.href.split('=').pop();
    alert(x);
}

.split()将创建数组，.pop()将为您提供数组的最后一个元素，在本例中为123。

Answer 3

您可以使用ajax。有了jQuery，这将变得容易得多。

因此，在使用jQuery的基础上，可以使用load函数。

index.html

javascript

$('button').click(function() {
  $('<div />').load('/toruta #td1', function(data) {
    alert($(this).find('td').html());
  });
});

html

<button>show</button>

about.html

<table>
  <tr>
    <td id="td1">loaded via ajax</td>
  </tr>
</table>

工作台

类似索引：http://output.jsbin.com/pafehe

关于like：http://output.jsbin.com/toruta