2012-04-18 3 views
3

У меня есть страница, которую мне нужно обслуживать через iframe, но мне нужно отображать только часть страницы, а не все.содержание позиционирования iframe в пределах содержащего div

Мой текущий код:

<div style="display:block;overflow:hidden;width:500px;height:350px;"> 
<iframe height="350px" scrolling="no" 
src="http://my/page/i/want/to/show/part/of/here/" width="500px"></iframe></div> 

Я думал, что лучшим вариантом будет служить IFRAME внутри содержащего DIV, который имеет «переполнение: скрытый», так что он действует как фоторамку. Это работает, но проблема в том, что контент, который я хочу показать, находится в середине страницы iframe, и div всегда предполагает, что 0,0 является началом кадра. Мне нужно расположить iframe так, чтобы div точно соответствовал той части страницы, которую я хочу видеть.

Могу ли я это сделать?

+0

Попробуйте это: HTTP: //stackoverflow.com/a/21004331/1873806 – Svet

ответ

3

В содержимом, которое должно появиться в iframe, если вы можете установить элемент с идентификатором, который отмечает самый верх части содержимого, который вы хотите достичь, вы можете установить атрибут src iframe с этим якорем на HTML URL-адрес

Iframe содержание в:

[a bunch of markup/stuff that you don't want to show] 
.... 
<div id="topOfVisibleArea"></div> 

[more markup] 

IFrame тег:

<iframe height="350px" scrolling="no" 
src="http://my/page/i/want/to/show/part/of/here/#topOfVisibleArea" 
width="500px"></iframe> 

ОБНОВЛЕНИЕ - ЛУЧШЕ ПОДХОД:

Или вы можете просто использовать абсолютное позиционирование на iframe внутри div. Вам понадобится высота и ширина iframe, чтобы они были более широкими и более высокими, чем окно, в которое вы приспособлены, чтобы разместить смещения.

Смотрите этот пример: http://jsfiddle.net/sNSMw/

+0

... хотя это не решит требование горизонтального смещения. – Faust

+0

А, хорошо, только у меня нет никакого контроля над источником страницы в iframe. Поэтому любые корректировки должны быть сделаны на начальной странице. – user1149499

+0

Как получилось, что позиция контента ниже в Firefox, чем в Chrome? Если вы сравните это, вы увидите, что они не показывают точно такой же контент. Можно ли это исправить? – orschiro

1
<iframe name="itunes" src="http://itunes.apple.com/us/album/threads/id509846713&quot; frameborder="0" width="500" height="600" onload="window.frames['itunes'].scrollTo(250,250)"></iframe> 
+0

Не работает, если iframe содержит внешнюю веб-страницу. Скрипт заблокирован браузером. –

5

Используйте отрицательные значения для маржинальных-верхних и Левого поля для размещения IFRAME. Посмотрите на код ниже:

<div style="display:block;overflow:hidden;width:500px;height:350px;"> 
<iframe style="margin-top:-100px;margin-left:-100px" height="350px" scrolling="no" 
src="http://my/page/i/want/to/show/part/of/here/" width="500px"></iframe></div> 
2

Trick все в параметров IFrame стиля. Размещение в дополнительных контейнерах поможет в согласовании требований.

<div style="border: 1px solid red; width: 70px; height: 20px; overflow: 
hidden;"><iframe style="width: 400px; height: 800px; margin-top: -200px; 
margin-left: -200px;" src="http://www.amazon.co.uk/product-reviews 
/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1& 
sortBy=bySubmissionDateDescending" width="320" height="240"></iframe> 
</div> 

Кредит spamtech.co.uk для справки и примеры: http://spamtech.co.uk/tips/position-content-inside-an-iframe/

Смежные вопросы