Html按钮点击时更新图表

Question

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

是否可以使用从按钮中选择的图形来刷新或重新加载页面，而无需每次都打开一个新窗口？

我对此的理解是调用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> 

Answer 1

您可以使用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> 

现在

你可以操纵你的页面加载...当按钮点击

投票，如果有帮助