Question

我在html上使用highcharts绘制图表，它也有一个按钮，点击按钮它应该能够将变量（cur_id + 1）传递给其他页面，以便它可以根据传递的变量读取json文件。

sample1.html

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js">

<script type='text/javascript'>

$(function () {

 var options = {
        chart :{
                  type: 'polygon',
                  renderTo: 'chart',                                   
        },
        title: {},
        yAxis: {},
        xAxis: {},
        series: []
    };

    $.getJSON('sample1.json', function(data) {
        options.series=data;
        var chart = new Highcharts.Chart(options);
    }),
    var cur_id,
    function click(id) 
    {
        cur_id=id;
        var filename="sample".cur_id."html";
        load(filename);
    }

  });
  </script>
  </head>
  <body>

  <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<br>

 <img name="jsbutton" src="zoom-out.svg"  onclick="click(curid+1);">

</div>
</body>

如何实施？

Answer 1

您可以使用cookie实现此目的。由于您已经在使用jQuery，因此可以使用jquery-cookie插件并在cookie中设置您的id。在下一页，您可以取回它。

设置

$.cookie("curr_id", value);

获取

var id= $.cookie("curr_id");

Answer 2

使用查询字符串获取其他页面$ _GET ['id'];

cur_id=id;
    var filename="sample"+cur_id+"html?id="+cur_id;
    load(filename);

Answer 3

您可以通过查询字符串传递值，并在第二页中读回值。

function click(id) 
{
    cur_id=id;
    var filename="sample.html?id=".cur_id;
    load(filename);
}

使用以下代码读取查询字符串值

function getQueryStringParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, " "));}

Answer 4

您的网址：example.com/#some_data

你可以使用 window.location.hash.substr（1）; //输出：some_data

Answer 5

你不能用。对于javascript中的concat字符串，我也更改了代码以使其更简单

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js">

<script type='text/javascript'>

$(function () {

 var options = {
        chart :{
                  type: 'polygon',
                  renderTo: 'chart',                                   
        },
        title: {},
        yAxis: {},
        xAxis: {},
        series: []
    };

    $.getJSON('sample1.json', function(data) {
        options.series=data;
        var chart = new Highcharts.Chart(options);
    })
  });
  </script>
  </head>
  <body>

  <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<br>

 <img name="jsbutton" src="zoom-out.svg"  onclick="load('sample'+cur_id+'html');">

</div>
</body>

Answer 6

您有两种选择： -

1：你可以在一个像queryString这样的url中传递它。您还可以对其进行加密，以便不受欢迎的用户无法看到您的id参数。

2：或者您可以使用 HTML5本地存储空间轻松存储它（localStorage.setItem('id',yourVariable);）并轻松检索localStorage.getItem('id');。

这两个选项都将完成您的请求。问题是，当有人从您的浏览器中删除cookie /历史记录时，第二个选项将无效。如果你可以选择第一个，那就更好了。

示例： -

第一个 -

假设您的网址是abc.com。点击按钮，获取ID并执行window.location.href="xyz.com?"+id。然后在下一页，即xyz.com，从这个网址获取此ID

document.URL.split('?')[1] //you will get your id here .

Answer 7

使用localStorage对象可以是一个简单的解决方案，可以使用Javascript / jQuery ......

<script>
// Check browser support

   if (typeof(Storage) !== "undefined") {
        // Store
        localStorage.setItem("lastname", "Smith");
        // Retrieve
        document.getElementById("result").innerHTML = localStorage.getItem("lastname");
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
    }
    </script>

如何通过单击按钮将id（变量）从html的一个页面传递给其他页面？

7 个答案: