스크롤 막대를 사용하지 않고 iframe을 내용에 따라 높이를 자동으로 조정합니까? [복제]
이 질문에는 이미 답변이 있습니다.
예를 들면 다음과 같습니다.
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
스크롤을 사용하지 않고 내부 내용에 따라 높이를 조정할 수 있기를 원합니다.
이것을 <head>섹션에 추가 하십시오 :
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
그리고 iframe을 다음과 같이 변경하십시오.
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
sitepoint 토론 에서 찾을 수 있습니다 .
이 라이브러리를 사용할 수 있습니다.이 라이브러리는 처음에 iframe의 크기를 올바르게 조정하고 iframe 컨텐츠의 크기가 변경 될 때마다 (a 정기적 인 체크인 setInterval또는을 통해 MutationObserver) 감지하여 크기를 조정하여 올바른 크기로 유지 합니다.
https://github.com/davidjbradshaw/iframe-resizer
그것들은 또한 React 버전입니다.
https://github.com/davidjbradshaw/iframe-resizer-react
이것은 교차 및 동일한 도메인 iframe에서 작동합니다.
다음은 컴팩트 버전입니다.
<iframe src="hello.html"
onload="this.style.height=this.contentDocument.body.scrollHeight +'px';">
</iframe>
hjpotter92 의 제안 은 사파리에서 작동하지 않습니다! 스크립트를 약간 조정하여 이제 Safari에서도 작동합니다.
일부 브라우저에서 높이를 줄이려면로드 할 때마다 높이 만 0으로 변경하십시오.
이것을 <head>태그에 추가하십시오 :
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
onloadiframe에 다음과 같은 속성을 추가하십시오.
<iframe onload='resizeIframe(this)'></iframe>
hjpotter92의 대답은 어떤 경우에 충분히 잘 작동하지만, 나는 크롬, 동안 벌금을 자주 하단 클립 파이어 폭스 및 IE에있어 iframe이 콘텐츠를 발견.
다음은 저에게 잘 작동하며 클리핑 문제를 해결합니다. 코드는 http://www.dyn-web.com/tutorials/iframes/height/ 에서 찾을 수 있습니다. HTML에서 onload 속성을 가져 오기 위해 약간 수정했습니다. <iframe>HTML 다음과 닫는 </body>태그 앞에 다음 코드를 배치하십시오 .
<script type="text/javascript">
function getDocHeight(doc) {
doc = doc || document;
// stackoverflow.com/questions/1145850/
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument:
ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height ...
// IE opt. for bing/msn needs a bit added or scrollbar appears
ifrm.style.height = getDocHeight( doc ) + 4 + "px";
ifrm.style.visibility = 'visible';
}
document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly
setIframeHeight(this.id);
}
</script>
iframe HTML :
<iframe id="ifrm" src="some-iframe-content.html"></iframe>
<head>문서에 Javascript를 포함 하려면 dyn-web 웹 페이지 에서와 같이 HTML onload에서 인라인 속성 을 사용하여 되돌릴 수 있습니다 .iframe
인라인 JavaScript를 피하십시오. 당신은 수업을 사용할 수 있습니다 :
<iframe src="..." frameborder="0" scrolling="auto" class="iframe-full-height"></iframe>
그리고 jQuery로 참조하십시오 :
$('.iframe-full-height').on('load', function(){
this.style.height=this.contentDocument.body.scrollHeight +'px';
});
jQuery의 .contents () 메소드 메소드를 사용하면 DOM 트리에서 요소의 직계 하위를 검색 할 수 있습니다.
jQuery :
$('iframe').height( $('iframe').contents().outerHeight() );
iframe 내부의 페이지 본문은 높이를 가져야합니다.
CSS :
body {
height: auto;
overflow: auto
}
이것은 나를 위해 작동합니다 (한 페이지에 여러 iframe이있는 경우에도).
$('iframe').load(function(){$(this).height($(this).contents().outerHeight());});
IE11에 이것을 시도하십시오
<iframe name="Stack" src="http://stackoverflow.com/" style='height: 100%; width: 100%;' frameborder="0" scrolling="no" id="iframe">...</iframe>
이것은 (주로) 나를 위해 작동합니다.
이것을 페이지 하단에 놓으십시오.
<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="application/javascript" src="/script/jquery.browser.js">
</script>
<script type="application/javascript" src="/script/jquery-iframe-auto-height.js">
</script>
<script type="application/javascript">
jQuery('iframe').iframeAutoHeight();
$(window).load(
function() {
jQuery('iframe').iframeAutoHeight();
}
);
// for when content is not html e.g. a PDF
function setIframeHeight() {
$('.iframe_fullHeight').each(
function (i, item) {
item.height = $(document).height();
}
);
};
$(document).ready( function () {
setIframeHeight();
});
$(window).resize( function () {
setIframeHeight();
});
</script>
전반부는 ???에서 왔으며 iframe에 html이있을 때 작동합니다. 후반부는 iframe 클래스가 인 경우 iframe을 콘텐츠 높이가 아닌 페이지 높이로 설정합니다 iframe_fullHeight. 내용이 PDF 등의 경우에는 클래스를 설정해야합니다. 전체 높이가 적절한 경우에만 사용할 수 있습니다.
참고 : 어떤 이유로 창 크기를 조정 한 후 다시 계산하면 높이가 잘못됩니다.
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
}
document.getElementById(id).height=(newheight) + "px";
document.getElementById(id).width=(newwidth) + "px";
}
이것을 iframe에 추가하십시오 : onload = "autoResize ( 'youriframeid')"
jq2('#stocks_iframe').load(function(){
var iframe_width = jq2('#stocks_iframe').contents().outerHeight() ;
jq2('#stocks_iframe').css('height',iframe_width); });
<iframe id='stocks_iframe' style='width:100%;height:0px;' frameborder='0'>
동적으로 생성 된 iframe에 대해 이전에 iframe.onload를 호출하는 데 문제가 있었으므로 iframe 크기를 설정하기 위해이 접근법을 사용했습니다.
iFrame보기
var height = $("body").outerHeight();
parent.SetIFrameHeight(height);
메인 뷰
SetIFrameHeight = function(height) {
$("#iFrameWrapper").height(height);
}
(두보기가 동일한 도메인에있는 경우에만 작동합니다)
AngularJS와 함께했습니다. Angular에는 ng-load가 없지만 타사 모듈이 만들어졌습니다. 아래에 bower로 설치하거나 여기에서 찾으십시오 : https://github.com/andrefarzat/ng-load
ngLoad 지시문을 가져옵니다. bower install ng-load --save
iframe을 설정하십시오.
<iframe id="CreditReportFrame" src="about:blank" frameborder="0" scrolling="no" ng-load="resizeIframe($event)" seamless></iframe>
컨트롤러 크기 조정
$scope.resizeIframe = function (event) {
console.log("iframe loaded!");
var iframe = event.target;
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
};
iframe일반 페이지처럼 행동 하고 싶었습니다 ( iframe요소 내부에 전체 화면 배너를 만들어야 함 ). 여기 내 스크립트가 있습니다.
(function (window, undefined) {
var frame,
lastKnownFrameHeight = 0,
maxFrameLoadedTries = 5,
maxResizeCheckTries = 20;
//Resize iframe on window resize
addEvent(window, 'resize', resizeFrame);
var iframeCheckInterval = window.setInterval(function () {
maxFrameLoadedTries--;
var frames = document.getElementsByTagName('iframe');
if (maxFrameLoadedTries == 0 || frames.length) {
clearInterval(iframeCheckInterval);
frame = frames[0];
addEvent(frame, 'load', resizeFrame);
var resizeCheckInterval = setInterval(function () {
resizeFrame();
maxResizeCheckTries--;
if (maxResizeCheckTries == 0) {
clearInterval(resizeCheckInterval);
}
}, 1000);
resizeFrame();
}
}, 500);
function resizeFrame() {
if (frame) {
var frameHeight = frame.contentWindow.document.body.scrollHeight;
if (frameHeight !== lastKnownFrameHeight) {
lastKnownFrameHeight = frameHeight;
var viewportWidth = document.documentElement.clientWidth;
if (document.compatMode && document.compatMode === 'BackCompat') {
viewportWidth = document.body.clientWidth;
}
frame.setAttribute('width', viewportWidth);
frame.setAttribute('height', lastKnownFrameHeight);
frame.style.width = viewportWidth + 'px';
frame.style.height = frameHeight + 'px';
}
}
}
//--------------------------------------------------------------
// Cross-browser helpers
//--------------------------------------------------------------
function addEvent(elem, event, fn) {
if (elem.addEventListener) {
elem.addEventListener(event, fn, false);
} else {
elem.attachEvent("on" + event, function () {
return (fn.call(elem, window.event));
});
}
}
})(window);
기능은 설명이 필요하며 목적을 추가로 설명하기위한 주석이 있습니다.
<script type="text/javascript">
function resizeIframe(obj) {
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
크롬에서는 작동하지 않습니다. 그러나 파이어 폭스를 위해 일하고 있습니다.
이 옵션은 100 % 작동합니다
<iframe id='iframe2' src="url.com" frameborder="0" style="overflow: hidden; height: 100%; width: 100%; position: absolute;" height="100%" width="100%"></iframe>
'Programing' 카테고리의 다른 글
| .idea 폴더에서 무엇을 gitignore? (0) | 2020.02.16 |
|---|---|
| python 키워드 "with"는 무엇에 사용됩니까? (0) | 2020.02.15 |
| 언제 레디 스에? (0) | 2020.02.15 |
| Java에서 Runnable 인터페이스와 Callable 인터페이스의 차이점 (0) | 2020.02.15 |
| React에서 상태와 소품의 차이점은 무엇입니까? (0) | 2020.02.15 |