Html单击按钮时更新图表

时间:2017-04-11 13:32:14

标签: javascript html

我有3个不同的图表(相同的类型,但显示不同的东西)保存在3个不同的索引(indexsc / indexol / indexsa)。

是否可以使用从按钮中选择的图表刷新或重新加载页面,而无需每次都打开新窗口?

我对此的理解是调用3个不同子代码的核心代码。

<form>
  <input type="button" value="Chart SC" onclick="window.open('indexsc.html', 'height=600, width=800, top=90, left=350, toolbar=no, menubar=no, location=yes, resizable=yes, scrollbars=yes, status=no');">

  <input type="button" value="Chart OL" onclick="window.open('indexol.html', 'height=600, width=800, top=90, left=350, toolbar=no, menubar=no, location=yes, resizable=yes, scrollbars=yes, status=no');">

  <input type="button" value="Chart SA" onclick="window.open('indexsa.html', 'height=600, width=800, top=90, left=350, toolbar=no, menubar=yes, location=yes, resizable=yes, scrollbars=yes, status=no');">

</form> 

1 个答案:

答案 0 :(得分:0)

你可以使用iframe。结合使用javascript当然。你可以这样做。

JS

function getpage(y){

var x=y;

    if(x=="one"){

        document.getElementById("one").src="page4.html";
    }

    if(x=="two"){

        document.getElementById("two").src="page2.html";
    }

    if(x=="three"){

        document.getElementById("three").src="page3.html";
    }


}

HTML

<form>
  <input type="button" value="Chart SC" onClick="getpage('one')">

  <input type="button" value="Chart OL" onclick="getpage('two')"">

  <input type="button" value="Chart SA" onclick="getpage('three')"">

</form>


<div class="column">


<div class="row chartone">

<iframe id="one" src="page1.html" height="200" width="300"></iframe>

</div>


<div class="row charttwo">

<iframe id="two" src="page2.html" height="200" width="300"></iframe>

</div>

<div class="row chartthree">

<iframe id="three" src="page3.html" height="200" width="300"></iframe>

</div>

</div>

现在您可以操作加载页面...单击按钮时

如果有帮助则投票