복붙노트

[JQUERY] iframe이 만 페이지의 특정 부분을 표시합니다

JQUERY

iframe이 만 페이지의 특정 부분을 표시합니다

해결법


  1. 1. 당신과 함께 작업에 대한 완전한 창을 제공합니다. 당신이 원하는 것을 할 수있는 가장 직접적인 방법은 서버가 당신에게 오직 당신이 보여주고 싶은 단편을 포함하는 전체 페이지를 제공하는 것입니다.

    당신과 함께 작업에 대한 완전한 창을 제공합니다. 당신이 원하는 것을 할 수있는 가장 직접적인 방법은 서버가 당신에게 오직 당신이 보여주고 싶은 단편을 포함하는 전체 페이지를 제공하는 것입니다.

    다른 방법으로, 당신은 단지 전체 페이지를로드하고 원하는 단지 섹션을 따려고하는 간단한

    를 사용하여 jQuery를 "로드"기능을 사용할 수 있습니다 :

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

    이 당신이해야 할 다른 것들, 그리고 큰 차이는 내용이 메인 페이지의 일부가 아닌 별도의 창으로 분리되고이 될 것입니다 수 있습니다.


  2. 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. 3.I는 수직 스크롤 바 외부 페이지의 일부를 포함 위에 내비게이션 메뉴를 자르기 및 페이지 좌측 것이다 iframe이 필요했다. 나는 몇 가지 간단한 HTML과 CSS와 함께 할 수 있었다.

    I는 수직 스크롤 바 외부 페이지의 일부를 포함 위에 내비게이션 메뉴를 자르기 및 페이지 좌측 것이다 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. 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. 5.어떻게 든 나는 주변에 바이올린을 일부는 내가 작업에있어 방법 :

    어떻게 든 나는 주변에 바이올린을 일부는 내가 작업에있어 방법 :

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

    나는 이것이이 코드가 너무 게시 공유 이번이 처음 생각


  6. 6.적절한 폭과 높이에 iframe을 설정하지 않고 "NO"로 스크롤 속성을 설정합니다.

    적절한 폭과 높이에 iframe을 설정하지 않고 "NO"로 스크롤 속성을 설정합니다.

    당신이 원하는 영역이 페이지의 왼쪽 상단 부분에없는 경우 해당 지역의 내용을 스크롤 할 수 있습니다. 이 질문을 참조하십시오 :

    자바 스크립트와 iframe을 스크롤?

    당신은 두 페이지가 동일한 도메인에있는 경우를 스크롤 할 수 있습니다 생각합니다.


  7. 7.당신이 대중에게 가능한 콘텐츠하지만 귀하의 웹 사이트에 당신이 소유하지 않은 수입은 iframe을 사용하는 가정하면, 당신은 항상 당신이 원하는 위치를로드하는 당신은 iframe을 직접 페이지 앵커를 사용할 수 있습니다.

    당신이 대중에게 가능한 콘텐츠하지만 귀하의 웹 사이트에 당신이 소유하지 않은 수입은 iframe을 사용하는 가정하면, 당신은 항상 당신이 원하는 위치를로드하는 당신은 iframe을 직접 페이지 앵커를 사용할 수 있습니다.

    먼저 데이터를 표시하는 데 필요한 폭과 높이가 iframe을 만들 수 있습니다.

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

    두 번째 파이어 폭스 쇼 앵커 2로 부가 기능 등을 설치하고 당신은 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. 8.

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

  9. from https://stackoverflow.com/questions/3272071/iframe-to-only-show-a-certain-part-of-the-page by cc-by-sa and MIT license