настроить высоту iframe в зависимости от содержимого

Question

Я использую следующий скрипт для автоматической настройки высоты iframe.

function autoIframe(frameId) {
  try {
    frame = document.getElementById(frameId);
    innerDoc = (frame.contentDocument) ?
               frame.contentDocument : frame.contentWindow.document;
    objToResize = (frame.style) ? frame.style : frame;
    objToResize.height = innerDoc.body.scrollHeight + 10 + 'px';
  }
  catch (err) {
    window.status = err.message;
  }
}

У меня есть три вкладки jquery и iframe в первых двух вкладках (myiframe1 и myiframe2)

Я вызываю приведенный выше код при загрузке iframes, как.

<iframe id="myiframe1" width="100%" onload="autoIframe('myiframe1');"
        scrolling="auto" frameborder="0" src="mypath1">
</iframe>

<iframe id="myiframe2" width="100%" onload="autoIframe('myiframe2');"
        scrolling="auto" frameborder="0" src="mypath2">
</iframe>

Это прекрасно работает в Google Chrome и IE8. Но в Firefox, iframe на первой вкладке (видимая вкладка) имеет высоту в соответствии с содержимым, а iframe на второй вкладке не имеет правильной высоты. Высота второй вкладки установлена ​​на 10 пикселей.

В чем здесь проблема?

Answer 1

display:none элементы имеют высоту 0 iirc, но jquery предлагает способ «не скрывать, а перемещать содержимое табуляции за пределы экрана».

Документацию / пример можно найти здесь:

jquery ui docs - вкладки - часто задаваемые вопросы

Answer 2

Вы можете попробовать это:

сначала выберите вкладку фрейма, размер которого вы хотите изменить (чтобы он стал видимым, он получил высоту), а затем снова выберите первую (текущую) вкладку:

$('#tabs').tabs('select', 2);
// adjust second tab iframe height here 
$('#tabs').tabs('select', 1);

(вероятно, высота невидимой / невыбранной вкладки равна 0, поэтому изменение размера не будет работать).