通过自建iframe遮罩层解决flash位于window窗口之上的问题

原创 2011年01月12日 10:19:00

 效果对于固定不动窗口或菜单则更有效,并不太适用于可移动的窗口,遮罩层与窗口位置很难一致。若是可移动的窗口建议用前面一篇文章所介绍的shim属性Ext自身提供的方法。

       同样下面的方法只对IE有效,firefox下依然无效。

     

Ext.onReady(function() {
       ......
      //创建垫片效果iframe遮罩层
  function createShim(coordinate) {
       closeShim();
          var shimmer = document.createElement('iframe');  
          shimmer.id='shimmer';  
          shimmer.style.position='absolute';  
          shimmer.style.top=coordinate.top;  
          shimmer.style.left=coordinate.left;  
          shimmer.style.width=coordinate.width;  
          shimmer.style.height=coordinate.height;  
          shimmer.style.zIndex='999';  
          shimmer.setAttribute('frameborder','0');  
         // shimmer.setAttribute('src','javascript:false;'); 
          document.body.appendChild(shimmer);  
  }
       //移除iframe遮罩层  
      function closeShim(){
        var shimmer = document.getElementById('shimmer')  
         if(shimmer){
         document.body.removeChild(shimmer);
         }
      }
        // 查询窗口对象变量
 var searchWin;
 // 查询按钮
 function doSearch_pic_panel() {
                 searchWin = Ext.getCmp('search-window');  //避免出现显示两个窗口的问题

            if (!searchWin) {
   searchWin = new Ext.Window({
    contentEL:'search-window',
    title : '请输入查询条件',
    layout : 'fit',
    width : 400,
    height : 300,
    closeAction : 'hide',
    plain : true,
    floating:true,
    shim:true,
    items : searchFormPanel_pic_panel,
    buttons : [{
     text : '查询',
     handler : function() {
             
       searchWin.hide();
     }
    }, {
     text : '关闭',
     handler : function() {
      searchWin.hide();
     }
    }]
   });
             searchWin.on("show",function(window){
    var winEl = window;
    var position =new Array();
    position = winEl.getPosition(true);
     createShim({  
                 top:position[1],  
                 left:position[0],  
                 width:winEl.getFrameWidth()+winEl.getInnerWidth(),  
                 height:winEl.getFrameHeight()+winEl.getInnerHeight() 
              }); 
   });
     
            searchWin.on("hide",function(window){
            closeShim();
            });
            searchWin.on("beforemove",function(component,x,y){
             closeShim();
            });
            searchWin.on("move",function(component,x,y){
            closeShim();
             var winEl = Ext.getCmp('search-window');
    var position =new Array();
    position = winEl.getPosition(true);
             createShim({  
                 top:y,  
                 left:x,
                 width:winEl.getFrameWidth()+winEl.getInnerWidth(),  
                 height:winEl.getFrameHeight()+winEl.getInnerHeight() 
            });
            });
  }
  searchWin.show();
 }
  ......

}

 

其实贴出来主要是学习这一种思想。网上也有关于该问题的讨论:

       Why does moving the IFRAME shim slow things down?

              链接地址:https://www.extjs.com/forum/showthread.php?1384-Why-does-moving-the-IFRAME-shim-slow-things-down

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

               链接地址:http://agile-boy.javaeye.com/blog/140935

        [OPEN-884] Shim size problem on Ext.Window with shadow

                链接地址:http://www.extjs.com/forum/showthread.php?97413-OPEN-884-Shim-size-problem-on-Ext.Window-with-shadow&p=459829#post459829

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/foamflower/archive/2010/04/21/5512865.aspx

通过自建iframe遮罩层解决flash位于window窗口之上的问题

       效果对于固定不动窗口或菜单则更有效,并不太适用于可移动的窗口,遮罩层与窗口位置很难一致。若是可移动的窗口建议用前面一篇文章所介绍的shim属性Ext自身提供的方法。       同样下面...
  • foamflower
  • foamflower
  • 2010年04月21日 19:29
  • 1686

iframe中弹出框后添加覆盖整个页面的遮罩层并且不覆盖子页面中的弹出框

iframe中弹出框后添加覆盖整个页面的遮罩层并且不覆盖子页面中的弹出框
  • judas_jia
  • judas_jia
  • 2016年08月11日 16:14
  • 11896

Extjs 实现Iframe的子窗口遮罩整个页面

Extjs 可以使用弹出Windows 的方式, 遮罩页面 var winMasking = new Ext.Window({ title: 'Action in Progress. ...
  • oscar999
  • oscar999
  • 2012年06月20日 13:29
  • 5226

Ext.js的window添加遮罩效果

function test(){ var win = new Ext.Window({           id:'test',           width:700,           ...
  • hzs8716
  • hzs8716
  • 2017年03月16日 14:04
  • 1178

iframe子页面弹出框遮罩层问题的解决方法

公司重构项目的菜单,由正常的js加载换成iframe(ps:因为老总老是更改菜单的样式) 出现一个问题(弹框在子页面,弹出时遮罩层只是遮住子页面,没有全屏) 解决方案: 将弹出框放到父页面弹出,...
  • qq_30114149
  • qq_30114149
  • 2017年06月12日 15:59
  • 770

跨域解决方法之window.name

window.name 跨域请求 方法
  • u013558749
  • u013558749
  • 2017年02月24日 23:54
  • 1560

获取iframe中window对象的方法

很简单的一行代码 document.getElementsByTagName('iframe')[0].contentWindow 上面这行代码获取到的就是iframe中的window对象...
  • QQ282030166
  • QQ282030166
  • 2014年06月13日 17:22
  • 10873

如何禁止iframe里面的脚本弹出的窗口覆盖了父窗口

在父窗口定义var location = new Object()//或者var location = ""等都可以 top.location != location判断当前是页面和祖父页面的地址是不...
  • yousuf007
  • yousuf007
  • 2010年10月13日 22:03
  • 2342

iframe中获取父元素的window对象

1. 父窗体获取iframe的window对象      var mainFrame = document.getElementById("myFrame"); var subDocume...
  • wenjianjun95
  • wenjianjun95
  • 2016年09月30日 15:37
  • 2488

div 浮动于flash上

首先,关键是给flash插件加个参数:。这样flash就不会永远浮在最上面了。 之后就是通过设置div的style,如position:absolute等等,让div浮起来。为了方便计算div的位置...
  • as375256234
  • as375256234
  • 2012年05月22日 12:23
  • 1329
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:通过自建iframe遮罩层解决flash位于window窗口之上的问题
举报原因:
原因补充:

(最多只允许输入30个字)