论坛首页 → Web前端技术论坛 →

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

浏览 4282 次
锁定老帖子 主题：Iframe Shim解决applet挡住ExtJS工具栏菜单问题
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • agile_boy
  • 等级: 五星会员
  • 性别:
  • 文章: 311
  • 积分: 630
  • 来自: 上海
   发表时间：2007-11-15  
  终于解决了昨天碰到了菜单被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为我们提供了便利的事件监听机制。
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics