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

时间 2019-11-11

标签一次 object 空间悬浮工具条过程繁體版

原文原文链接

以前客户提了一个需求：本来应用中有一个页面以下面的布局：html

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

<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控件的方法，实现交互。接到需求以后首先尝试可行性分析，作了以下尝试：jsp

用样式或者脚本使一个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的边框进行拖动这个工具条了

修改以后的布局的层级关系以下

转自：http://linjunlong.com/p/1194.html工具