내부 컨텐츠를 기반으로 iframe 높이를 동적으로 만듭니다 - JQUERY/Javascript
iframe에 aspx 웹 페이지를 로드하고 있습니다.Iframe의 콘텐츠는 Iframe의 높이보다 클 수 있습니다.iframe에는 스크롤바가 없어야 합니다.
.div. iframe은 기본적으로 입니다.이치노를 몇 개 : 기기qu quququ jQuery 。
$("#TB_window", window.parent.document).height($("body").height() + 50);
서 ''는TB_window입니다.Iframe포함되어 있습니다.
body iframe aspx "의 태그.
iframe을 사용하다나는 그것을 얻을 것이다.TB_window를 참조해 주세요.Chrome은 Firefox의 TB_window를 사용합니다.나는 왜 그런 일이 일어나는지 정말 혼란스럽다.
''를 수 .IFRAME는 다음과 같습니다.contentWindow.document.body.scrollHeight
IFRAME로딩되면로 높이를 변경할 수 .
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
리고 the the the IFRAME하다
<iframe id="idIframe" onload="iframeLoaded()" ...
에 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★iframeLoaded IFRAME폼-서브미션이 발생한 후 그 자체입니다. '다음에 하다'에서과 같이 하면 .IFRAME 「」를 참조해 주세요.
parent.iframeLoaded();
아리스토스에 대한 조금 개선된 답변...
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
다음으로 iframe에 다음과 같이 선언합니다.
<iframe onload="resizeIframe(this)" ...
두 가지 사소한 개선 사항이 있습니다.
- 이 요소는 이미 온로드 콜백에 포함되어 있으므로 document.getElementById를 통해 취득할 필요가 없습니다.
iframe.height = ""다음 문장에서 재할당할지 여부를 확인합니다.이렇게 하면 DOM 요소를 처리할 때 실제로 오버헤드가 발생합니다.
편집: 프레임의 내용이 항상 변경되는 경우 다음 연락처로 문의하십시오.
parent.resizeIframe(this.frameElement);
업데이트 후 iframe 내에서 선택합니다.같은 발신기지에서 동작합니다.
또는 자동 검출:
// on resize
this.container = this.frameElement.contentWindow.document.body;
this.watch = () => {
cancelAnimationFrame(this.watcher);
if (this.lastScrollHeight !== container.scrollHeight) {
parent.resizeIframeToContentSize(this.frameElement);
}
this.lastScrollHeight = container.scrollHeight;
this.watcher = requestAnimationFrame(this.watch);
};
this.watcher = window.requestAnimationFrame(this.watch);
사파리나 크롬에서는 X-FRAME-OPTIONS: Allow-From이 지원되지 않기 때문에 수용된 답변으로는 불충분하다는 것을 알았습니다.대신 다른 접근방식을 택했습니다.디쿠스의 벤 식초가 발표한 프레젠테이션에서 찾을 수 있습니다.부모 창에 이벤트청취자를 추가한 후 iframe 내에서 window.postMessage를 사용하여 부모에게 이벤트를 전송(iframe 크기 변경)하는 것입니다.
따라서 상위 문서에서 이벤트청취자를 추가합니다.
window.addEventListener('message', function(e) {
var $iframe = jQuery("#myIframe");
var eventName = e.data[0];
var data = e.data[1];
switch(eventName) {
case 'setHeight':
$iframe.height(data);
break;
}
}, false);
그리고 iframe 안에 메시지를 게시하는 함수를 적습니다.
function resize() {
var height = document.getElementsByTagName("html")[0].scrollHeight;
window.parent.postMessage(["setHeight", height], "*");
}
마지막으로 iframe 내에서 본문 태그에 onLoad를 추가하여 크기 조정 기능을 실행합니다.
<body onLoad="resize();">
iframe에 이것을 추가해 주세요.이것은 나에게 효과가 있었습니다.
onload="this.height=this.contentWindow.document.body.scrollHeight;"
jQuery를 사용하는 경우 다음 코드를 사용해 보십시오.
onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"
iFrame의 콘텐츠 높이를 확인하기 위해 4가지 속성을 볼 수 있습니다.
document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight
슬프게도 그들은 모두 다른 답을 줄 수 있고 이것들은 브라우저 간에 일관성이 없다.이 됩니다.document.body.offsetHeight가장 좋은 답을 제시합니다.올바른 값을 얻으려면 이 함수를 사용해 보십시오. iframe-resizer 라이브러리에서 가져옵니다. iframe 라이브러리는 컨텐츠가 변경되거나 브라우저 크기가 조정될 때 iFrame을 올바른 크기로 유지합니다.
function getIFrameHeight(){
function getComputedBodyStyle(prop) {
function getPixelValue(value) {
var PIXEL = /^\d+(px)?$/i;
if (PIXEL.test(value)) {
return parseInt(value,base);
}
var
style = el.style.left,
runtimeStyle = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft;
el.style.left = style;
el.runtimeStyle.left = runtimeStyle;
return value;
}
var
el = document.body,
retVal = 0;
if (document.defaultView && document.defaultView.getComputedStyle) {
retVal = document.defaultView.getComputedStyle(el, null)[prop];
} else {//IE8 & below
retVal = getPixelValue(el.currentStyle[prop]);
}
return parseInt(retVal,10);
}
return document.body.offsetHeight +
getComputedBodyStyle('marginTop') +
getComputedBodyStyle('marginBottom');
}
반복 요청 Animation Frame을 크기에 추가할 수도 있습니다.Iframe(@BlueFish의 답변에서 등)은 브라우저가 레이아웃을 그리기 전에 항상 호출되며, 입력 양식, 느린 로딩 콘텐츠 등 컨텐츠의 높이가 변경되었을 때 iframe의 높이를 업데이트할 수 있습니다.
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
window.requestAnimationFrame(() => resizeIframe(iframe));
}
</script>
<iframe onload="resizeIframe(this)" ...
콜백은 퍼포먼스 전체에 큰 영향을 주지 않을 정도로 신속해야 합니다.
다른 답변이 통하지 않아서 몇 가지 변경을 했습니다.도움이 되었으면 좋겠다
$('#iframe').on("load", function() {
var iframe = $(window.top.document).find("#iframe");
iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
});
혹시 이게 도움이 될까봐.나는 이것을 작동시키기 위해 머리를 뽑고 있었는데, iframe이 키가 100%인 클래스 엔트리를 가지고 있다는 것을 알았다.이걸 없앴더니 모든 게 예상대로 작동했어요.그러니 css conflicts가 없는지 확인해 주세요.
저는 jQuery와 아래 코드를 사용하고 있습니다.
var iframe = $(window.top.document).find("#iframe_id_here");
iframe.height(iframe.contents().height()+'px' );
여기서 관련 질문을 참조할 수 있습니다. iframe의 폭과 높이를 부모 div와 동일하게 만드는 방법
동적 높이를 설정하려면 -
- 크로스 도메인 iFrames 및 부모와의 통신 필요
- 그러면 iframe의 스크롤 높이/콘텐츠 높이를 부모 창에 보낼 수 있습니다.
코드 - https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8
javscript/jquery를 사용하는 것보다 가장 쉬운 방법은 다음과 같습니다.
<iframe style="min-height:98vh" src="http://yourdomain.com" width="100%"></iframe>여기서 1vh = 브라우저 창 높이의 1%입니다.그래서 설정될 키의 이론적인 값은 100vh이지만 실질적으로 98vh가 마법을 부렸습니다.
다른 답변은 모두 맞지만 iframe에 나중에 로드되어 iframe 스크롤 높이가 동적으로 변경되는 맵과 같은 동적 콘텐츠가 포함되어 있으면 어떻게 해야 합니까?이렇게 해서 달성했습니다.
var iFrameID = document.getElementById('idIframe');
intval = setInterval(function(){
if(iFrameID.scrollHeight == iFrameID.contentWindow.document.body.scrollHeight){
clearInterval(intval);
}else{
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
},500)
iframe 스크롤 높이와 iframe 콘텐츠 스크롤 높이를 일치시키는 setInterval 내에서 코드를 랩하고 간격을 클리어하기만 하면 됩니다.
제 프로젝트에서는 로드 중에 대시보드 정렬과 같은 동적 화면을 만들어야 하는 요건이 하나 있는데, 사용자가 브라우저 창을 최대화하거나 크기를 조정할 때 페이지 전체에 표시되어야 하며 동적으로 조정되어야 합니다.이를 위해 url을 만들고 iframe을 사용하여 cognos BI로 작성된 동적 보고서 중 하나를 열었습니다.jsp에 BI 보고서를 포함시켜야 합니다.iframe을 사용하여 이 보고서를 jsp에 포함시켰습니다.제 경우에는 다음 코드가 작동합니다.
<iframe src= ${cognosUrl} onload="this.style.height=(this.contentDocument.body.scrollHeight+30) +'px';" scrolling="no" style="width: 100%; min-height: 900px; border: none; overflow: hidden; height: 30px;"></iframe>
트로이의 대답이 먹혀들지 않았다는 것을 알았다.이것은 Ajax에 대해 재작업된 코드와 동일합니다.
$.ajax({
url: 'data.php',
dataType: 'json',
success: function(data)
{
// Put the data onto the page
// Resize the iframe
var iframe = $(window.top.document).find("#iframe");
iframe.height( iframe[0].contentDocument.body.scrollHeight+'px' );
}
});
특히 스크롤이 없을 때 맨 아래에 잘린 것처럼 보이는 창 덩어리에 추가하려면:
function resizeIframe(iframe) {
var addHeight = 20; //or whatever size is being cut off
iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
}
이 기능은 jquery가 없는 솔루션을 필요로 할 때 유용합니다.이 경우 컨테이너를 추가하고 백분율로 채우기를 설정해야 합니다.
HTML 예제 코드:
<div class="iframecontainer">
<iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe>
</div>
CSS 예시 코드:
.iframeclass{
position: absolute;
top: 0;
width: 100%;
}
.iframecontainer{
position: relative;
width: 100%;
height: auto;
padding-top: 61%;
}
간단한 해결책은 내용 영역의 폭과 높이를 측정한 다음 이러한 측정을 사용하여 아래쪽 패딩 비율을 계산하는 것입니다.
이 경우 측정값은 1680 x 720 px이므로 아래쪽의 패딩은 720 / 1680 = 0.43 * 100으로 43%가 됩니다.
.canvas-container {
position: relative;
padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%)
height: 0;
overflow: hidden;
}
.canvas-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
BlueFish에 대한 답변이 약간 개선되었습니다.
function resizeIframe(iframe) {
var padding = 50;
if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
else
iframe.height = (window.innerHeight - padding) + "px";
}
이는 반응성이 좋은 윈도 화면(브라우저, 폰)의 높이와 큰 프레임의 높이를 고려한 것이다.패딩은 iframe이 화면 전체로 이동하는 경우 iframe 위와 아래에 원하는 패딩을 나타냅니다.
jQuery('.home_vidio_img1 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery(this).replaceWith(video);
});
jQuery('.home_vidio_img2 img').click(function(){
video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
jQuery('.home_vidio_img3 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
jQuery('.home_vidio_img4 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
PHP htmlspecialchars() + 높이가 존재하며 0보다 큰지 여부를 확인하는 샘플:
$my_html_markup = ''; // Insert here HTML markup with CSS, JS... '<html><head></head><body>...</body></html>'
$iframe = '<iframe onload="if(this.contentWindow.document.body.scrollHeight) {this.height = this.contentWindow.document.body.scrollHeight;}" width="100%" src="javascript: \''. htmlspecialchars($my_html_markup) . '\'"></iframe>';
$(document).height() // - $('body').offset().top
및/또는
$(window).height()
본문 요소의 높이를 얻는 방법은 스택 오버플로 질문을 참조하십시오.
jQuery에서 본문의 높이를 찾으려면 다음과 같이 하십시오.
if $("body").height()
Firebug의 경우 값이 없습니다.아마 그게 문제일 거야.
iframe 컨테이너 위치 만들기: absolute 및 iframe은 내용에 따라 높이를 자동으로 변경합니다.
<style>
.iframe-container {
display: block;
position: absolute;
/*change position as you need*/
bottom: 0;
left: 0;
right: 0;
top: 0;
}
iframe {
margin: 0;
padding: 0;
border: 0;
width: 100%;
background-color: #fff;
}
</style>
<div class="iframe-container">
<iframe src="http://iframesourcepage"></iframe>
</div>
언급URL : https://stackoverflow.com/questions/9162933/make-iframe-height-dynamic-based-on-content-inside-jquery-javascript
'source' 카테고리의 다른 글
| 무신경한 경우에 대비하여 '으'와 '으'를 구분하기 위한 조합이 있나요? (0) | 2023.01.09 |
|---|---|
| manage를 사용하여 CLI에서 데이터베이스를 클리어하는 가장 쉬운 방법은 무엇입니까?장고 파이요? (0) | 2023.01.09 |
| 두 하위 문자열 사이의 문자열 찾기 (0) | 2023.01.09 |
| Java 8: Java.util.function의 TriFunction(및 kin)은 어디에 있습니까?아니면 대체방법이 뭐죠? (0) | 2023.01.09 |
| JSR의 용도와 용도는 무엇입니까? (0) | 2023.01.09 |