记一次在object空间上加悬浮工具条过程

之前客户提了一个需求:原本应用中有一个页面如下面的布局:

image

页面上面的是一个工具条:下面是word在线编辑区域,工具条中有些功能是word本身不存在的;代码如下:

<frameset>
    <frame id="iframe1" name="iframe1" src="iframe1.jsp" />
    <frame id="iframe2" name="iframe2" src="iframe2.jsp" />
</frameset>

现在的需求就是,要把这个工具条悬浮在在线编辑区域之上,就类似下面这种界面:

image

原本页面的代码结构是,一个frameset包含2个frame,工具条frame1,通过window.parent.frame2调用frame2中object控件的方法,实现交互。接到需求之后首先尝试可行性分析,做了如下尝试:

  1. 用样式或者脚本使一个div悬浮在一个空白页面之上(可行)
  2. iframe中的div悬浮出父页面外面来(没找到解决方案,应该是不行的,iframe中的元素是无法跑出iframe的可见区域外面的)
  3. 悬浮一个div在iframe之上(可行);
于是通过第3点的尝试,如果采用第三种方案来解决,那么就需要把frame1中的代码写到父页面中就是frameset标签所在的页面,而且要取消frameset这种结构,采用普通html,<body>标签中嵌入iframe2的方式,这样原本iframe1中的脚本改动就会很大,而且还要检查错误,有些错误还是无法排查的,因为历史原因,除非你能理解工具条中每个按钮的功能。并做出修改。但是本着能解决问题,可以试试看的思路,尝试了一下,发现,原本在空白页面上,可以悬浮于iframe之上的div现在不行了,被iframe中的<object>控件遮挡了。后来到网上找资料发现:
  1. 层之间的关系是div<object<iframe
所以解决思路就直接把iframe浮起来并给与绝对位置就行了
<html>
    <head>
    </head>
    <body>
        <iframe id="iframe1" style="position:absolute;top:100px;left:0px;" name="iframe1" src="iframe1.jsp" />
        <iframe id="iframe2" name="iframe2" src="iframe2.jsp" />
    </body>
</html>
改成这样子基本就满足需求了,现在我们只需要调整iframe1中的样式和按钮的布局,剩下的脚本都不需要修改,他和iframe2还是处于同一个位置,同一段代码在这种情况下是可以用的。但是为了实现更强大的功能,可以拖动,就像qq一样,在界面中拖动,并且在自动隐藏在两边。于是做了如下修改:
  1. 拖动框架采用jquery.ui的draggable.js
  2. 经测试发现draggable.js无法拖动iframe,但是可以拖动div
  3. 于是在iframe下面垫了一层露出但是比iframe多出一个标题栏和边框的区域给与拖动
  4. 但是新的代码中的div的标题还是被iframe2中的object标签覆盖,于是在div下面再垫一层iframe代码如下:
    <html>
        <head>
        </head>
        <body>
            <div id="test" style="position:absolute;top:100px;left:0px;width:110px;height:205px;z-index:998;cursor:move;">
                <div style="height:25px">工具条</div>
                <iframe id="iframe1" style="position:absolute;top:5px;left:5px;width:100px;height:170px;z-index:999" name="iframe1" src="iframe1.jsp" />
                <iframe style="position:absolute;top:0px;left:0px;width:110px;height:205px;z-index:-1" />
            </div>
            <iframe id="iframe2" name="iframe2" src="iframe2.jsp" />
        </body>
    </html>
    这时候可以点击工具条和大概小小的5px的边框进行拖动这个工具条了
修改之后的布局的层级关系如下

image

转自:http://linjunlong.com/p/1194.html

转载于:https://my.oschina.net/linjunlong/blog/209275

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值