티스토리 뷰
Welllll, 이것으로 몇 시간을 엉망으로 만든 후 마침내 작동하게되었습니다.
분명히 말씀 드리지만 Chrome에는 타이밍 문제가 있습니다. 페이지로드시 iFrame의 콘텐츠를 동적으로 설정하는 경우 높이를 올바르게 설정하려면 몇 밀리 초 정도 기다려야합니다. 그래서 내가 setTimeout 함수를 사용했고 모든 브라우저에서 매번 작동했습니다. 그렇지 않은 경우 Chrome이 이전보다 2 배 더 커질 수 있습니다.
IE, FF 및 Chrome에서 작동하도록 만드는 데 사용한 코드는 다음과 같습니다.
<script type="text/javascript">
function OnIFrameLoad()
{
_frame = document.createElement("iframe");
_frame.setAttribute("scrolling", "auto");
_frame.setAttribute("frameborder", "0");
_frame.setAttribute("style", "width: 100%;");
_frame.style.width = "100%";
document.getElementById("IFrameContainer").appendChild(_frame);
_innerDoc = _frame.document;
if (_frame.contentDocument)
_innerDoc = _frame.contentDocument; // For NS6
if (_frame.contentWindow)
_innerDoc = _frame.contentWindow.document; // For IE5.5 and IE6
//
window.parent.SetIFrameContent();
// We're calling the ResizeIFrame function after 10 milliseconds because when
// Chrome shows the iframe, it takes a few moments to get the correct height.
setTimeout("window.parent.ResizeIFrame()", 10);
}
function SetIFrameContent()
{
var content = document.getElementById("<%= hiddenIFrameContent.ClientID %>").value;
_innerDoc.open();
_innerDoc.writeln(content);
_innerDoc.close();
}
function ResizeIFrame(frameId)
{
var objectToResize = (_frame.style) ? _frame.style : _frame;
var innerDocBody = _innerDoc.body;
var newHeight = _innerDoc.body.clientHeight;
if (_innerDoc.body.scrollHeight > newHeight)
newHeight = _innerDoc.body.scrollHeight;
//
objectToResize.height = newHeight + 40 + "px";
}
</script>
ASP 측 :
<textarea id="hiddenIFrameContent" runat="server" style="display:none;" />
<div id="IFrameContainer"></div>
이것은 다른 사람들과 마찬가지로 나를 죽이고 있었고 IE8, Chrome, Safari 및 FF와 호환되는 것으로 보이는 예를 생각해 냈습니다. IE7 또는 IE6에서 테스트하지 않았습니다.
나는 다른 사이트에서 조각을 얻었 기 때문에 크레딧의 100 %를받을 수 없습니다. 내가 만난 대부분의 솔루션은 문제를 지나치게 복잡하게 만들었습니다.
저는 콜드 퓨전을 사용하므로 모국어로 브라우저를 확인해야합니다.
<SCRIPT LANGUAGE="JavaScript">
function resizeIframeToFitContent(iframe) {
// This function resizes an IFrame object
// to fit its content.
// The IFrame tag must have a unique ID attribute.
iframe.height = document.frames[iframe.id].document.body.scrollHeight + "px";}
</SCRIPT>
FF, Safari 또는 Mozilla (모든 버전) 인 경우이 스크립트를 사용할 수 있습니다.
<SCRIPT LANGUAGE="JavaScript">
function resizeIframeToFitContent(iframe){
//for some reason I have to reset the frame height to zero otherwise it will retain the height from the last
//click inside of the frame. You can set this to 0 or pick a good height so it only resizes when the content is larger than xx pixels
var height = 780;
var theFrame = window.frames[iframe.id];
//check your iframe.id to make sure you are getting back the correct id.
theFrame.frameElement.height = height;
//now lets get the height of the content and reset the height of the frame.
height = parseInt(theFrame.document.body.scrollHeight);
//now I have see this numerous times and many programmers try to set the frameElements.style.height attribute
//that does not work in Safari, Chrome or FF so drop the style and you are good to go.
theFrame.frameElement.height = height;
}
</SCRIPT>
IE8은 우리 프로그래머에게 조금 더 좋습니다.
<SCRIPT LANGUAGE="JavaScript">
function resizeIframeToFitContent(iframe) {
// This function resizes an IFrame object
// to fit its content.
// The IFrame tag must have a unique ID attribute.
iframe.height = document.frames[iframe.id].document.body.scrollHeight;}
</SCRIPT>
다음은 배경색을 제거하고 자신의 너비와 URL을 설정할 수있는 IFRAME 스크립트입니다.
<IFRAME id="myiframe" name="myiframe"
src="<your url>"
width=800
style="background-color: #FAF9F8;"
onload="resizeIframeToFitContent(this)" scrolling="no" frameborder="0">
그것은 거의 그것을 다룹니다.
출처
https://stackoverflow.com/questions/1904934