Question

我有一个包含iframe的滑块。滑块基于bxslider，iframe每个都包含一个单独的highcharts图表。现在我想实现一些听起来很简单的事情：我想在幻灯片改变后重绘图表。

经过一番搜索，我发现了一个有用的问题，解释了重绘。在框架内工作正常。实际上我在框架内创建了一个按钮，重新绘制它。到现在为止还挺好。但是，每当我尝试从包含滑块的主页调用重绘函数时，都没有任何反应。我已经尝试过设置警报（显示这些），记录变量（一切似乎都很好），甚至向重绘图表的按钮发送一个点击事件（事件被触发，但图表没有重绘）。我在这里缺少什么？

更新：

我从不同的角度看待这一点，并阅读了很多类似的问题。关键是调用实际上正在工作，但似乎没有执行Highcharts方法。所有数据似乎都存在，因此它不是范围问题。是否有可能阻止外部js文件中的代码运行的安全策略（不产生任何错误）？

主要代码：

<body>
<ul class="bxslider">
  <li><iframe src="/xcid/dashboard/index_project_budget" width="100%" height="800px" id="iframe1" marginheight="0" frameborder="0"></iframe></li>
  <li><iframe src="/xcid/dashboard/index_utilization" width="100%" height="800px" id="iframe2" marginheight="0" frameborder="0"></iframe></li>
</ul>
<script>
function callChild () {
    var el = document.getElementById("iframe2");
    el.contentWindow.redraw(); //tried this first
    $("#iframe2").contents().find("#button").trigger("click"); //tried this, too

}

$(document).ready(function(){
    $(".bxslider").bxSlider({
        auto: true,
        pause: 8000,
        onSlideAfter: function(){
            callChild();
        }
    });
});
</script>
</body>

iframe2主要代码：

    <div id="main-panel">
        <div id="main">
            <h1><?php echo $title; ?></h1>
            <div id="chart-container" style="width: 800px; height: 400px; margin: 0 auto"><!-- Chart container --></div>
            <div id="button">WHY?</div>
        </div>
    </div>
    <script>
        var data = <?php echo $chart['series']; ?>;
        var options = <?php echo $chart['options']; ?>;
        renderto ('#chart-container', data, options);
        var chart = $('#chart-container').highcharts();

        function clearChart() {
            while(chart.series.length > 0) {
                chart.series[0].remove(false);
            }
            chart.redraw();
        }
        function redrawChart() {
            for (i=0;i < data.length; i++) {
                chart.addSeries(data[i], false);
            }
            chart.redraw();
        }
        function redraw() {
            clearChart();
            redrawChart();              
        }
        $("#button").click(function(){
            console.log ("button clicked");
            redraw();
        });
    </script>

iframe内部对javascript函数的调用无效

0 个答案: