2015-03-03 5 views
0

Может ли кто-нибудь помочь мне сделать этот код в Google Chrome? Это отлично работает на IE.Получить высоту содержимого iframe в Google Chrome

Спасибо.

<!doctype html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
    <script> 
    function calcIframeSize() { 
     var altura = $("body", $("#frameExtraFields").contents()).height(); 
     $("#frameExtraFields").height(altura); 
    } 
    $(document).ready(function() { 
     $("#frameExtraFields").ready(function() { 
     calcIframeSize(); 
     }); 
    }); 
    </script> 
</head> 
<body> 

<iframe src="frame.html" width="80%" height="600" id="frameExtraFields"></iframe> 

</body> 
</html> 
+3

Каков ожидаемый результат? –

+0

См. [Этот вопрос] (http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content?rq=1) –

+0

Ваша проблема возникает из '$ (" # frameExtraFields "). Ready ', что не означает, что документ внутри iframe загружен. –

ответ

0

Учитывая, что ваш IFrame загружает src на том же домене, следующие должны это сделать:

<script> 
    $(document).ready(function() { 
     $('#frameExtraFields').load(function() { 
      $(this).height($(this).contents().height()); 
     }); 
    }); 
</script> 

<iframe src="/user/login/" width="80%" height="auto" id="frameExtraFields"></iframe> 

Примечание Я удалил фиксированную высоту вы установите на iframe элемент и выставиться его auto вместо ,

См this fiddle

+0

Я уже тестировал его раньше, но это не сработало. ' –

+0

Является ли [скрипка] (http://jsfiddle.net/gu7vua60/3/) для вас, в Chrome? –

0

Решение:

Я использую следующий код для всех браузер, который специально искать хром:

.offsetHeight возвращает то же значение в хроме по сравнению с .scrollHeight в остальной части браузеров.

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); 

if (document.getElementById) { 
    newheight = isChrome 
    ? document.getElementById(id).contentWindow.document.body.offsetHeight 
    : document.getElementById(id).contentWindow.document.body.scrollHeight; 
} 

Полная функция, чтобы изменить высоту IFrame:

function autoResize(id) //id = iframe-id 
{ 
    var newheight = 500; 
    var newwidth; 

    var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); 

    if (document.getElementById) { 
     newheight = isChrome ? document.getElementById(id).contentWindow.document.body.offsetHeight : document.getElementById(id).contentWindow.document.body.scrollHeight; 

     newheightVisible = newheight + 30; //Don't ask me why this, i am also wondering but it works 
    } 

    if (newheight != lastheight) { 
     jQuery("#" + id).css('height', newheightVisible); 
     lastheight = newheightVisible; 
    } 
} 
Смежные вопросы