所以我一直在寻找所有其他Stack Overflow帖子以及谷歌周围如何在iFrame上自动设置高度/宽度。到目前为止,我已经完成了大约15-20个,但没有一个对我有效。让我试着解释一下我的情况:
我正在我的页面上动态设置iFrame的正文。我需要iFrame相应地自动设置其高度和宽度,以便所有文本都可见。
我需要在IE(7& 8),FireFox 3和Chrome中使用它。
以下是解决问题的其他问题:
我在同一个域上写所有内容,所以这不是问题。
我觉得我现在拥有的只是一个装备,随时都会崩溃。它在IE中显示正确但在FireFox中有一个巨大的底部边距,并且在Chrome中根本不显示(doc始终为null)。
这是(我试着尽可能详细,如果我需要解释更多,请告诉我):
<script type="text/javascript">
function WriteIFrame()
{
// get the text i need to put in the iFrame (this is set from the server)
var iFrameContent = document.getElementById("<%= hiddenIFrameContent.ClientID %>").value;
var iFrameContainer = document.getElementById("divIFrameContainer");
// create the new iFrame object
var iFrame = document.createElement("iframe");
iFrame.setAttribute("id", "myIFrame");
iFrame.setAttribute("scrolling", "no");
iFrame.setAttribute("frameborder", "0");
// add the new iFrame object to the container div
iFrameContainer.appendChild(iFrame);
// find the correct inner document of the iFrame
var doc = iFrame.document;
if (doc == null && iFrame.contentDocument)
doc = iFrame.contentDocument;
//
// write the information into the iFrame
if (doc != null)
{
doc.open();
doc.writeln(iFrameContent);
doc.close();
}
// set the proper height
var height = doc.body.scrollHeight + iFrameContainer.offsetTop;
iFrame.setAttribute("style", "width: 100%; height: " + height + "px;");
}
</script>
<div id="divIFrameContainer" oninit="WriteIFrame();">
</div>
<iframe id="HelperIFrame" style="display: none;" onload="WriteIFrame();"></iframe>
<textarea id="hiddenIFrameContent" runat="server" style="display: none;" />
答案 0 :(得分:6)
因此我明确表示,Chrome存在时间问题。如果在页面加载时动态设置iFrame的内容,则必须等待几毫秒才能正确设置高度。这就是为什么我使用setTimeout函数并且它每次都适用于所有浏览器的原因,如果你没有,有时Chrome会有两倍的大小。
以下是我在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>
答案 1 :(得分:1)
这就像其他人一样杀了我,我想出了一个似乎与IE8,Chrome,Safari和FF兼容的例子。我还没有在IE7或IE6中测试它。
我无法获得100%的功劳,因为我从不同的网站获得了点点滴滴。我遇到的大多数解决方案使问题过于复杂。
我使用coldfusion,因此您需要使用自己的语言检查浏览器。
<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>
以下是IFRAME脚本,您可以删除背景颜色并设置自己的宽度和网址。
<IFRAME id="myiframe" name="myiframe"
src="<your url>"
width=800
style="background-color: #FAF9F8;"
onload="resizeIframeToFitContent(this)" scrolling="no" frameborder="0">
这几乎涵盖了它。