내용 높이에 따라 iframe 높이 크기 조정
제 블로그 페이지를 제 웹사이트에서 열고 있습니다.문제는 iframe에 폭을 줄 수 있지만 높이는 iframe에 스크롤바가 없고 한 페이지처럼 보이도록 동적으로 해야 한다는 것입니다.
콘텐츠 높이를 계산하기 위해 다양한 자바스크립트 코드를 시도했지만 모두 접근 거부 에러를 발생시켜 소용이 없습니다.
<iframe src="http://bagtheplanet.blogspot.com/" name="ifrm" id="ifrm" width="1024px" ></iframe>
Ajax를 사용하여 높이를 계산하거나 PHP를 사용할 수 있습니까?
두 가지 하위 질문에 직접 답변하려면:아니요, Ajax에서는 할 수 없습니다.또한 PHP에서는 계산할 수 없습니다.
가 한 은 iframe'd 페이지에서 입니다.window.onload(★★★★★★★★★★★★★★★)domready이미지를 로드하는 데 시간이 걸릴 수 있으므로)를 사용하여 페이지 본문 높이를 부모에게 전달합니다.
<body onload='parent.resizeIframe(document.body.scrollHeight)'>
'하다'는parent.resizeIframe음음음같 뭇매하다
function resizeIframe(newHeight)
{
document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}
Et 리사이저는, 귀찮은 Et voila가 .contentdocument »contentWindow (만들기타 :)
물론, 이제 사람들은 당신의 iframe을 먼저 기본 높이로 보게 되지만, 이것은 처음에는 iframe을 숨기고 '로드'하는 이미지만 보여주면 쉽게 처리할 수 있습니다.ㅇㅇㅇ이 resizeIframe함수가 시작되고 로딩 이미지를 숨길 추가 선 2개를 삽입하고 가짜 Ajax 룩의 iframe을 표시합니다.
물론, 이것은 같은 도메인에서만 동작하기 때문에, 이 정보를 삽입하기 위한 프록시 PHP 스크립트를 가지고 싶을지도 모릅니다.또한, PHP를 사용하여 블로그의 RSS 피드를 직접 사이트에 삽입하는 것도 좋을지도 모릅니다.
이 작업은 JavaScript를 사용하여 수행할 수 있습니다.
document.getElementById('foo').height = document.getElementById('foo').contentWindow.document.body.scrollHeight + "px";
IFRAME 콘텐츠의 피팅은 구글에서 쉽게 찾을 수 있습니다.다음은 한 가지 해결 방법입니다.
<script type="text/javascript">
function autoIframe(frameId) {
try {
frame = document.getElementById(frameId);
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 10;
}
catch(err) {
window.status = err.message;
}
}
</script>
물론 이 방법으로는 교차 도메인 문제를 해결할 수 없습니다. ★★document.domain이 사이트들이 같은 장소에 있다면 도움이 될 것입니다.만약 당신이 랜덤 사이트를 찾는다면 해결책은 없다고 생각합니다.
다음은 Firefox 3.6, Safari 4.0.4 및 Internet Explorer 7에서 작동하는 MoTools를 사용한 문제에 대한 해결 방법입니다.
var iframe_container = $('iframe_container_id');
var iframe_style = {
height: 300,
width: '100%'
};
if (!Browser.Engine.trident) {
// IE has hasLayout issues if iframe display is none, so don't use the loading class
iframe_container.addClass('loading');
iframe_style.display = 'none';
}
this.iframe = new IFrame({
frameBorder: 0,
src: "http://www.youriframeurl.com/",
styles: iframe_style,
events: {
'load': function() {
var innerDoc = (this.contentDocument) ? this.contentDocument : this.contentWindow.document;
var h = this.measure(function(){
return innerDoc.body.scrollHeight;
});
this.setStyles({
height: h.toInt(),
display: 'block'
});
if (!Browser.Engine.trident) {
iframe_container.removeClass('loading');
}
}
}
}).inject(iframe_container);
iframe 컨테이너 중앙에 Ajax 로드 그래픽을 표시하도록 "loading" 클래스를 스타일링합니다.Internet Explorer 이외의 브라우저에서는 콘텐츠 로드가 완료되고 로드된 그래픽이 삭제되면 풀 하이트 IFRAME이 표시됩니다.
아래는 나의onload이벤트 핸들러
jQuery UI 대화 상자에서 IFRAME을 사용합니다.용도에 따라 조정이 필요합니다.Internet Explorer 8 및 Firefox 3.5에서는 이 방법이 효과가 있는 것 같습니다.좀 더 수정해야 할 수도 있지만 대체적인 생각은 분명할 겁니다.
function onLoadDialog(frame) {
try {
var body = frame.contentDocument.body;
var $body = $(body);
var $frame = $(frame);
var contentDiv = frame.parentNode;
var $contentDiv = $(contentDiv);
var savedShow = $contentDiv.dialog('option', 'show');
var position = $contentDiv.dialog('option', 'position');
// disable show effect to enable re-positioning (UI bug?)
$contentDiv.dialog('option', 'show', null);
// show dialog, otherwise sizing won't work
$contentDiv.dialog('open');
// Maximize frame width in order to determine minimal scrollHeight
$frame.css('width', $contentDiv.dialog('option', 'maxWidth') -
contentDiv.offsetWidth + frame.offsetWidth);
var minScrollHeight = body.scrollHeight;
var maxWidth = body.offsetWidth;
var minWidth = 0;
// decrease frame width until scrollHeight starts to grow (wrapping)
while (Math.abs(maxWidth - minWidth) > 10) {
var width = minWidth + Math.ceil((maxWidth - minWidth) / 2);
$body.css('width', width);
if (body.scrollHeight > minScrollHeight) {
minWidth = width;
} else {
maxWidth = width;
}
}
$frame.css('width', maxWidth);
// use maximum height to avoid vertical scrollbar (if possible)
var maxHeight = $contentDiv.dialog('option', 'maxHeight')
$frame.css('height', maxHeight);
$body.css('width', '');
// correct for vertical scrollbar (if necessary)
while (body.clientWidth < maxWidth) {
$frame.css('width', maxWidth + (maxWidth - body.clientWidth));
}
var minScrollWidth = body.scrollWidth;
var minHeight = Math.min(minScrollHeight, maxHeight);
// descrease frame height until scrollWidth decreases (wrapping)
while (Math.abs(maxHeight - minHeight) > 10) {
var height = minHeight + Math.ceil((maxHeight - minHeight) / 2);
$body.css('height', height);
if (body.scrollWidth < minScrollWidth) {
minHeight = height;
} else {
maxHeight = height;
}
}
$frame.css('height', maxHeight);
$body.css('height', '');
// reset widths to 'auto' where possible
$contentDiv.css('width', 'auto');
$contentDiv.css('height', 'auto');
$contentDiv.dialog('option', 'width', 'auto');
// re-position the dialog
$contentDiv.dialog('option', 'position', position);
// hide dialog
$contentDiv.dialog('close');
// restore show effect
$contentDiv.dialog('option', 'show', savedShow);
// open using show effect
$contentDiv.dialog('open');
// remove show effect for consecutive requests
$contentDiv.dialog('option', 'show', null);
return;
}
//An error is raised if the IFrame domain != its container's domain
catch (e) {
window.status = 'Error: ' + e.number + '; ' + e.description;
alert('Error: ' + e.number + '; ' + e.description);
}
};
@SchizoDuckie의 답변은 매우 우아하고 가볍지만, Webkit의 ScrollHeight 구현(여기를 참조)이 없기 때문에 Webkit 기반의 브라우저(Safari, Chrome, 다양한 모바일 플랫폼)에서는 동작하지 않습니다.
웹킷에서 Gecko 및 Trident 브라우저와 함께 작동하기 위해서는 교체만 하면 됩니다.
<body onload='parent.resizeIframe(document.body.scrollHeight)'>
와 함께
<body onload='parent.resizeIframe(document.body.offsetHeight)'>
모든 것이 같은 도메인에 있는 한, 이것은 꽤 잘 동작합니다.
난 3일 중 대부분을 이것과 씨름하며 보냈다.고정 헤더와 고정 바닥글을 유지하면서 다른 응용 프로그램을 로드하는 응용 프로그램을 만들고 있습니다.제가 생각해낸 것은 다음과 같습니다.(저도 EasyXDM을 성공적으로 사용했지만 나중에 이 솔루션을 사용하기 위해 EasyXDM을 사용하였습니다.)
이 코드를 실행해 주세요.<iframe>DOM에 존재합니다.iframe(부모)을 끌어오는 페이지에 삽입합니다.
// get the iframe
var theFrame = $("#myIframe");
// set its height to the height of the window minus the combined height of fixed header and footer
theFrame.height(Number($(window).height()) - 80);
function resizeIframe() {
theFrame.height(Number($(window).height()) - 80);
}
// setup a resize method to fire off resizeIframe.
// use timeout to filter out unnecessary firing.
var TO = false;
$(window).resize(function() {
if (TO !== false) clearTimeout(TO);
TO = setTimeout(resizeIframe, 500); //500 is time in miliseconds
});
이 트릭은 외부 스크립트로부터 필요한 iframe 이벤트를 모두 취득하는 것입니다.예를 들어 document.createElement를 사용하여 iFrame을 작성하는 스크립트가 있습니다.이 스크립트에서는 iFrame의 내용에 일시적으로 액세스 할 수 있습니다.
var dFrame = document.createElement("iframe");
dFrame.src = "http://www.example.com";
// Acquire onload and resize the iframe
dFrame.onload = function()
{
// Setting the content window's resize function tells us when we've changed the height of the internal document
// It also only needs to do what onload does, so just have it call onload
dFrame.contentWindow.onresize = function() { dFrame.onload() };
dFrame.style.height = dFrame.contentWindow.document.body.scrollHeight + "px";
}
window.onresize = function() {
dFrame.onload();
}
이는 dFrame이 이러한 기능에서 범위 내에 유지되기 때문에 프레임 범위 내에서 외부 iFrame 요소에 액세스할 수 있기 때문에 실제 문서 높이를 확인하고 필요에 따라 확장할 수 있습니다.이 예는 파이어폭스에서는 동작하지만 다른 곳에서는 동작하지 않습니다.회피책을 제시해 드릴 수는 있지만, 그 외의 것은 해결할 수 있습니다.
이거 입어봐, 네가 원할 때 갈아입을 수 있어.이 예에서는 jQuery를 사용합니다.
$('#iframe').live('mousemove', function (event) {
var theFrame = $(this, parent.document.body);
this.height($(document.body).height() - 350);
});
사용해보십시오.scrolling=noiframe 태그의 Atribute.또한 Mozilla는overflow-x그리고.overflow-y조사할 수 있는 CSS 속성.
높이에 관해서도 한 번 해보실 수 있습니다.height=100%iframe 태그에 있습니다.
언급URL : https://stackoverflow.com/questions/525992/resize-iframe-height-according-to-content-height-in-it
'programing' 카테고리의 다른 글
| ng-show/ng-hide에서 Angular 애니메이션 발생 방지 (0) | 2023.03.06 |
|---|---|
| React-Redux: 액션은 일반 개체여야 합니다.비동기 작업에 사용자 지정 미들웨어 사용 (0) | 2023.03.06 |
| 여러 줄의 환경 변수 형식을 적절하게 도커 구성하려면 어떻게 해야 합니까? (0) | 2023.03.06 |
| 새 URL을 푸시할 때 React 구성 요소 렌더가 여러 번 호출됩니다. (0) | 2023.03.06 |
| Python에서 YAML 파일을 JSON 개체로 변환 (0) | 2023.03.06 |