Skip to content

iframe多层嵌套弹出框显示问题

公司内部产品以平台形式展示,涉及工作流,存在多级iframe嵌套的现象.但是如果内层的iframe页面里,存在按钮在页面底部,点击后弹出消息框/选择框等.当时在写弹出框的时候是根据页面来计算的.那么就存在我外面的页面已经滚动到下面,内页能看到内容仅为底部的按钮.那么当点击按钮以后.弹框当然不再页面的中央,在内页iframe页面的中央.

这么一来用户当然就认为是点击以后没有反应.

示例代码:iframe_parent.html

<div>
 <div id="test">
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <iframe src="portal.html" id="miframe" width="99%" height="800px;"></iframe>
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行 
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 <p>这是神奇的换行
 </div>
</div>

portal.html
该页面只有普通的展示信息
底部有一个按钮

如图:

iframe示例

iframe全景示例
iframe全景示例

那么当点击后按钮

弹出以后
弹出以后

那么怎么解决呢?

google了很多的三方控件.看了很多源码.但是帮助都不是特别大.显然他们都解决了这个问题.

无意间想起了以前解决的一个fcous问题[当打开页面以后,默认找到未填写的输入框然后聚焦到指定位置.当时觉得一个很科学的现象是:当聚焦的对象不再页面显示区域,页面会自动跳转到聚焦对象]

于是在尝试在打开的控件上使用fcous,尝试第一次发现.跟以前一样.想了半天原来我用的是div,默认是不支持fcous,需要添加tabindex.

添加以后果然好了.然后只是位置有点歪.于是调试了下.

问题解决.

成功

示例代码片段:

html.push('<div  tabindex="-1"  id="'+_window_id+'">');
......此处省略N行
$(opts.target).focus();

 

我在解决问题的过程中还遇到一个方法,当然,这个多浏览器兼容存在问题.

document.location.hash="#"+opts.windowId;

相当通过a标签的描点来解决。不过好像我这里测试只有chrome是通过的.

发表评论

电子邮件地址不会被公开。 必填项已用*标注