谷歌浏览器4

作者: 关于计算机  发布:2019-09-20

小品种龙里中学多媒体教室管理系列中后台管理选拔了iframe.由于要动态载入内容,所以需求iframe自适应内容页的中度.用Google查寻到无数答案,个中成功的是这段代码

复制代码 代码如下:

<script type="text/javascript">
function SetCwinHeight() {
var iframeid = document.getElementById("maincontent1"); //iframe id
if (document.getElementById) {
if (iframeid && !window.opera) {
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
iframeid.height = iframeid.contentDocument.body.offsetHeight;
} else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
</script>

iframe代码:

复制代码 代码如下:

<iframe style="z-index: 1; visibility: inherit; width: 100%;" name="maincontent1"
onload="Javascript:SetCwinHeight()" height="1" id="maincontent1" src="<%=ResolveClientUrl("~/message")%>"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>

在IE8下成功达成自适应中度,但在谷歌(Google)浏览器中度只会大增,不会减价扣,也正是说,长高后就缩不回来.
那么各样浏览器的变现不太雷同,单取哪个值都不对。但可以找到了一条规律,那就是取四个值得最大值可以相配各浏览器。所以我们的主页面代码将要改形成那样了:

复制代码 代码如下:

function reinitIframe(){var iframe = document.getElementById("frame_content");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);

这规范,基本解决了包容性难题。顺便说下,不光绝对定位的层会影响到值,float也会导致四个值的差异。
一旦你演示德姆o后,会发觉,除了IE,别的浏览器中,当层打开后再遮蔽,取到的中度值还是保持在打开的惊人303,而非遮掩回去的真正值184,正是说长高了未来缩不回来了。那么些现象在差异被含有页面之间做切换也会发生,当从高的页面切换来矮页面包车型大巴时候,取到的中度依然相当高的值。
可以总结为,当iframe窗体中度超越文书档案实际高度的时候,中度取的是窗体中度,而当窗体中度低于实际文档高度时,取的是文书档案实际高度。因而,要想艺术在一起中度以前把中度设置到三个比实际文书档案低的值。所以,在iframe的丰盛onload=”this.height=100″,让页面加载的时候先缩到丰硕矮,然后再同台到均等的可观。
其一值,在实质上采纳中决定,丰富矮但又无法太矮,不然在FF等浏览器里会有很显著的闪耀。DOM操作的时候主页面不可能监听到,只可以DOM操作完了以后把中度变小了。
在自家的叁个实际上项目中,在资金和低收入之间权衡,作者并未做这一个专门的职业,因为每一个DOM函数中都要插入这么些代码,代价太高,其实层缩回去不缩掉亦非那么致命。满含德姆o里,也不曾去做这一个职业。假设读者有越来越好的方法,请告知笔者。
/**********************************原著引用甘休***************************** /
请留意驼灰的那句.读到此地,作者想在退换iframe.height在此之前可不可以先给 iframe.height赋三个够小的始发值,如iframe.height="10px",然后再转移如iframe.height.这样就消除了初稿米色部分的标题。
末尾代码如下:

复制代码 代码如下:

<script type="text/javascript">
function SetCwinHeight() {
var iframeid = document.getElementById("maincontent1"); //iframe id
iframeid.height = "10px";//先给多个够小的初值,然后再长高.
if (document.getElementById) {
if (iframeid && !window.opera) {
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
iframeid.height = iframeid.contentDocument.body.offsetHeight;
} else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
</script>

iframe代码还是不改变:

复制代码 代码如下:

<iframe style="z-index: 1; visibility: inherit; width: 100%;" name="maincontent1"
onload="Javascript:SetCwinHeight()" height="1" id="maincontent1" src="<%=ResolveClientUrl("~/message")%>"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>

经测量试验,iframe在ie8 、谷歌(Google)浏览器4.0和 firefox3.5.3均成功自适应中度.

您也许感兴趣的稿子:

  • iframe自适应高度的有余艺术措施小结
  • Iframe自适应中度包容ie,firefox多浏览器
  • Iframe 自适应中度并实时监督检查中度变化的js代码
  • javascript 装载iframe子页面,自适应中度
  • Iframe自适应中度相对好使的代码 包容IE,遨游,火狐
  • iframe跨域通讯封装详解
  • 经过伪公约化解父页面与iframe页面通讯的标题
  • 嵌入式iframe子页面与父页面js通讯的措施
  • iframe子页面与父页面在同域或不一样域下的js通讯
  • 使用iframe完成ajax跨域通讯的兑现原理(图解)
  • JS化解iframe之间通讯和自适应中度的主题材料

本文由贝博体育app发布于关于计算机,转载请注明出处:谷歌浏览器4

关键词: