`
agile_boy
  • 浏览: 558352 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Iframe Shim解决applet挡住ExtJS工具栏菜单问题

阅读更多
  终于解决了昨天碰到了菜单被applet挡住的问题,所采用的技术是Iframe Shim,参考文章是Using IFrame Shim to (partly) cover a Java applet
  以下算是不断碰壁的简单总结吧,希望能对碰到类似问题的同仁有所帮助。
  先说说基本Iframe Shim原理吧,我觉得是通过JavaScript动态创建iframe元素,同时设置相关的属性(比如z-index,postion等),来满足其浮动于applet或者其他插件之上。
  我是用Ext做菜单的,所以采用的技术和方法都是和Ext相关,不过基本原理应该适合其他JavaScript框架的。
  为此我用创建了id=inventory的Toolbar.Button组件,在其上又增加了几个Menu,现在增加代码如下:

javascript 代码
  1.     Ext.onReady(function(){  
  2.         var tb = Ext.getCmp('inventory');  
  3.         tb.on('menushow',function(toolbar,menu) {  
  4.             var menuEl = menu.getEl();  
  5.             createShim({  
  6.                 top:menuEl.getY(),  
  7.                 left:menuEl.getX(),  
  8.                 width:menuEl.getWidth(),  
  9.                 height:menuEl.getHeight()  
  10.             });  
  11.     });  
  12.         tb.on('menuhide',function(toolbar,menu) {  
  13.             var shimmer = document.getElementById('shimmer')  
  14.             document.body.removeChild(shimmer);  
  15.     });  
  16. });  
  17.     function createShim(coordinate) {  
  18.         var shimmer = document.createElement('iframe');  
  19.         shimmer.id='shimmer';  
  20.         shimmer.style.position='absolute';  
  21.         shimmer.style.top=coordinate.top;  
  22.         shimmer.style.left=coordinate.left;  
  23.         shimmer.style.width=coordinate.width;  
  24.         shimmer.style.height=coordinate.height;  
  25.         shimmer.style.zIndex='999';  
  26.         shimmer.setAttribute('frameborder','0');  
  27.         shimmer.setAttribute('src','javascript:false;');  
  28.         document.body.appendChild(shimmer);  
  29. }   


  首先在menushow事件中,动态创建shimmer,设置其position,left,top,width,height,zIndex等属性,要确保菜单的zIndex大于iframe的,还要确保iframe里边没有内容,即src应该为空。
  其次在menuhide事件中移出动态创建的shimmer.
  以上代码可以执行,非常感谢Ext为我们提供了便利的事件监听机制。
分享到:
评论
1 楼 strivefuture 2012-02-21  
这种方法对FF浏览器,有效吗?

相关推荐

    extjs学习网页学习资料

    开发者需要了解EXTJS的兼容性支持策略,并学习如何通过polyfills(用于IE浏览器的ES5 Shim和ES6 Shim)或其他兼容性解决方案来确保EXTJS应用能在IE浏览器中正常运行。 在解决EXTJS应用的兼容性问题时,开发者可以...

    shim_shim_

    在计算机编程领域,"shim"通常指的是一个小型软件组件,用于解决兼容性问题或填补功能空缺,使得旧版软件能在新环境中正常运行。在硬件领域,"shim"也可以是指物理垫片,用于调整设备的间隙或对齐。这里结合描述,...

    SHIM_2.0.pdf

    - **参考作者工具**:除了官方推荐的编辑器外,还可能有其他第三方工具支持 SHIM 文件的创建和编辑,这些工具通常具有更丰富的功能集。 - **SHIM 2.0 的变更**:相比于早期版本,SHIM 2.0 引入了多项改进,包括对...

    es5-shim-master.zip

    "es5-shim-master.zip"是一个解决浏览器兼容问题的工具,它包含的"es5-shim"库使得开发者可以在不担心浏览器兼容性的情况下,放心地使用ES5的特性。通过理解并合理使用这个库,可以提升代码的可移植性和跨浏览器的...

    es5-shim.js

    `es5-shim.js`是JavaScript开发者的宝贵工具,它通过提供对ECMAScript 5特性的polyfill,使得开发者可以编写更现代、更简洁的代码,而无需担心旧版浏览器的兼容性问题。虽然现代浏览器已经普遍支持ES5,但在维护旧...

    shim-signed_1.50.tar.xz

    shim-signed

    用于PXE引导UEFI的文件shim.efi

    用于PXE引导UEFI的文件shim.efi

    前端项目-es6-shim.zip

    总的来说,`es6-shim`作为一款工具,帮助开发者在旧版浏览器中享受到部分ES6的便利,但它并不是解决所有兼容问题的万能药。在实际项目中,根据目标环境选择合适的策略,比如使用Babel进行转译,或者结合其他垫片库,...

    前端项目-es7-shim.zip

    "前端项目-es7-shim.zip" 是一个压缩包,它包含了一个名为 "es7-shim" 的项目,这个项目的目标是为那些不支持ES7特性的老旧JavaScript引擎提供兼容性支持。下面我们将深入探讨ES7中的重要特性以及如何通过shim来实现...

    example-jquery-shim, 通过shim配置使用jQuery和jQuery插件的示例项目.zip

    example-jquery-shim, 通过shim配置使用jQuery和jQuery插件的示例项目 在 shim 配置中使用jQuery和 require.js的示例。本示例显示一种用 require.js. jQuery本身寄存器加载jQuery和jQuery插件的方法,可以以轻松加载...

    前端项目-es5-shim.zip

    尽管`es5-shim`能够显著改善旧浏览器的兼容性,但它并不能解决所有问题。有些ES5特性,如异步编程、Promise或新的数据类型,无法通过垫片完全模拟。因此,在编写代码时,仍需谨慎对待目标浏览器的兼容性,合理使用...

    PyPI 官网下载 | jellyfin_mpv_shim-2.0.2-py3-none-any.whl

    `jellyfin_mpv_shim`是Python社区的一个重要工具,它将Jellyfin媒体服务器与强大的mpv播放器结合,为用户提供了一种灵活、高效的方式来播放和管理个人媒体库。通过PyPI,开发者和用户都能轻松获取并使用这个库,...

    Hyperledger Fabric 链码开发——shim包API详解1

    type SimpleAsset struct {args := stub.GetStringArgs()return shim.Error("Incorrec

    cdh50beta shim 包

    kettle5.0.1 使用cdh5.0.0 shim包

    shim-client-1.0.jar

    java编写chaincode时所需依赖的shim-client包,包含ChaincodeBase类等(这个是有效的,请放心下载)

    前端开源库-dirname-shim

    "dirname-shim" 就是一个这样的开源库,它专注于解决在不同环境下的目录名获取问题。"dirname-shim" 的设计目标是提供一个统一的API,使得开发者在处理模块路径时能够更加便捷,无论是在CommonJS、AMD还是UMD环境中...

    修复IE使其能打开二级菜单

    修复这些错误是解决问题的关键步骤。 7. **更新或替换浏览器**:尽管我们正在努力修复IE,但考虑到微软已停止支持大部分版本的IE,推荐用户升级到最新版的Microsoft Edge,或者使用其他主流浏览器如Chrome、Firefox...

    解决FLUSH、CMPLT、BKGND资源占用过高的问题

    可解决HP B320i (FLUSH、CMPLT、BKGND)这三个进程cpu使用率一直很高的问题。 描述如下: 1、/var/log/message显示 Dec 17 13:59:26 localhost kernel: PAL Shim AllocRequest returning NULL Dec 17 13:59:26 ...

Global site tag (gtag.js) - Google Analytics