페이지의 특정 부분 만 표시하는 iframe

페이지의 특정 부분 만 표시하는 iframe

---

저는 iframe에서 작업 중이며, 너비가 약 300px, 높이가 150px 인 iframe에서 페이지의 특정 부분 [예 : 오른쪽 상단]을 표시해야합니다.

예:

페이지 에 www.mywebsite.com/portfolio.php 의 iframe 을 넣고 싶었지만 오른쪽 상단에 " 포트폴리오-스포츠 "섹션 만 표시하도록 iframe 크기를 조정했다고 가정 해 보겠습니다 .

이것을 어떻게 달성 할 수 있습니까?

감사.

편집 : 데모

[Pointy 덕분에]

---

는 <iframe>작업 할 수있는 완전한 창을 제공합니다. 원하는 작업을 수행하는 가장 직접적인 방법은 서버에서 표시하려는 조각 만 포함 된 완전한 페이지를 제공하도록하는 것입니다.

대안으로 간단하게 <div>jQuery "로드"기능을 사용하여 전체 페이지를로드하고 원하는 섹션 만 가져올 수 있습니다 .

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

다른 작업이 필요할 수 있으며 중요한 차이점은 콘텐츠가 별도의 창으로 분리되는 대신 기본 페이지의 일부가된다는 것입니다.

---

나는이 일을 잘 받았다.

<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

---

세로 스크롤 막대가있는 외부 페이지의 일부를 포함하고 페이지 상단과 왼쪽의 탐색 메뉴를 잘라내는 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;
}

---

어떻게 든 나는 주위를 둘러 보았고 어떻게 작동하게했는지 :

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

I think this is the first time this code has been posted so share it

---

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

---

Set the iframe to the appropriate width and height and set the scrolling attribute to "no".

If the area you want is not in the top-left portion of the page, you can scroll the content to the appropriate area. Refer to this question:

Scrolling an iframe with javascript?

I believe you'll only be able to scroll it if both pages are on the same domain.

---

Assuming you are using an iframe to import content available to the public but not owned by you into your website, you can always use the page anchor to direct you iframe to load where you want it to.

First you create an iframe with the width and height needed to display the data.

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

Second install addon such as Show Anchors 2 for Firefox and use it to display all the page anchors on the page you would like display in your iframe. Find the anchor point you want your frame to use and copy the anchor location by right clicking on it.

(You can download and install the plugin here => https://addons.mozilla.org/en-us/firefox/addon/show-anchors-2/)

Third use the copied web address with anchor point as your iframe source. When the frame loads, it will show the page starting at the anchor point you specified.

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

That is the condensed instruction list. Hope it helps!

---

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

참고URL : https://stackoverflow.com/questions/3272071/iframe-to-only-show-a-certain-part-of-the-page