iFrame внутри гармошки Jquery - PullRequest
Новая
       7

iFrame внутри гармошки Jquery

2 голосов
/ 18 февраля 2010

У меня есть страница с iFrame, встроенным в аккордеон JQuery.

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 правильно встроен в страницу Кто-нибудь еще сталкивался с подобной проблемой?

Ответы [ 3 ]

2 голосов
/ 16 февраля 2012

Это потому, что IE не отображает потомков скрытых элементов.В качестве обходного пути, вы можете загрузить iframe 1px на 1px вне аккордеона и переместить его в аккордеон, как только 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

>

0 голосов
/ 19 февраля 2010

Я проверил ваш код и, похоже, отлично работает в Firefox и Safari на Mac и IE7 на ПК. Я могу видеть iframe правильно. Это может быть проблема с браузером или CSS?

Вы также пытались объявить ширину и высоту окружающего тега div? Вы можете установить его с помощью функции click (). Но пока попробуйте добавить 'style = "width: 600px; height: 500px;"' к тегу div вручную, чтобы проверить его.

Это также может быть связано с тем, какие скрипты 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>

Я собираюсь начать экспериментировать с аккордеоном и фреймами (отсюда и интерес) ...

0 голосов
/ 18 февраля 2010

В качестве опции можно использовать следующее: 

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

Насколько я знаю, аккордеон скрывает элементы, которые не показаны, и это может помешать загрузке страницы в Iframe.1004 *

...