iFrame 너비에 맞게 외부 웹 사이트 콘텐츠 크기 조정

나는 2 개의 iFrames가있는 웹 페이지가 있습니다. 둘 다 고정 너비와 높이입니다. 내부 웹 사이트를로드하고 있습니다. iFrame에 맞게 외부 웹 사이트 너비의 크기를 조정하려면 어떻게해야합니까? (예 : 모바일 브라우저에서 뷰포트 변경)?iFrame 너비에 맞게 외부 웹 사이트 콘텐츠 크기 조정

출처

2012-07-08 Tahin Rahman

그건 불가능합니다. [이보세요] (http://stackoverflow.com/questions/3298210/how-to-embed-a-resized-website-throught-an-iframe). –

답장을 보내 주셔서 감사합니다. –

당신은 환영합니다 :-) –

할 수있는 작업은 iframe에 특정 너비와 높이를 설정 한 다음 (예 : 창 크기와 같을 수 있음) 크기 조정 변형을 적용하는 것입니다. 눈금 값은 창 너비와 iframe에 설정하려는 크기의 비율입니다.

예.

<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>

출처

2012-07-08 11:09:53 Luca

+1, 정말 좋지만 크로스 브라우저 솔루션이 아닐 수도 있습니다! –

사실이지만 브라우저 간 솔루션의 정의에 따라 다릅니다. AFAIK IE에서 작동해야합니다> 8 – Luca

그것은 나를 위해 완벽하게 작동했습니다. 고마워 .... :) –

-1

iframe 내부에서 브라우저는 자동으로 웹 페이지를 별도의 페이지에있는 것처럼 렌더링합니다. 예를 들어 브라우저의 크기를 조정 한 것과 같은 방식으로 작동합니다. 웹 페이지가 디자인 된대로 표시됩니다 고정 된 치수 또는 다른 어떤 것에 대한 유동적 디자인이든간에 ... 사이트에서 다른 렌더링 동작을 강요 할 수는 없습니다. 그러나 프로그래밍 방식으로 페이지의 마크 업을 수정할 수 있습니다.

출처

2012-07-08 11:06:37 AhHatem

높이를 조정하는 웹 사이트 1 개에 대한 팁. 하지만 2 개의 웹 사이트로 변경할 수 있습니다.

다음은 외부 웹 사이트에서 iframe의 크기를 조정하는 코드입니다. iframe 코드가있는 상위 페이지와 외부 웹 사이트에도 코드를 삽입해야하므로 외부 웹 사이트를 수정할 수있는 권한이없는 경우 작동하지 않습니다.

지역 (iframe이) 페이지 : 당신이 "신체 온로드"모든 내용을 유지하는 "DIV"을 필요 단지 코드가

원격 (외부) 페이지를 니펫을 삽입합니다. 당신은 트위터 나 페이스 북 플러그인과 같은 다른 임베디드 코드 문제를 방지하기 위해 "FRM"접두어가 필요

<IFRAME STYLE="width:100%;height:1px" SRC="http://www.remote-site.com/" FRAMEBORDER="no" BORDER="0" SCROLLING="no" ID="estframe"></IFRAME> 

<SCRIPT> 
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
var eventer = window[eventMethod]; 
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 
eventer(messageEvent,function(e) { 
    if (e.data.substring(0,3)=='frm') document.getElementById('estframe').style.height = e.data.substring(3) + 'px'; 
},false); 
</SCRIPT>

: 지역

: 그리고 몸은 "0 마진"으로 스타일을 지정할 필요가있다. 일반 페이지가있는 경우 두 페이지 (스크립트 및 onload)에서 "if"및 "frm"접두어를 제거 할 수 있습니다.

원격 :

당신은 jQuery를이 "진짜"페이지 높이에 대해 수행해야합니다. body.scrollHeight 또는 related를 사용하여 높이를 낮추면 (높이가 낮을수록 높이가 낮아짐) 문제가 생길 수 있으므로 순수 JavaScript로 수행하는 방법을 알지 못합니다. 어떤 이유로 든 항상 가장 큰 높이 (사전 치수 변경)를 반환합니다.

<BODY onload="parent.postMessage('frm'+$('#master').height(),'*')" STYLE="margin:0"> 
<SCRIPT SRC="path-to-jquery/jquery.min.js"></SCRIPT> 
<DIV ID="master"> 
your content 
</DIV>

따라서 상위 페이지 (iframe)의 기본 높이는 1px입니다. 스크립트는 iframe에서 "message/event 대기"를 삽입합니다. 메시지 (게시물 메시지)가 수신되고 첫 번째 3 개의 문자가 "frm"인 경우 (위에서 언급 한 문제를 방지하기 위해) 네 번째 위치에서 번호를 가져오고 'px '단위를 포함하여 iframe 높이 (스타일)를 설정합니다.

외부 사이트 (iframe에로드 됨)는 "frm"및 메인 div의 높이 (이 경우 ID는 "master")로 부모 (오프너)에게 "메시지를 보냅니다". postmessage의 "*"는 "모든 출처"를 의미합니다.

희망이 도움이됩니다. 내 영어로 미안해.

출처

2014-05-14 19:16:06 Arvy

iFrame 너비에 맞게 외부 웹 사이트 콘텐츠 크기 조정

답변

관련 문제