frameset中无法使用layer.open或$.jBox 顶层弹窗的问题。

wj02107 2023-10-16 11:09:24

需求：

在一个frameset带有iframe组成的框架子页面中，layer.open弹窗显示的页面要在最前面（顶层），不能被框架遮挡。

附上大概的页面结构代码。

1、主页面index.html代码如下，是一个frameset带iframe框架的页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="/res/js/jquery-1.8.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/res/layui-v2.6.8/css/layui.css" />
<script src="/res/layui-v2.6.8/layui.js"></script>
  <script type="text/javascript" src="/jBox/jquery.jBox-2.3.min.js"></script>
  <script type="text/javascript" src="/jBox/i18n/jquery.jBox-zh-CN.js"></script>
  <link type="text/css" rel="stylesheet" href="/jBox/Skins/blue/jbox.css"/>
<script src="/res/js/layer/layer.js"></script>
<script type="text/javascript">
        function pop(url) {
//无论是layer，还是jBox都无法弹出窗，
//但是alert之类的是正常
//页面已经引入layert和jbox的js文件
            layer.open({
                type: 2,
                area: ['1050px', '600px'],
                content: 'pop.html'
            });
           // $.jBox("iframe:pop.html", {
           //     title: "pop",
           //     width: 750,
           //     top: 0,
           //     height: 450,
           //     buttons: null
           // });
        }
        
    </script>
</head>
<frameset rows="87,*,31" cols="*" frameborder="no" border="0" framespacing="0">
  <frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
  <frameset cols="187,*" frameborder="no" border="0" framespacing="0">
    <frame src="left.html" name="leftFrame" scrolling="auto" noresize="noresize" id="leftFrame" title="leftFrame" />
    <frame src="right.html" name="rightFrame" id="rightFrame" title="rightFrame" />
  </frameset>
  <frame src="footer.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" title="bottomFrame" />
</frameset>
<noframes><body>
   

</body></noframes>
</html>

2、right.html页面代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="/res/js/jquery-1.8.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/res/layui-v2.6.8/css/layui.css" />
<script src="/res/layui-v2.6.8/layui.js"></script>
  <script type="text/javascript" src="/jBox/jquery.jBox-2.3.min.js"></script>
  <script type="text/javascript" src="/jBox/i18n/jquery.jBox-zh-CN.js"></script>
  <link type="text/css" rel="stylesheet" href="/jBox/Skins/blue/jbox.css"/>
<script src="/res/js/layer/layer.js"></script>
 <script type="text/javascript">
         function addwin() {
            //这样是正常弹窗，但是会被嵌套在框架内，无法实现在顶层显示
            //如果改成window.top.layer.open或top.layer.open，则无法弹窗，也不报错
           layer.open({
                 type: 2,
                 area: ['1050px', '600px'],
                 content: "content.html"
             });
</script>
<body>
<input type="button" value="新增" onclick="addwin();" />
</body>
</html>

以上right.html代码只能在框架内实现弹窗，无法实现在顶层显示的目的。

试着把layer.open改成window.top.layer.open或top.layer.open，均无法实现弹窗，console控制台也不报错。

又试着把addwin()方法改写成

window.parent.parent.pop('test.html');

试着去调用父窗口（index.html）页面中的方法，结果父窗口pop方法可以正常调用到（在pop方法中用alert，可以正确执行到位），但也无法实现layer.open弹窗的效果。

各位大神，请教下到底是哪里出了问题。是不是frameset代码的问题？麻烦各位大神帮忙看看，感谢感谢！

...全文