iFrame: автоматическое изменение размера HEIGHT до 100% в зависимости от содержимого

Я провел много исследований и близок к тому, чего хотел. Вот этот iFrame, который я разместил на первой странице своего веб-сайта. Источник с другого веб-сайта. Я хотел, чтобы высота была 100% или полная, независимо от того, насколько коротким или длинным является содержимое содержимого iFrame.

ПРОБЛЕМА: не доходит до 100%.

РЕШЕНИЕ: я нашел этот пост - полноэкранный iframe с высотой 100 %

РЕЗУЛЬТАТ: я добираюсь до цели! Но это создало другую проблему. Пожалуйста, смотрите картинку ниже для демонстрации. ИЗОБРАЖЕНИЕ
- КРАСНОЕ поле - это основное содержимое или макет главной страницы.
- ЖЕЛТЫЙ Окно - это iFrame.
- СИНЯЯ стрелка и линия - это то место, где должен быть iFrame.

НОВАЯ ПРОБЛЕМА. Я почти у цели, но, как видите, мой iFrame просмотрел содержимое страницы. Он должен оставаться в этой синей линии. Я добавил родительский div в iFrame, поэтому я могу указать position: relative, но мой iFrame исчезнет. Кроме того, он отображал практически весь контент. Проверьте код ниже:

<div style="margin:0px;padding:0px;overflow:hidden;">
     <iframe style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="www.example.com" name="sample" height="150%" width="150%"></iframe>
</div>

НОВОЕ РЕШЕНИЕ: НЕТ, у меня нет новых решений для этого. Если я могу попросить вас, ребята, помочь мне с этим. Я хотел добиться полного или 100% отображения содержимого iFrame без изменения значения высоты, если я изменю свой iFrame src. Я хотел, чтобы высота была гибкой, независимо от того, насколько длинным или коротким будет контент. Я пробовал использовать JavaScript, но, судя по многим сообщениям, которые я прочитал, он не работает в междоменном режиме. Так что да. Спасибо!


html iframe autoresize
person Monica Negapatan    schedule 11.03.2015    source источник
comment
Я хотел добиться полного или 100% отображения содержимого iFrame без изменения значения высоты, если я изменю свой iFrame src. Вы говорите, что не хотите устанавливать значение высоты iframe через JS?   -  person Diptendu    schedule 11.03.2015
comment
Одним из возможных подходов может быть вставка JS внутри iframe для фиксации высоты. Этот JS фиксирует высоту тела и отправляет его на родительскую страницу с помощью postMessage или изменения значения window.hash. Затем на уровне родительской страницы вы считываете значение и соответственно устанавливаете высоту iframe.   -  person Diptendu    schedule 11.03.2015
comment
Я не хочу устанавливать высоту iframe в пикселях, но на 100%. 100% гибкость независимо от того, насколько коротким или длинным является содержание. Я пробовал использовать JS, он не работает для междоменного доступа.   -  person Monica Negapatan    schedule 11.03.2015

Ответы (1)


arrow_upward
0
arrow_downward

Если ничего не помогает, вы всегда можете использовать класс.

    <style>
img.Class {width:200px; height:autopx;}
</style>

<img src="UrlOfPicture" class="Class" />
person atho2292    schedule 11.03.2015