logo标签列表

jQuery还是不用？/ 跨浏览器兼容的iframe自适应大小（IE，Chrome，Safari，Firefox）

javascriptjqueryiframecross-browser
4
这是我的问题。我一直在努力寻找一个跨浏览器的iframe调整大小代码来使用，但我就是找不到。我发现所有的代码都在一个浏览器上有问题而在另一个浏览器上没有问题。这就是我的做法。我在jquery tools覆盖层中加载一个iframe到页面中。这个iframe将加载同一域上的页面内容（所以不需要担心跨域问题）。当用户在表单上点击一个动作时，iframe再次需要调整大小（当iframe增大时它是可以工作的，但当iframe减小时它就不行了）。
我有一个js文件被包含在iframe中，其中包含这个函数。
$(window).load(function(){
    parent.adjust_iframe();
});

那个函数会像这样调用父页面的函数：
function adjust_iframe() {

    //i have tried both body and html and both dont work in IE
    var h = $("#overlayFrame").contents().find("body").height();
    if(h==0)
    h="500";
    else
    h=h+3;

    $("#overlayFrame").css({'height': h});
    window.scrollTo(0,0);

}

以上代码在Chrome和Firefox中运行良好，但在IE中无法正常工作。

有什么帮助吗？我真的需要一个跨浏览器兼容的轻量级解决方案，不涉及某些不受支持的重型jQuery插件。

谢谢！

3个回答
0

尝试一下

$(window).load(function(){
    var bodyHeight = $('body').height();
    parent.adjust_iframe( bodyHeight );
});

并且

function adjust_iframe(newHeight) {

    //i have tried both body and html and both dont work in IE
    if(newHeight == 0) {
       newHeight = 500;
    } else {
       newHeight += 3;
    }

    $("#overlayFrame").css({'height': newHeight});
    window.scrollTo(0,0);
}

因为问题很可能是页面无法访问 iframe 的内容。

0

我有两个建议：

当你设置CSS高度时，明确告诉它像素。

$("#overlayFrame").css({'height': h + 'px'});

当您的 iframe 代码调用 parent.adjust_iframe 时，请发送当前的宽度/高度。
parent.adjust_iframe($('body').height());

额外建议：进行一些调查，告诉我们IE的版本以及为什么它不起作用。在其中加入一些警报，并找出高度是否被推导出来等信息。

我做了警报，在IE8中，我收到一个警报，说高度为150。这是iframe在调整之前的原始大小。 - Scoota P
-1

我搜索了我的存档文件，并找到了一个可以设置 iframe 窗口新大小的脚本。它在 IE6、FF 上都能正常工作...

/**
 * Parent
 */
<iframe id="myframe" name="myframe" ...>

<script type="text/javascript">
var iframeids=["myframe"];
if (window.addEventListener) {
  window.addEventListener("load", resizeCaller, false);
}else if (window.attachEvent) {
  window.attachEvent("onload", resizeCaller);
} else {
  window.onload=resizeCaller;
}
var iframehide="yes";
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1];
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 20 : 0;
function resizeCaller() {
  var dyniframe=new Array();
  for (i=0; i<iframeids.length; i++){
    if (document.getElementById)
      resizeIframe(iframeids[i]);
    if ((document.all || document.getElementById) && iframehide=="no"){
      var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]);
      tempobj.style.display="";
    }
  }
};

function resizeIframe(frameid){
  var currentfr=document.getElementById(frameid);
  if (currentfr && !window.opera){
    currentfr.style.display="";
    if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight)
      currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
    else if (currentfr.Document && currentfr.Document.body.scrollHeight)
      currentfr.height = currentfr.Document.body.scrollHeight;
    if (currentfr.addEventListener)
      currentfr.addEventListener("load", readjustIframe, false);
    else if (currentfr.attachEvent){
      currentfr.detachEvent("onload", readjustIframe);
      currentfr.attachEvent("onload", readjustIframe);
    }
  }
};
function readjustIframe(loadevt) {
  var crossevt=(window.event)? event : loadevt;
  var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement;
  if (iframeroot)resizeIframe(iframeroot.id);
};

function loadintoIframe(iframeid, url){
  if (document.getElementById)document.getElementById(iframeid).src=url;
};
</script>

/**
 * child iFrame html
 */
<body onResize="resizeIE()">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接