Question

我尝试使用iframe制作几个jQuery内容滑块和轮播脚本，但没有成功。

iframe包含Google图表，由Ruby插件（google_visualr）生成...您可以看到生成的HTML：

  <div class='carousel_charts'>
    <ul>
      <li id='bar_chart'>

        <script type='text/javascript'>
          google.load('visualization','1', {packages: ['corechart'], callback: function() {
            var data_table = new google.visualization.DataTable();data_table.addColumn('date', 'Date');data_table.addColumn('number', 'Refinery');data_table.addColumn('number', 'Locomotive');data_table.addColumn('number', 'Comf. Mexican Sofa');data_table.addColumn('number', 'Nesta');data_table.addRow([{v: new Date(2011, 10, 21)}, {v: 123}, {v: 3}, {v: 16}, {v: 12}]);data_table.addRow([{v: new Date(2011, 10, 22)}, {v: 130}, {v: 1}, {v: 9}, {v: 22}]);data_table.addRow([{v: new Date(2011, 10, 23)}, {v: 155}, {v: 2}, {v: 15}, {v: 8}]);data_table.addRow([{v: new Date(2011, 10, 24)}, {v: 118}, {v: 3}, {v: 3}, {v: 11}]);data_table.addRow([{v: new Date(2011, 10, 25)}, {v: 99}, {v: 2}, {v: 7}, {v: 11}]);data_table.addRow([{v: new Date(2011, 10, 26)}, {v: 58}, {v: 0}, {v: 1}, {v: 16}]);data_table.addRow([{v: new Date(2011, 10, 27)}, {v: 45}, {v: 0}, {v: 1}, {v: 5}]);
            var chart = new google.visualization.BarChart(document.getElementById('bar_chart'));
            chart.draw(data_table, {width: 860, height: 540, title: 'Ruby CMS Diffusion', vAxis: {title: 'Last week', titleTextStyle: {color: 'red'}}, oAxis: {title: 'RubyGems Downloads', titleTextStyle: {color: 'red'}}});
          }});
        </script>

      </li>
      <li id='geo_chart'>

        <script type='text/javascript'>
          google.load('visualization','1', {packages: ['geochart'], callback: function() {
            var data_table = new google.visualization.DataTable();data_table.addColumn('string', 'Country');data_table.addColumn('number', 'Popularity');data_table.addRow([{v: 'Germany'}, {v: 200}]);data_table.addRow([{v: 'United States'}, {v: 300}]);data_table.addRow([{v: 'Brazil'}, {v: 400}]);data_table.addRow([{v: 'Canada'}, {v: 500}]);data_table.addRow([{v: 'France'}, {v: 600}]);data_table.addRow([{v: 'RU'}, {v: 700}]);
            var chart = new google.visualization.GeoChart(document.getElementById('geo_chart'));
            chart.draw(data_table, {width: 860, height: 540});
          }});
        </script>
      </li>
      <li id='scatter_chart'>

        <script type='text/javascript'>
          google.load('visualization','1', {packages: ['corechart'], callback: function() {
            var data_table = new google.visualization.DataTable();data_table.addColumn('number', 'Age');data_table.addColumn('number', 'Weight');data_table.addRow([{v: 8}, {v: 12}]);data_table.addRow([{v: 4}, {v: 5.5}]);data_table.addRow([{v: 11}, {v: 14}]);data_table.addRow([{v: 4}, {v: 4.5}]);data_table.addRow([{v: 3}, {v: 3.5}]);data_table.addRow([{v: 6.5}, {v: 7}]);
            var chart = new google.visualization.ScatterChart(document.getElementById('scatter_chart'));
            chart.draw(data_table, {width: 860, height: 540, title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none'});
          }});
        </script>
      </li>
    </ul>

  </div>

...这里是从FireBug看到的相同代码。

我想将三个google <script type='text/javascript'>注入相应的选择器<li id='bar_chart'> <li id='geo_chart'> <li id='scatter_chart'>（请参阅前面的代码）。

我正在尝试使用此jQuery carousel script来滑动HTML iframe内容，但它不起作用。 js如下：

$(function(){
  // Looping carousel
  $("div.carousel_charts").carousel( { autoSlide: true, pagination: true } );
});

基于jquery.carousel.min.js。我目前正在使用Rails-3.1.3，但是流水线工作正常，这似乎是一个更普遍的js问题。

不知道这有什么问题（但我不是'前端开发者'）

任何想法？

Answer 1

卢卡，

根据我在使用您传递的代码后看到的内容，您可以通过使用CSS指定某些元素的大小来解决问题：

<style>
  #bar_chart, #geo_chart, #scatter_chart {
     height: 320px;
     width: 240px;
     display: block;
     float: left;
  }
  .carousel_charts ul {
     display: block;
     margin: 0;
     padding: 0;
  }
  .carousel-wrap {
     width: 240px;
  }
</style>

应用上述规则后，无需指定Google图表大小，因此您可以从任何{width: 860; height: 540}电话中跳过chart.draw()。以下是我的结果页代码供您参考：http://pastebin.com/x0tpz1dq

请注意 - 图表大小会更改以用于说明目的。

Answer 2

要使其正常运行，而不是使用jQuery(document).ready() 功能，请使用window.load()功能初始化轮播，确保以下代码与iframe中使用的文件相同。

jQuery(window).load(function() {
   jQuery('.mycarousel').jcarousel({     
   });
});

另见： $(window).load and (document).ready

为什么jQuery轮播不能与iframe一起使用？

2 个答案: