jQuery傳送帶爲什麼不能使用iframe？

我嘗試製作幾個jQuery內容滑塊和旋轉木馬腳本，使用iframe，但沒有成功。jQuery傳送帶爲什麼不能使用iframe？

的iframe中包含谷歌的圖表和一個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看到相同的代碼。

我想將注入到相應選擇器<li id='bar_chart'> <li id='geo_chart'> <li id='scatter_chart'>（請參閱前面的代碼）中的三個Google <script type='text/javascript'>滑動。

我試圖用這個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問題。

的有什麼不對的不知道（但我不是一個'前端開發者）

任何想法？

來源

2011-11-27 Luca G. Soave

我可能失去了一些東西，但看你的螢火輸出我沒有看到任何定義的來源。你是否試圖在這些iframe中加載所提到的圖表？ – Maran

是的，結果是一個接一個顯示三個圖表的頁面，但不在傳送帶中。請注意，剪切後的第一個代碼實際上與Firebug分析的是相同的，但通過單擊Firefox瀏覽器的「查看頁面源代碼」（這裏是整個頁面：http://pastie.org/2929692） –

盧卡，

從我與你的問題已經通過代碼上場後看到的，你可以通過使用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 Chart大小，因此您可以從任何chart.draw()呼叫跳過{width: 860; height: 540}。以下是我的結果頁面代碼供您參考：http://pastebin.com/x0tpz1dq

請注意 - 圖表大小是爲說明目的而更改的。

來源

2011-11-28 04:16:39

謝謝幫助我很多。 –

@ LucaG.Save，我的榮幸！ –

爲了使它工作，而不是使用jQuery(document).ready()功能，使用window.load()功能初始化轉盤，確保下面的代碼是在其中下IFRAME使用相同的文件。

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

參見： $(window).load and (document).ready

來源

2014-10-16 11:41:10 user547632

jQuery傳送帶爲什麼不能使用iframe？

回答

相關問題