公司内部产品以平台形式展示,涉及工作流,存在多级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
该页面只有普通的展示信息
底部有一个按钮
如图：
那么当点击后按钮
那么怎么解决呢?
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是通过的.