网页页面设计方案技能:iframe自融入高宽比的难题

2021-01-20 21:50 jianzhan
将会有人还没触碰到这个难题过,先表明1下,甚么是自融入高宽比吧。所谓iframe自融入高宽比,便是,根据页面美观大方和互动的考虑到,掩藏了iframe的border和scrollbar,令人看不出它是个iframe。假如iframe自始至终启用同1个固定不动高宽比的网页页面,大家立即写死iframe高宽比便可以了。而假如iframe要切换网页页面,或被包括网页页面要做DOM动态性实际操作,这时候候,就必须程序流程去同歩iframe高宽比和被包括页的具体高宽比了。
顺带说下,iframe在不得已的情况下才去用,它会给前端开发开发设计带来太多的不便。
传统式做法大概有两个:
方式1,在每一个被包括页在自身內容载入结束以后,实行JS获得本网页页面的高宽比,随后去同歩父网页页面的iframe高宽比。
方式2,在首页面iframe的onload恶性事件中实行JS,去获得被包括页的高宽比內容,随后去同歩高宽比。
在编码维护保养角度考虑到,方式2是优于方式1的,由于方式1,每一个被包括页都要去引进1段同样的编码来做这个事儿,建立了许多副本。
两个方式都只解决了静的物品,便是只在內容载入的情况下实行,假如JS去实际操作DOM引发的高宽比转变,都不太便捷。
假如在主对话框做1个Interval,不断的来获得被包括页的高宽比,随后做同歩,是否即便捷,又处理了JS实际操作DOM的难题了呢?回答是毫无疑问的。
Demo网页页面:首页面 iframe_a.html ,被包括网页页面 iframe_b.htm 和 iframe_c.html
首页面编码示例:

拷贝编码
编码以下:

<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"></iframe><script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("frame_content");
try{
iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
< /script>

1直实行,高效率会不容易有难题?
我做了检测,另外开5个对话框(IE6、IE7、FF、Opera、Safari)实行这个编码,不容易对CPU有甚么危害,乃至调剂到2ms,也没危害(基础保持在0%占有率)。
下面谈谈各访问器的适配性难题,怎样获得到正确的高宽比,关键是对body.scrollHeight和documentElement.scrollHeight两个值得较为。留意本文用的是这个doctype,不一样的doctype应当不容易危害結果,可是倘若你的网页页面沒有声明doctype,那還是先去加1个吧。

拷贝编码
编码以下:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<a href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a>">在首页面追加下列检测编码,以輸出这两个值,编码示例:
<div><button>Check Height</button></div><script type="text/javascript">
function checkHeight() {
var iframe = document.getElementById("frame_content");
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
alert("bHeight:" + bHeight + ", dHeight:" + dHeight);
}
< /script>被载入网页页面,能够切换1个肯定精准定位的层,来使网页页面高宽比动态性更改。假如层进行,则会撑高网页页面高宽比。编码示例:
<div><button>Toggle Overlay</button>
< /div>
< div style="height:160px;position:relative">
< div id="overlay" style="position:absolute;width:280px;height:280px;display:none;"></div>
< /div>
< script type="text/javascript">
function toggleOverlay() {
var overlay = document.getElementById('overlay');
overlay.style.display = (overlay.style.display == 'none') ? 'block' : 'none';
}
< /script>

下面列出以上编码在各访问器的检测值:

拷贝编码
编码以下:

(bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, 鲜红色 = 不正确值, 翠绿色 = 正确值)
/ 层掩藏时 层进行时
bHeight dHeight bHeight dHeight
IE6 184 184 184 303
IE7 184 184 184 303
FF 184 184 184 303
Opera 181 181 300 300
Safari 184 184 303 184

姑且疏忽Opera比他人少3像素的难题…能够看出,假如沒有肯定精准定位的物品,两个值是相同的,取哪一个都没有谓。
可是假如有,那末各个访问器的主要表现不太同样,单取哪一个值都不对。但能够寻找了1条规律性,那便是取两个值得最大值能够适配各访问器。因此大家的首页面编码就要更新改造成这样了:

拷贝编码
编码以下:

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也会致使两个值的差别。
假如你演试Demo后,会发现,除IE,别的访问器中,当层进行后再掩藏,取到的高宽比值還是保持在进行的高宽比303,而非掩藏回去的真实值184,便是说长高了以后缩不回去了。这个状况在不一样被包括网页页面之间做切换也会产生,当从高的网页页面切换到矮网页页面的情况下,取到的高宽比還是那个高的值。
能够梳理为,当iframe窗体高宽比高于文本文档具体高宽比的情况下,高宽比取的是窗体高宽比,而当窗体高宽比低于具体文本文档高宽比时,取的是文本文档具体高宽比。因而,要想方法在同歩高宽比以前把高宽比设定到1个比具体文本文档低的值。因此,在iframe的加上 onload=”this.height=100″,让网页页面载入的情况下先缩到充足矮,随后再同歩到1样的高宽比。
这个值,在具体运用中决策,充足矮但又不可以很矮,不然在FF等访问器里会有很显著的闪动。DOM实际操作的情况下首页面没法监视到,只能DOM实际操作完了以后把高宽比缩小了。
在我的1个具体新项目中,在成本费和盈利之间衡量,我并沒有做这个事儿,由于每一个DOM涵数中都要插进这个编码,成本太高,实际上层缩回去不缩掉也并不是那末致命。包含Demo里,也沒有去做这个事儿。假如读者有更好的方式,请告知我。
这是最后的首页面的编码:
[/code]
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"></iframe>
< script type="text/javascript">
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);
< /script>
[/code]