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

Question

Я работаю над iframe, и мне нужно показать определенную часть страницы (скажем, в верхнем правом углу) в iframe шириной около 300 пикселей и высотой 150px.

Пример:

Допустим, я хотел разместить на странице iframe из www.mywebsite.com / portfolio.php , но при этом размер iframe показывал только портфель "". -спорта"в правом верхнем углу .

Как мне этого добиться?

Спасибо.

РЕДАКТИРОВАТЬ : ДЕМО

[Благодаря Пойнти]

Answer 1

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

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

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

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

Answer 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>

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

Answer 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;
}

Answer 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>

Answer 5

Как-то я возился и кое-как, как я заставил это работать:

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

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

Answer 6

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

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

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

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

Answer 7

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

Answer 8

Предполагая, что вы используете 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>

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