Dynamic 调整动态iframe的大小（Chrome有问题）

因此，我一直在查看所有其他堆栈溢出帖子，并在google上查找如何在iFrame上自动设置高度/宽度。我已经经历了大约15-20次，到目前为止没有一次对我有效。让我试着解释一下我的情况：

我正在页面上动态设置iFrame的主体。我需要iFrame自动设置相应的高度和宽度，以便所有文本都可见

我需要在IE（7&8）、Firefox3和Chrome中使用它

以下是引发该问题的其他问题：

我正在用ASP.Net编写母版页（因此body元素是不可能的）

我需要在服务器的每次回发上设置iFrame的文本

我需要iFrame在浏览器调整大小时调整大小

我只能访问javascript，其他什么都没有

我在同一个域上写所有东西，所以这不是问题

我觉得我现在拥有的只是一台钻机，随时都会倒塌。它在IE中显示正确，但在FireFox中有巨大的底部空白，在Chrome中根本不显示（doc总是空的）

在这里（我尽量详细，如果需要更多解释，请告诉我）：

函数writeFrame（）
{
//获取我需要放在iFrame中的文本（这是从服务器设置的）
var iFrameContent=document.getElementById（“”）.value；
var iFrameContainer=document.getElementById（“divIFrameContainer”）；
//创建新的iFrame对象
var iFrame=document.createElement（“iFrame”）；
setAttribute（“id”、“myIFrame”）；
setAttribute（“滚动”、“否”）；
iFrame.setAttribute（“frameborder”，“0”）；
//将新的iFrame对象添加到容器div
iFrameContainer.appendChild（iFrame）；
//找到iFrame的正确内部文档
var doc=iFrame.document；
if（doc==null&&iFrame.contentDocument）
doc=iFrame.contentDocument；
//
//将信息写入iFrame
如果（doc！=null）
{
doc.open（）；
书面文件（iFrameContent）；
doc.close（）；
}
//设置适当的高度
var height=doc.body.scrollHeight+iFrameContainer.offsetTop；
setAttribute（“样式”，“宽度：100%；高度：“+height+”px；”）；
}

好吧，在把这个搞乱了几个小时后，我终于让它开始工作了

很明显，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>

函数OnIFrameLoad（）
{
_frame=document.createElement（“iframe”）；
_setAttribute（“滚动”、“自动”）；
_frame.setAttribute（“frameborder”，“0”）；
_setAttribute（“样式”，“宽度：100%；”）；
_frame.style.width=“100%”；
document.getElementById（“IFrameContainer”）.appendChild（_frame）；
_innerDoc=\u frame.document；
if（_frame.contentDocument）
_innerDoc=\u frame.contentDocument；//对于NS6
if（_frame.contentWindow）
_innerDoc=\u frame.contentWindow.document；//对于IE5.5和IE6
//
window.parent.SetIFrameContent（）；
//我们在10毫秒后调用ResizeIFrame函数，因为
//Chrome显示iframe，需要几分钟才能获得正确的高度。
setTimeout（“window.parent.ResizeIFrame（）”，10）；
}
函数SetIFrameContent（）
{
var content=document.getElementById（“”）值；
_innerDoc.open（）；
_innerDoc.writeln（内容）；
_innerDoc.close（）；
}
函数大小调整框架（框架ID）
{
var objectToResize=（\u frame.style）？\u frame.style:\u frame；
var innerDocBody=\u innerDoc.body；
var newHeight=_innerDoc.body.clientHeight；
如果（_innerDoc.body.scrollHeight>newHeight）
newHeight=\u innerDoc.body.scrollHeight；
//
objectToResize.height=newHeight+40+“px”；
}

ASP方：

<textarea id="hiddenIFrameContent" runat="server" style="display:none;" />

<div id="IFrameContainer"></div>

---

这和其他人一样让我心碎，我想出了一个与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>

函数resizeIframeToFitContent（iframe）{
//此函数用于调整IFrame对象的大小
//以适应其内容。
//IFrame标记必须具有唯一的ID属性。
iframe.height=document.frames[iframe.id].document.body.scrollHeight+“px”}

如果是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>

函数resizeIframeToFitContent（iframe）{
//由于某些原因，我必须将帧高度重置为零，否则它将保留上一帧的高度
//单击框架内部。您可以将其设置为0或选择一个合适的高度，以便仅当内容大于xx像素时，它才会调整大小
var高度=780；
var theFrame=window.frames[iframe.id]；
//检查iframe.id以确保返回正确的id。
theFrame.frameElement.height=高度；
//现在让我们获取内容的高度并重置框架的高度。
高度=parseInt（帧d
<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>

<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 id="myiframe" name="myiframe"
        src="<your url>"
        width=800
        style="background-color: #FAF9F8;"
        onload="resizeIframeToFitContent(this)" scrolling="no" frameborder="0">