Iframe, чтобы показывать только определенную часть страницы

Ответ 1

An <iframe> дает вам полное окно для работы. Самый прямой способ сделать то, что вы хотите, - предоставить серверу полную страницу, содержащую только фрагмент, который вы хотите показать.

В качестве альтернативы вы можете просто использовать простой <div> и использовать функцию загрузки "jQuery" для загрузки всей страницы и вырезания только нужного раздела:

$('#target-div').load('http://www.mywebsite.com/portfolio.php #portfolio-sports');

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

Ответ 2

Я получил эту работу хорошо для меня.

<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;">
<iframe scrolling="no" src="http://www.w3schools.com/css/default.asp" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;">
</iframe>
</div>

Это работает для вас или не сообщит нам.

Источник: http://www.dimpost.com/2012/12/iframe-how-to-display-specific-part-of.html

Ответ 3

Мне нужен iframe, который бы вставлял часть внешней страницы с вертикальной полосой прокрутки, вырезая меню навигации вверху и слева от страницы. Я смог сделать это с помощью простых HTML и CSS.

HTML

<div id="container">
    <iframe id="embed" src="http://www.example.com"></iframe>
</div>

CSS

div#container
{
    width:840px;
    height:317px;
    overflow:scroll;     /* if you don't want a scrollbar, set to hidden */
    overflow-x:hidden;   /* hides horizontal scrollbar on newer browsers */

    /* resize and min-height are optional, allows user to resize viewable area */
    -webkit-resize:vertical; 
    -moz-resize:vertical;
    resize:vertical;
    min-height:317px;
}

iframe#embed
{
    width:1000px;       /* set this to approximate width of entire page you're embedding */
    height:2000px;      /* determines where the bottom of the page cuts off */
    margin-left:-183px; /* clipping left side of page */
    margin-top:-244px;  /* clipping top of page */
    overflow:hidden;

    /* resize seems to inherit in at least Firefox */
    -webkit-resize:none;
    -moz-resize:none;
    resize:none;
}

Ответ 4

<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; border: solid 2px #555; width:594px; height:332px;">
<div style="overflow: hidden; margin-top: -100px; margin-left: -25px;">
</div>
<iframe src="http://example.com/" scrolling="no" style="height: 490px; border: 0px none; width: 619px; margin-top: -60px; margin-left: -24px; ">
</iframe>
</div>
</div>

Ответ 5

Каким-то образом я возился и некоторые, как я получил его на работу:

<iframe src="http://www.example.com#inside" width="100%" height="100%" align="center" ></iframe>

Я думаю, что это первый раз, когда этот код был опубликован, поэтому поделитесь им

Ответ 6

Установите для iframe соответствующую ширину и высоту и установите для атрибута прокрутки значение "нет".

Если область, в которой вы хотите, находится не в верхней левой части страницы, вы можете прокручивать содержимое в соответствующую область. Обратитесь к этому вопросу:

Прокрутка iframe с помощью javascript?

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

Ответ 7

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

Сначала вы создаете iframe с шириной и высотой, необходимой для отображения данных.

<iframe src="http://www.mygreatsite.com/page2.html" width="200px" height="100px"></iframe>

Вставьте дополнительный аддон, такой как Show Anchors 2 для Firefox, и используйте его для отображения всех привязанных страниц на странице, которую вы хотели бы отображать в вашем iframe. Найдите точку привязки, которую вы хотите использовать, и скопируйте местоположение привязки, щелкнув правой кнопкой мыши на ней.

(Вы можете скачать и установить плагин здесь = > https://addons.mozilla.org/en-us/firefox/addon/show-anchors-2/)

Третье использование скопированного веб-адреса с якорной точкой в ​​качестве источника iframe. Когда каркасные нагрузки, он покажет страницу, начиная с точкой привязки вы указали.

<iframe src="http://www.mygreatsite.com/page2.html#anchorname_1" width="200px" height="100px"></iframe>

Это сокращенный список инструкций. Надеюсь, это поможет!

Ответ 8

<div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 575px;">