iframe의 내용을 확장하려면 어떻게 해야 합니까?

iframe의 내용을 확장하려면 어떻게 해야 합니까?

웹 사이트의 페이지에서 iframe(예: HTML 페이지이며 팝업이 아님)의 내용을 확장하려면 어떻게 해야 합니까?

예를 들어 iframe에 표시되는 내용을 원래 크기의 80%로 표시하고 싶습니다.

CSS를 다음과 같이 변경하면 킵의 솔루션은 오페라와 사파리에서 작동합니다.

<style>
    #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
    }
</style>

overflow: 스크롤 막대를 방지하기 위해 #frame에서 숨김을 지정할 수도 있습니다.

IE와 Firefox(최소한 현재 버전에서)에서 작동하는 솔루션을 찾았습니다.Safari/Chrome에서 iframe은 원래 크기의 75%로 크기가 조정되지만 iframe 내의 콘텐츠는 전혀 크기가 조정되지 않습니다.오페라에서는 이게 안 되는 것 같아요.약간 난해한 느낌이 드는데, 더 좋은 방법이 있다면 제안을 받고 싶습니다.

<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</style>

...

<p>Some text before the frame</p>
<div id="wrap">
<iframe id="frame" src="test2.html"></iframe>
</div>
<p>Some text after the frame</p>
</body>

참고: 사용할 수 밖에 없었습니다.wrapFirefox용 요소입니다.어떤 이유에서인지 Firefox에서 개체를 75% 축소해도 레이아웃 이유로 이미지의 원래 크기를 그대로 사용합니다.(위 샘플 코드에서 div를 제거해보면 무슨 뜻인지 알 수 있을 것입니다.)

저는 이 질문에서 이 중 일부를 발견했습니다.

IE8, 9, 10에서 작동하기 위해 몇 시간 동안 고군분투한 끝에 다음과 같이 작동했습니다.

2014년 1월 7일 현재 FF 26, Chrome 32, Opera 18, IE9-11에서 이 파일이 삭제된 CSS가 작동합니다.

.wrap
{
    width: 320px;
    height: 192px;
    padding: 0;
    overflow: hidden;
}

.frame
{
    width: 1280px;
    height: 786px;
    border: 0;

    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

IE8의 경우 iframe과 일치하도록 너비/높이를 설정하고 .wrap container div에 -ms-zoom을 추가합니다.

.wrap
{
    width: 1280px; /* same size as frame */
    height: 768px;
    -ms-zoom: 0.25; /* for IE 8 ONLY */
}

브라우저 스니핑에 좋아하는 방법을 사용하여 적절한 CSS를 조건부로 포함하면 됩니다. *.css 파일 내에서 브라우저 특정 조건부 CSS를 수행할 수 있는 방법이 있습니까?어떤 생각으로

IE8까지 -ms-zoom이 존재하지 않았기 때문에 IE7은 원인을 상실했습니다.

테스트한 실제 HTML은 다음과 같습니다.

<div class="wrap">
   <iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
    <iframe class="frame" src="http://apple.com"></iframe>
</div>

http://jsfiddle.net/esassaman/PnWFY/

방금 테스트를 해봤는데 다른 솔루션은 하나도 효과가 없었어요.저는 이것을 시도해 보았는데 파이어폭스와 크롬에서 완벽하게 작동했습니다.

<div class='wrap'>
  <iframe ...></iframe>
</div>

그리고 CSS:

.wrap {
  width: 640px;
  height: 480px;
  overflow: hidden;
}

iframe {
  width: 76.92% !important;
  height: 76.92% !important;
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

이렇게 하면 모든 콘텐츠가 23.08% 확장되며, 원본이 내장된 버전보다 30% 더 큽니다.(물론 폭/높이 백분율은 그에 따라 조정되어야 합니다.(1/scale_factor)).

iframe은 추가 태그로 포장할 필요가 없습니다.iframe의 너비와 높이는 iframe을 축소한 것과 동일하게 늘려야 합니다.

예를 들어 iframe 내용을 80%로 확장:

#frame { /* Example size! */
    height: 400px; /* original height */
    width: 100%; /* original width */
}
#frame {
    height: 500px; /* new height (400 * (1/0.8) ) */
    width: 125%; /* new width (100 * (1/0.8) )*/

    transform: scale(0.8); 
    transform-origin: 0 0;
}

기본적으로 동일한 크기의 if 프레임을 얻으려면 치수를 조정해야 합니다.

lxs의 답변을 따라갑니다.저는 이 두 가지를 모두 가지고 있는 문제를 발견했습니다.zoom그리고.--webkit-transform태그는 동시에 더블 줌(double-zoom) 종류의 효과를 함으로써 Chrome(버전 15.0.874.15)을 혼동하는 것으로 보입니다.대체함으로써 문제를 해결할 수 있었습니다.zoom와 함께-ms-zoom(IE만을 대상으로 함) Chrome이 사용하도록 내버려 두면서--webkit-transform꼬리표를 붙였고 일이 해결됐습니다

위에 제시된 내용의 대부분을 사용하여 제가 생각해낸 내용을 공유하려고 합니다.Chrome을 확인해 본 적은 없지만 IE, Firefox, Safari에서 작동하는 것으로 알고 있습니다.

이 예의 구체적인 오프셋 및 확대/축소 계수는 Facebook 탭(810px 너비)의 iframe에서 두 개의 웹 사이트를 축소 및 중심화하는 데 사용되었습니다.

사용된 두 사이트는 워드프레스 사이트와 네트워크였습니다.저는 html을 잘 못해서 아마 더 잘 할 수 있었을 텐데 결과는 좋은 것 같습니다.

<style>
    #wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-100px; top:0px; overflow: hidden; }
    #frame { width: 1620px; height: 3500px; position:relative; left:-65px; top:0px; }
    #frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-origin: 0px 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }
</style>
<div id="wrap">
    <iframe id="frame" src="http://www.example.com"></iframe>
</div>

CSS 사용 시:

html{
    zoom:0.4;
}

?-)

창 크기가 조정될 때 iframe 및 해당 내용을 확장하려면 iframe on load 이벤트와 함께 창 크기 조정 이벤트로 다음을 설정할 수 있습니다.

function()
{
    var _wrapWidth=$('#wrap').width();
    var _frameWidth=$($('#frame')[0].contentDocument).width();

    if(!this.contentLoaded)
      this.initialWidth=_frameWidth;
    this.contentLoaded=true;
    var frame=$('#frame')[0];

    var percent=_wrapWidth/this.initialWidth;

    frame.style.width=100.0/percent+"%";
    frame.style.height=100.0/percent+"%";

    frame.style.zoom=percent;
    frame.style.webkitTransform='scale('+percent+')';
    frame.style.webkitTransformOrigin='top left';
    frame.style.MozTransform='scale('+percent+')';
    frame.style.MozTransformOrigin='top left';
    frame.style.oTransform='scale('+percent+')';
    frame.style.oTransformOrigin='top left';
  };

이렇게 하면 iframe과 내용이 랩 디브의 100% 너비(또는 원하는 비율)로 확장됩니다.추가 보너스로 프레임의 CSS를 하드 코딩된 값으로 설정할 필요가 없습니다. 모두 동적으로 설정되므로 랩 디브를 어떻게 표시할지 걱정해야 합니다.

테스트해봤는데 크롬, IE11, 파이어폭스에서 작동합니다.

javascript로 (document.body.clientWidth 등을 통해) 원하는 높이와 너비를 계산한 다음 iframe을 HTML에 이렇게 주입하면 될 것 같습니다.

var element = document.getElementById("myid");요소.HTML += "<iframe src='http://www.google.com ' 높이='200' width=" + document.body.clientWidth * 0.8 + "/>",

IE6에서는 테스트 안했는데 좋은거랑 잘 맞는거 같아요 :)

IE에서 이 기능을 사용하는 데 어려움을 겪고 계신 분들은 다음을 사용하는 것이 도움이 됩니다.-ms-zoom아래에 제시된 바와 같이, 그리고 줌 기능을 사용합니다.#wrap디브가 아닌iframeid. 내 경험으로는.zoom함수는 iframe div를 조정하려고 합니다.#frame, iframe 크기를 조정할 수 있고 iframe 내의 컨텐츠를 조정할 수 없습니다.

이렇게 생겼네요.IE8, Chrome 및 FF에서 작동합니다.

#wrap {
  overflow: hidden;
  position: relative;
  width:800px;
  height:850px;
  -ms-zoom: 0.75;
}

이것은 890px 너비의 페이지에 대한 나의 해결책이었습니다.

#frame { 
overflow: hidden;
position: relative;
width:1044px;
height:1600px;
-ms-zoom: 0.85;
-moz-transform: scale(0.85);
-moz-transform-origin: 0px 0;
-o-transform: scale(0.85);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.85);
-webkit-transform-origin: 0 0; 

}

#wrap의 숫자가 #frame에 스케일 계수를 곱하기만 하면 #wrap #frame 솔루션이 잘 작동합니다.축소된 프레임의 해당 부분만 표시됩니다.웹 사이트를 축소하여 핀터레스트 형태(우드마크 jQuery 플러그인 포함)로 입력하는 방법을 여기에서 확인할 수 있습니다.

http://www.genautica.com/sandbox/woodmark-index.html

그래서 아마도 최선의 해결책은 아니지만, 잘 작동하는 것 같습니다.

<IFRAME ID=myframe SRC=.... ></IFRAME>

<SCRIPT>
    window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>

분명히 부모를 고치려고 하는 것이 아니라, 단지 약간의 자바스크립트로 아이의 몸에 "줌:50%" 스타일을 추가하는 것입니다.

아마 "HTML" 요소의 스타일을 설정할 수는 있겠지만, 시도하지는 않았습니다.

html이 css와 함께 스타일화되어 있다면 아마 다른 크기의 스타일시트를 링크할 수 있을 것입니다.

HTML에 그런 기능이 있다고 생각하지 않습니다.제가 상상할 수 있는 유일한 방법은 서버측 처리를 하는 것입니다.서비스할 웹 페이지의 이미지 스냅샷을 가져와 서버에서 축척하여 클라이언트에 제공할 수도 있습니다.그러나 이 페이지는 대화형 페이지가 아닙니다.(아마도 이미지 맵이 링크를 가질 수 있지만, 여전히.)

다른 아이디어는 HTML을 변경하는 서버측 구성 요소를 갖는 것입니다. 파이어폭스 2.0 줌 기능과 같은 SORT.물론 이것은 완벽한 줌은 아니지만 없는 것보다는 낫습니다.

그 외에는 저는 아이디어가 없습니다.

Flexbox와 iFrame이 100%인 저에게는 이러한 솔루션이 제대로 작동하지 않지만, IFrame이 메모리 또는 백분율 단위를 사용하는 경우 다음과 같은 솔루션이 있습니다.

  window.onload = function(){
    let ifElem = document.getElementById("iframe-id");
    ifElem.contentWindow.document.documentElement.style.fontSize="80%";
  }

말씀하신 것처럼, 당신이 할 수 있을지 의문입니다.
스타일을 설정하여 텍스트 자체의 크기를 조정할 수도 있습니다.font-size: 80%;.
테스트되지 않았으며, 제대로 작동하는지 확인할 수 없으며 상자나 이미지의 크기가 조정되지 않습니다.

언급URL : https://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe