Jquery手風琴內的iFrame

我有一個內嵌JQuery手風琴的iFrame頁面。Jquery手風琴內的iFrame

JS：

$(function() { 
       $("#doc_accordion").accordion(); 
     });

HTML：

<div id="doc_accordion"> 
        <h3><a href="#">1</a></h3> 
        <div> 
        <iframe src="http://test.com/view.do?url=http://test2.com/xyz" style="width:600px; height:500px;" frameborder="0"></iframe> 
        </div> 
        <h3><a href="#">TESTING</a></h3> 
        <div> 
          <p>TESTING2</p> 
        </div> 
      </div>

出於某種原因，我不能看到嵌入的iFrame但我可以看到手風琴。另外，如果我刪除行$("#doc_accordion").accordion()，那麼我可以看到正確嵌入頁面中的iFrame。有沒有人遇到類似的問題？

來源

2010-02-18 kartikq

的選項可能會使用以下內容：

$(document).ready(function() { 
    $("#doc_accordion").accordion(); 
});

據我所知手風琴隱藏未顯示的元素，這可能與頁面的加載到iframe干擾。

來源

2010-02-18 19:30:52 AxelEckenberger

我只是去嘗試，我也得到了同樣的答覆。 – kartikq 2010-02-18 19:37:54

http://stackoverflow.com/questions/205087/jquery-ready-in-a-dynamically-inserted-iframe可能會提供一個解決方案。 – AxelEckenberger 2010-02-18 19:59:56

嘗試了一些來自該線程的方法。似乎沒有工作。 – kartikq 2010-02-18 20:43:08

我測試了您的代碼&在Firefox中看起來很好& Mac上的Safari和PC上的IE7。我可以正確地看到iframe。這可能是瀏覽器或CSS問題？

您是否試過聲明寬度爲&的div標籤的高度？您可以使用click（）函數進行設置。但同時嘗試手動爲div標籤添加'style =「width：600px; height：500px;」'以測試它。

它也可能與你正在使用的jQuery腳本有關。我用這兩個JS腳本head標籤內：

<script type="text/javascript" src="jquery-1.3.2.js" ></script> 
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js" ></script>

我即將開始手風琴&自己的IFrame（因此利息）試驗...

來源

2010-02-19 11:12:02 WastedSpace

我相信這是因爲IE瀏覽器不會渲染隱藏元素的孩子。作爲一種解決方法，您可以在手風琴外部加載1px×1px的iframe，並在iframe加載後將其移入手風琴中。這裏有一個例子：

<div id="widget-box"> <!-- Accordion --> 
    <h3><a href="#">Widget</a></h3> 
    <div id="widget-placeholder">    
    </div> 
</div> 

<iframe id='widget-frame' style="height:1px; width:1px;" src='widget.html'></iframe> 

<script type="text/javascript"> 
    $(function() { 
     $("#widget-box").accordion({ 
      collapsible: true, 
      autoHeight: false, 
      active: false 
     }); 
     $('#widget-frame').load(function() { 
      if ($("#widget-placeholder > iframe").size() == 0) { 
       $('#widget-placeholder').append($('#widget-frame')); 
      } 
      this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; 
      this.style.width = '100%'; 
     }); 
    }); 
</script

來源

2012-02-16 18:03:32 kkhimself

Jquery手風琴內的iFrame

回答

相關問題