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

最新推荐文章于 2024-09-22 17:12:26 发布

weixin_33924312

最新推荐文章于 2024-09-22 17:12:26 发布

阅读量68

点赞数

文章标签： python ui javascript ViewUI

原文链接：https://my.oschina.net/linjunlong/blog/209275

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

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

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

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

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

用样式或者脚本使一个div悬浮在一个空白页面之上（可行）
iframe中的div悬浮出父页面外面来（没找到解决方案，应该是不行的，iframe中的元素是无法跑出iframe的可见区域外面的）
悬浮一个div在iframe之上（可行）；

于是通过第3点的尝试，如果采用第三种方案来解决，那么就需要把frame1中的代码写到父页面中就是frameset标签所在的页面，而且要取消frameset这种结构，采用普通html，<body>标签中嵌入iframe2的方式，这样原本iframe1中的脚本改动就会很大，而且还要检查错误，有些错误还是无法排查的，因为历史原因，除非你能理解工具条中每个按钮的功能。并做出修改。但是本着能解决问题，可以试试看的思路，尝试了一下，发现，原本在空白页面上，可以悬浮于iframe之上的div现在不行了，被iframe中的<object>控件遮挡了。后来到网上找资料发现：

层之间的关系是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一样，在界面中拖动，并且在自动隐藏在两边。于是做了如下修改：

拖动框架采用jquery.ui的draggable.js
经测试发现draggable.js无法拖动iframe，但是可以拖动div
于是在iframe下面垫了一层露出但是比iframe多出一个标题栏和边框的区域给与拖动

但是新的代码中的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的边框进行拖动这个工具条了

修改之后的布局的层级关系如下