iframe은 페이지의 특정 부분만 표시할 수 있습니까?

iframe은 페이지의 특정 부분만 표시할 수 있습니까?

저는 iframe 작업을 하고 있는데, 약 300px 너비와 150px 높이의 iframe으로 페이지의 특정 부분을 보여줘야 합니다.

예:

제가 이프레임을 넣고 싶었다고 해주세요.www.example.com/portfolio.phpiframe 크기는 오른쪽 상단의 "flam-sports" 섹션만 표시하도록 합니다.

어떻게 하면 이를 달성할 수 있을까요?

데모

[포니 덕분에]

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

대신에, 당신은 그냥 간단한 것을 사용할 수 있습니다.<div>그리고 jQuery "load" 기능을 사용하여 전체 페이지를 로드하고 원하는 섹션만 추출합니다.

$('#target-div').load('http://www.example.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;
}

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

어떻게든 저는 만지작거렸고 어떻게든 그것을 작동시켰습니다.

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

이 코드는 처음 올라온 것 같으니 공유해주세요.

iframe을 적절한 너비와 높이로 설정하고 스크롤 속성을 "아니오"로 설정합니다.

원하는 영역이 페이지의 왼쪽 상단에 없으면 내용을 해당 영역으로 스크롤할 수 있습니다.다음 질문을 참조하십시오.

자바스크립트로 iframe 스크롤?

두 페이지가 같은 도메인에 있어야 스크롤이 가능할 것 같습니다.

iframe을 사용하여 사용자가 소유하지는 않지만 일반인이 사용할 수 있는 콘텐츠를 웹 사이트로 가져온다고 가정하면, 페이지 앵커를 사용하여 iframe을 원하는 위치에 로드하도록 지시할 수 있습니다.

먼저 데이터를 표시하는 데 필요한 너비와 높이로 iframe을 만듭니다.

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

Firefox용 Show Anchors 2와 같은 두 번째 설치 추가 기능을 사용하여 iframe에 표시할 페이지의 모든 페이지 앵커를 표시합니다.프레임에서 사용할 앵커 포인트를 찾고 앵커 위치를 마우스 오른쪽 단추로 클릭하여 복사합니다.

(플러그인은 여기에서 다운로드하여 설치할 수 있습니다 => https://addons.mozilla.org/en-us/firefox/addon/show-anchors-2/)

셋째, 복사된 웹 주소와 앵커 포인트를 iframe 소스로 사용합니다.프레임이 로드되면 지정한 앵커 포인트에서 시작하는 페이지가 표시됩니다.

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

그것은 요약된 지침 목록입니다.

언급URL : https://stackoverflow.com/questions/3272071/can-an-iframe-only-show-a-certain-part-of-the-page