npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

arale-iframe-shim

v1.1.0

Published

工具类,在 IE6 下生成 iframe 遮挡 select 和 object。此组件对开发者透明,开发者无需再判断浏览器版本。

Downloads

20

Readme

iframe-shim


spm package Build Status

工具类,在 IE6 下生成 iframe 遮挡 select。此组件对开发者透明,开发者无需再判断浏览器版本。


使用说明

Instantialize new Shim(target)

组件会根据传入的目标元素生成一个实例,实例化后会生成一个 iframe 插入到目标元素前,这样 iframe 的层级永远低于目标元素。

开发者需要手动调用 sync 方法来同步 iframe 和目标元素。

如果是 ie6 以外的浏览器只会返回一个空实例,什么都不执行。

参数 target 是需要被遮挡的目标元素,可以传 DOM ElementSelector

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。

sync shim.sync()

实例方法,此方法会根据目标元素的变化而改变 iframe 的样式。

有以下几种情况 iframe 会改变:

  1. 目标元素的宽高及 border 改变后 iframe 的宽高也会相应改变。
  2. 目标元素或父级元素 display: none,iframe 会隐藏。
  3. 目标元素宽和高等于 0 (包括 border ),iframe 会隐藏。
  4. 目标元素移动后 iframe 定位会改变。

sync 可进行链式操作,上面的例子可直接一行完成:

var shim = new Shim('#target').sync();

注意:

  • 如果目标元素有变化,需要同步 shim 时,需要在目标元素变化之后,再调用 sync 方法:
target.show();
shim.sync(); // 在 target 显示之后,再同步 shim 的显示。

destroy shim.destroy()

实例方法,销毁 iframe 等。

Bitdeli Badge