콘텐츠에 간신히 맞도록 'iframe'의 '너비'와 '높이'를 '자동 조정'하는 솔루션이 필요합니다. 요점은 iframe
이로드 된 후에 너비와 높이를 변경할 수 있다는 것입니다. 아이프레임에 포함된 본문의 크기 변경을 처리하기 위한 이벤트 액션이 필요한 것 같습니다.
<script type="application/javascript">
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iFrame1' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
</script>
<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>
크로스 브라우저 jQuery 플러그인.
크로스 브라우저, 크로스 도메인 라이브러리로, mutationObserver
를 사용하여 콘텐츠에 맞게 iFrame 크기를 유지하고 postMessage
를 사용하여 iFrame과 호스트 페이지 간에 통신합니다. jQuery를 사용하거나 사용하지 않고 작동합니다.
지금까지 한 번 만 주어진 모든 솔루션이 차지하고 끄기도구 크기조정할. 이 내용이 수정된 후 iFrame 크기조정할 원하는걸까요 언급하십시오 수 있습니다. 이를 위해서는 iFrame 내부의 함수를 실행하는 데 필요한 (한 번, 내용이 변경일 불지옥의 변경된 내용을 말하는 이벤트를 합니다).
난 당분간 중지되었습니다 대체하십시오 iFrame 내부의 iFrame 내부의 DOM 국한된 것 같은 코드 (및 couldn& # 39, t 편집할지 iFrame), 코드 수행되 위부의 iFrame 중지되었습니다 DOM 함께 위부의 iFrame (및 couldn& iFrame 내부의 coming from an event # 39, t pick up).
Jquery 찾을 수 있는 솔루션 (도움을 통해 동료를) 에서 나온 어떤 리즈한테 DOM 사용할 수 있습니다. 이 경우, DOM 이 부모창.
이 같은 코드를 높여줍니까 등 필요한 경우 iFrame 내부의 실행하십시오):
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#IDofControlFiringResizeEvent").click(function () {
var frame = $('#IDofiframeInMainWindow', window.parent.document);
var height = jQuery("#IDofContainerInsideiFrame").height();
frame.height(height + 15);
});
});
</script>
한 줄 광고문 solution for sound1.mp3: 시작하는 최소 크기를 및 증대됩니다 컨텐츠뿐만 크기. 필요 없는 스크립트입니다 것이다.
<! - begin 스니핏: js 숨기십시오: > 거짓값 -;
<iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>
끝 - < 스니핏 >;!
이 같은 내용이 iframe 의 노력해야 할 경우 도메인 멋지구리해요. Jquery 어쨌든요 않니다 합니다.
$('#iframe_id').load(function () {
$(this).height($(this).contents().height());
$(this).width($(this).contents().width());
});
할꺼이나 동적으로 조절할 수 있는 이 작업을 수행할 수 있었습니다.
<script language="javaScript">
<!--
function autoResize(){
$('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>
그 다음 페이지에서 iframe 로드되는지 추가합니다.
<script language="javaScript">
function resize()
{
window.parent.autoResize();
}
$(window).on('resize', resize);
</script>
jQuery를 사용하지 않으려면 크로스 브라우저 솔루션을 사용하세요:
/**
* Resizes the given iFrame width so it fits its content
* @param e The iframe to resize
*/
function resizeIframeWidth(e){
// Set width of iframe according to its content
if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
e.width = e.contentWindow.document.body.scrollWidth;
else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
e.width = e.contentDocument.body.scrollWidth + 35;
else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
e.width = e.contentDocument.body.offsetWidth + 35;
}
나는 이 모든 코드를 사용하여 페이지의 때 로드되는지 iframe 오토장제스 높이 (오트로이트 함께 클래스). 구글 크롬, 사파리, 오페라, FF, IE 에서 테스트 및 작동하잖아.
function doIframe() {
var $iframes = $("iframe.autoHeight");
$iframes.each(function() {
var iframe = this;
$(iframe).load(function() {
setHeight(iframe);
});
});
}
function setHeight(e) {
e.height = e.contentWindow.document.body.scrollHeight + 35;
}
$(window).load(function() {
doIframe();
});
이는 솔리드로 대비성 솔루션이므로
function resizer(id)
{
var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;
var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );
document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;
}
html
<IFRAME SRC="blah.php" id="iframe1" onLoad="resizer('iframe1');"></iframe>
동시에 제어할 수 있는 경우 그 내용과 부모창 IFRAME 합니다 [iFrame 레이저] (https://davidjbradshaw.github.io/iframe-resizer/).
이 자동 크기조절하기 library 는 모두 동일한 높이와 너비가, 크로스 도메인 iframe v2.03-00 맞게 컨텐트입니다. 다양한 기능을 제공하는 것이 가장 일반적인 문제를 해결하기 위해 iframe 사용하여, 다음과 같습니다.
난 약간 수정된 Garnaph& 솔루션이므로 # 39 위, 괜찮네요. 수정한 크기를 기준으로 직전 자신의 해결책을 일인 것 같았다 iframe 용량마다 이벤트. 내 상황 (이메일을 통해 무슬림으로써 iframe) 난 직후 필요한 iframe 세로폭 변경하시려면 무슬림으로써. 예를 들어 보여 준 you" 검증 오류 또는 "; 이후 메시지를 무슬림으로써.
난 그냥 내 기질에 네스트된 클릭 () 함수를 iframe html 및 넣습니다.
<script type="text/javascript">
jQuery(document).ready(function () {
var frame = $('#IDofiframeInMainWindow', window.parent.document);
var height = jQuery("#IDofContainerInsideiFrame").height();
frame.height(height + 15);
});
</script>
(단, 크로스 브라우저 기능에 대한 가져다줄래요 협력했습니다 합니다.
다음은 몇 가지 방법:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
또 다른 대체 및
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
Alt 나티우스 스크롤하지 숨기기 위해 위와 같이 2 개 포함)
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
두 번째 코드를 기술로 해킹할
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
이루어질 수 있는 iFrame, 상위입니다 화면 이동난 숨김니다 " overflow:hidden"; 스크롤바 및 iFrame 이루어질 수 있는 폭과 높이를 검색하기를 숨기십시오 upto 150% # 39, 이후 화면 이동난 강제로 위부의 페이지에서든 바디입니다 doesn& 화면 이동난 않을 수 없는 한 작성되지는 iframe 의 경계를 충족시켰습니다 호출이네요 이 감춰집니다 iFrame 의 이 스크롤바 완벽하게 너버!
출처: 세트 [iframe 자동 높이] (https://stackoverflow.com/questions/5867985/iframe-100-height)
위의 모든 방법을 사용하여 작업할 수 없습니다.
javascript:
function resizer(id) {
var doc = document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;
var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);
document.getElementById(id).style.height = height;
document.getElementById(id).style.width = width;
}
html:
<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv" >
<input id="txtHeight"/>height <input id="txtWidth"/>width
<iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0" ></iframe>
<iframe src="left.aspx" name="leftFrame" scrolling="yes" id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
<iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; " onload="resizer('Iframe2');" ></iframe>
</div>
Env: IE 10, 윈도 7 x64
또 다른 솔루션을 아웃해야 실험 후 일부 생각했어요. # 39, & # 39 로 표시된, best answer& 내가 처음 시도해 코드 이 질문에 및 it didn& # 39, 빗나갔다. 내 생각엔 내 iframe 때문에 당시 내 프로그램이 동적으로 생성된. 다음은 코드 아이 유즈드 (된다고 가져다줄래요):
Javascript iframe 내부의 로드되는:
window.onload = function()
{
parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
};
>. 4 개 이상의 픽셀입니다 높이 지루려면 화면 이동난 추가할 필요가 있다 (일부 이상한 버그 / 효과를 iframe). 너비입니다 추가할 수 있는 것은 더욱 낯선 사람, 틀렸다니까 안전하다구요 18px 너비입니다 바디입니다. 또한 대한 css 를 확보할 수 있도록 iframe 바디입니다 발려짐 (아래).
html, body {
margin:0;
padding:0;
display:table;
}
iframe {
border:0;
padding:0;
margin:0;
}
다음은 html 에서 iframe:
<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>
내 모든 코드 슬라이드에서는 iframe:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>File Upload</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
display:table;
}
</style>
<script type="text/javascript">
window.onload = function()
{
parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
};
</script>
</head>
<body>
This is a test.<br>
testing
</body>
</html>
저는 크롬, 파이어폭스 (windows xp 에서) 에 있는 작은 테스트 완료. 난 아직 더 많은 테스트를 해야 하는 방법을 알려주세요 너무 잘 어울려.
This is how I would do it (테스트를 FF / 크롬):
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
$(iframe).height($(iframe).contents().find('html').height());
}
</script>
<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>
I found to work) 이 레이저 우수:
function resizer(id)
{
var doc = document.getElementById(id).contentWindow.document;
var body_ = doc.body;
var html_ = doc.documentElement;
var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );
document.getElementById(id).height = height;
document.getElementById(id).width = width;
}
스타일입니까 기록하십시오 객체인지 재거됨.
Jquery 의 경우 이 값은 다는일은, 정말 최고의 선택이 돕는다구요!! 잠깐 도와주는!
iframe
<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>
jQuery
<script>
var valueSize = $( "#iframe" ).offset();
var totalsize = (valueSize.top * 2) + valueSize.left;
$( "#iframe" ).height(totalsize);
</script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>
>.
.spec_iframe {
width: 100%;
overflow: hidden;
}
이렇게 할 수 있는 웹 확장명은 관점에서 볼 수 있었습니다. 이 UI 를 각 페이지 안에 살고 있으며, 이 ᅴ 웹 확장명은 일부 블렌드합니다 사용한다 'iframe'. 그래서 ',' 동적입니다 컨텐트에서 iframe 내부의 폭과 높이를 iframe '' 다시 조정할 수 있다.
내가 사용하는 그러나 이 개념은 모든 라이브러리란 qic 반응을 보인다.
'난' 스타일 '정말로' iframe 내부의 변경일 바디입니다 대량량 치수에는. 이렇게 하면 필요한 모든 공간 안에 있는 요소를 사용하여 배치하기. '있다' 와 '높이' didn& 너버 100% # 39, t work for me (내 생각 때문에 iframe 에 기본 'width = 300px' 와 '높이 = 150px')
/* something like this */
body {
width: 99999px;
height: 99999px;
}
그럼 좀 하면서 모든 iframe ᅴ 안에 div 와 제공했음 시켜버리므로
#ui-root {
display: 'inline-block';
}
내 안에 '# ᅴ 루트 렌더링합니다 app 이 후' (in 나는한다 compon랑디드문트 반응할 수 있는 '이') 이 같은 계산을 치수에는 내가 그들에게 빈다우스포스트 세이지 사용하여 페이지를 상위입니다 div 및 동기화 '':
let elRect = el.getBoundingClientRect()
window.parent.postMessage({
type: 'resize-iframe',
payload: {
width: elRect.width,
height: elRect.height
}
}, '*')
상위 프레임을 나는한다 이 같은 일이.
window.addEventListener('message', (ev) => {
if(ev.data.type && ev.data.type === 'resize-iframe') {
iframe.style.width = ev.data.payload.width + 'px'
iframe.style.height = ev.data.payload.height + 'px'
}
}, false)