jquery or not / Cross Browser Compatible iframe resize (IE, Chrome, Safari, Firefox)
Posted
技术标签:
【中文标题】jquery or not / Cross Browser Compatible iframe resize (IE, Chrome, Safari, Firefox)【英文标题】： 【发布时间】：2012-04-10 07:43:04 【问题描述】：这是我的问题。我一直在努力寻找要使用的跨浏览器 iframe 调整大小代码，但我找不到。我所看到的所有浏览器都存在问题。这就是我正在做的事情。我正在将 iframe 加载到 jquery 工具覆盖中的页面中。这个 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 插件。
谢谢！
【问题讨论】：
【参考方案1】：试试
$(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 内容..
【讨论】：
【参考方案2】：我有 2 条建议：
当你设置 CSS 高度时，明确告诉它像素。
$("#overlayFrame").css('height': h + 'px');
当您的 iframe 代码调用 parent.adjust_iframe 时，发送当前宽度/高度。
parent.adjust_iframe($('body').height());
奖励建议：做一点调查，告诉我们什么版本的 IE 以及为什么它不工作。在那里放一些警报，看看高度是否得到推导等。
【讨论】：
我做了警报，在 IE8 中我收到警报说高度为 150。这是 iframe 在调整之前的原始大小【参考方案3】：我搜索了我的存档文件并找到了设置新 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()">
【讨论】：
以上是关于jquery or not / Cross Browser Compatible iframe resize (IE, Chrome, Safari, Firefox)的主要内容，如果未能解决你的问题，请参考以下文章
将 Vuetify 依赖项添加到我的项目会导致 SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-or
用jQuery来判断浏览器的类型及javascript获取用户ip地址
Bower : ENOGIT git is not installed or not in the PATH