2015-01-02 2 views
0

У меня есть iframe, включенный в файл parent.html.Как установить размер для iframe на основе его внутреннего содержимого?

Мне нужно установить размер iframe на основе его внутреннего содержимого (child.html).

child.html будет содержать длинный текст, с помощью следующего кода в строке

child.contentWindow.document.body.scrollHeight

я получаю размер эквиваленты видимой части содержимого в IFRAME и не его полный размер (непонятная часть).

Любая идея, что я делаю неправильно и как ее исправить?

---------------------------- parent.html

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Parent</title> 
    <script> 
    window.name = 'parent'; 
    </script> 
    <style> 
    body { 
    } 
    #childIframe{ 

    } 
    </style> 

    </head> 

    <body> 
     <iframe id="childIframe" src="child.html" scrolling="no" frameborder="0"></iframe> 
    <script> 

    var child = document.getElementById('childIframe'); 
    child.height = child.contentWindow.document.body.scrollHeight + "px"; 

    </script> 
    </body> 


    </html> 

-------- -------------------- child.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Child</title> 
</head> 
<script> 
window.name = 'child'; 
</script> 

<body> 
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pretium placerat enim, ut luctus orci porta quis. Suspendisse id dignissim nunc. Aenean non sapien in felis aliquet eleifend. Sed et nisi congue, pharetra ligula accumsan, accumsan diam. Praesent risus est, porttitor ut venenatis et, convallis non orci. Duis viverra finibus est, vel aliquam purus elementum finibus. Nunc ullamcorper rhoncus eros id pulvinar. Nam tellus nulla, pretium quis consequat sit amet, rutrum non augue. 

.... very very long text here 
</p> 

</body> 

</html> 
+1

, пожалуйста, добавьте комментарий при голосовании, был ли мой вопрос незаконным? – GibboK

ответ

1

Предпочитаемый один:

function setHeight() 
{ 
    var child = document.getElementById('childIframe'); 
    child.style.height = child.contentWindow.document.body.scrollHeight + "px"; 
} 

или

child.height = child.contentWindow.document.body.scrollHeight; 

Атрибут высоты iframe не принимает единиц, в то время как свойство стиля имеет значение.

ли это на OnLoad:

<iframe id="childIframe" src="child.html" scrolling="no" onload="setHeight()" frameborder="0"></iframe> 
+0

используя ваш код и инспектор, я вижу тело в child.html размером 1560px, но в строке child.style.height = child.contentWindow.document.body.scrollHeight + "px"; Я всегда получаю 150 ... что может быть проблемой? – GibboK

+0

Нам нужно подождать до завершения – Mouser

+0

что вы имеете в виду? thanks – GibboK

0

Мы используем такой код ....

Script в главе родительской страницы:

<script type='text/javascript'> 
function SetHeight(wParent,wChild) { // parent window, child window 
    var f = wParent.frames["iFrameName"]; // whatever the iframe's name is 
    if (f) f.style.height=(wChild.document.body.scrollHeight + 30)+"px"; 
} 
</script> 

если вызывающему от ребенка страницы, добавить к событию onload.

<body onload='SetHeight(parent,window)'> 

при вызове с родительской страницы.

SetHeight(window , window.frames["iFrameName"]) 

Какое событие? если вам нужно, чтобы код находился в родительском фрейме, вам нужно что-то сделать, чтобы повторно проверить состояние фрейма загрузки, чтобы проверить его состояние, возможно, используя setTimeout. Вы сможете получить высоту документа только после загрузки дочерней страницы &.

НО

Если страница ребенка из другого домена, а затем пытается сделать это почти наверняка даст вам «Отказано в доступ» ошибку Поскольку JavaScript из родительского фрейма не может получить доступ к атрибутам ребенка от из другого домена.

+1

Сгенерировано ключевое слово 'this'. Я думаю, вы имели в виду, что этот код находится в исходном HTML-тексте iframes. Ваш код работает, но должен был его разместить, он не сразу от вашего ответа. Но что, если владелец не контролирует страницу html, загруженную внутри iframe. Это нужно делать на родительской стороне, а не на дочерней стороне. – Mouser

+0

Я ошибся в ответе. Будет редактировать. – user2808054

+0

@Mouser внесла поправки в ответ – user2808054