工具类,在 IE6 下生成 iframe 遮挡 select。此组件对开发者透明,开发者无需再判断浏览器版本。
☂
组件会根据传入的目标元素生成一个实例,实例化后会生成一个 iframe 插入到目标元素前,这样 iframe 的层级永远低于目标元素。
开发者需要手动调用 sync
方法来同步 iframe 和目标元素。
如果是 ie6 以外的浏览器只会返回一个空实例,什么都不执行。
参数 target
是需要被遮挡的目标元素,可以传 DOM Element
或 Selector
。
define(function(require, exports, module) {
var Shim = require('iframe-shim');
var shim = new Shim('#target');
shim.sync();
});
注意:
- iframe 的宽高是根据目标元素计算的,目标元素的宽高是包括 border的,例如目标元素的 width 为 100px,border 为 1px,iframe 的 width 为 102px。
实例方法,此方法会根据目标元素的变化而改变 iframe 的样式。
有以下几种情况 iframe 会改变:
- 目标元素的宽高及 border 改变后 iframe 的宽高也会相应改变。
- 目标元素或父级元素
display: none
,iframe 会隐藏。 - 目标元素宽和高等于 0 (包括 border ),iframe 会隐藏。
- 目标元素移动后 iframe 定位会改变。
sync 可进行链式操作,上面的例子可直接一行完成:
var shim = new Shim('#target').sync();
注意:
- 如果目标元素有变化,需要同步 shim 时,需要在目标元素变化之后,再调用
sync
方法:
target.show();
shim.sync(); // 在 target 显示之后,再同步 shim 的显示。
实例方法,销毁 iframe 等。