DIV悬浮层如何跨页面在iframe框架之上显示

qq_36287886 2019-01-01 04:13:04

两个页面index.html和online.html
index页面是三列DIV布局，
在中间和右边布局中用的iframe框架来内嵌其他文件，
在右边布局中的iframe中内嵌的online.html，
而在online.html 这个文件中有一段DIV的悬浮层效果，鼠标放在文字上可以显示DIV悬浮层，离开消失的这种效果
怎么才能使online.html中的div悬浮层，在index页面框架之上显示呢，
现在总是被iframe遮住，查了好多都不好使，
希望大佬们在百忙之中赐教！

...全文

1443 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_36287886 2019-01-04

打赏
举报

引用 1 楼 Hello World, 的回复:

Index:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

        html, body {

            margin: 0;

            height: 100%;

        }



        .column {

            width: 200px;

            height: 100%;

            overflow: hidden;

            border: 1px black solid;

            display: inline-block;

        }



        iframe {

            width: 100%;

            height: 100%;

            overflow: auto;

            border: 0;

        }



        #msg {

            display: none;

            width: 250px;

            height: 100px;

            border: 3px #ff6a00 solid;

            background-color: white;

            font-size: 20pt;

            position: absolute;

        }

    </style>

</head>

<body style="position: relative;">

    <div class="column">

        <iframe src="online.html"></iframe>

    </div>

    <div class="column">

        <iframe src="content.html"></iframe>

    </div>

    <div id="msg"></div>

</body>

</html>

<script src="../../../Script/jquery-1.7.2.min.js"></script>

<script>

    function showtip(obj) {

        $('#msg').html($(obj).html())

            .css({

                top: $(obj).offset().top - $(obj).closest('body').scrollTop() + 'px',

                left: $(obj).offset().left + 'px'

            }).show();

    }

    function hidetip() {

        $('#msg').hide();

    }

</script>

online:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        .item{

            margin:10px;

            width:150px;

            height:150px;

            background-color:gray;

            border:1px green solid;

        }

    </style>

</head>

<body>

    <div class="item" onmouseover="parent.showtip(this);" onmouseout="parent.hidetip();">item1</div>

    <div class="item" onmouseover="parent.showtip(this);" onmouseout="parent.hidetip();">item2</div>

    <div class="item" onmouseover="parent.showtip(this);" onmouseout="parent.hidetip();">item3</div>

    <div class="item" onmouseover="parent.showtip(this);" onmouseout="parent.hidetip();">item4</div>

    <div class="item" onmouseover="parent.showtip(this);" onmouseout="parent.hidetip();">item5</div>

</body>

</html>

非常感谢！
在请教个问题，JS怎么定位让DIV悬浮层靠右显示呢

Hello World, 2019-01-03

打赏
举报

Index:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

        html, body {

            margin: 0;

            height: 100%;

        }



        .column {

            width: 200px;

            height: 100%;

            overflow: hidden;

            border: 1px black solid;

            display: inline-block;

        }



        iframe {

            width: 100%;

            height: 100%;

            overflow: auto;

            border: 0;

        }



        #msg {

            display: none;

            width: 250px;

            height: 100px;

            border: 3px #ff6a00 solid;

            background-color: white;

            font-size: 20pt;

            position: absolute;

        }

    </style>

</head>

<body style="position: relative;">

    <div class="column">

        <iframe src="online.html"></iframe>

    </div>

    <div class="column">

        <iframe src="content.html"></iframe>

    </div>

    <div id="msg"></div>

</body>

</html>

<script src="../../../Script/jquery-1.7.2.min.js"></script>

<script>

    function showtip(obj) {

        $('#msg').html($(obj).html())

            .css({

                top: $(obj).offset().top - $(obj).closest('body').scrollTop() + 'px',

                left: $(obj).offset().left + 'px'

            }).show();

    }

    function hidetip() {

        $('#msg').hide();

    }

</script>

online:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        .item{

            margin:10px;

            width:150px;

            height:150px;

            background-color:gray;

            border:1px green solid;

        }

    </style>

</head>

<body>

    <div class="item" onmouseover="parent.showtip(this);" onmouseout="parent.hidetip();">item1</div>

    <div class="item" onmouseover="parent.showtip(this);" onmouseout="parent.hidetip();">item2</div>

    <div class="item" onmouseover="parent.showtip(this);" onmouseout="parent.hidetip();">item3</div>

    <div class="item" onmouseover="parent.showtip(this);" onmouseout="parent.hidetip();">item4</div>

    <div class="item" onmouseover="parent.showtip(this);" onmouseout="parent.hidetip();">item5</div>

</body>

</html>

persuit666 2019-01-02

打赏
举报

引用 3 楼 qq_36287886 的回复:

[quote=引用 2 楼 persuit666 的回复:]
修改显示逻辑，将你的悬浮层放到index页面上来创建即可，如果在你右侧iframe里创建当然是跑不出iframe那个区域的。

思路如下(以下是你右侧Iframe的代码)：
文字放上去的时候，判断下
var w=window.self
if(window.top!=w)//如果顶级窗口不是当前窗口，则取顶级窗口
w=window.top

那么这个w就是你要创建的悬浮层的所在的窗口对象
可以获取w.document.body.追加你的那个悬浮层即可

那js的悬浮层代码还用放到index中吗

大哥能否加下您的联系方式，帮我看看代码可以吗[/quote]
代码不用加到Index，只是把你创建悬浮层和隐藏的那段代码加上对当前窗口的处理即可，编程要转换思路，代码可以是当前窗口的，但是我可以让代码在外层窗口跑，只要你能获取到窗口对象

qq_36287886 2019-01-02

打赏
举报

引用 2 楼 persuit666 的回复:

修改显示逻辑，将你的悬浮层放到index页面上来创建即可，如果在你右侧iframe里创建当然是跑不出iframe那个区域的。

思路如下(以下是你右侧Iframe的代码)：
文字放上去的时候，判断下
var w=window.self
if(window.top!=w)//如果顶级窗口不是当前窗口，则取顶级窗口
w=window.top

那么这个w就是你要创建的悬浮层的所在的窗口对象
可以获取w.document.body.追加你的那个悬浮层即可

那js的悬浮层代码还用放到index中吗

大哥能否加下您的联系方式，帮我看看代码可以吗

qq_36287886 2019-01-02

打赏
举报

引用 4 楼 persuit666 的回复:

[quote=引用 3 楼 qq_36287886 的回复:]
[quote=引用 2 楼 persuit666 的回复:]
修改显示逻辑，将你的悬浮层放到index页面上来创建即可，如果在你右侧iframe里创建当然是跑不出iframe那个区域的。

思路如下(以下是你右侧Iframe的代码)：
文字放上去的时候，判断下
var w=window.self
if(window.top!=w)//如果顶级窗口不是当前窗口，则取顶级窗口
w=window.top

那么这个w就是你要创建的悬浮层的所在的窗口对象
可以获取w.document.body.追加你的那个悬浮层即可

那js的悬浮层代码还用放到index中吗

大哥能否加下您的联系方式，帮我看看代码可以吗[/quote]
代码不用加到Index，只是把你创建悬浮层和隐藏的那段代码加上对当前窗口的处理即可，编程要转换思路，代码可以是当前窗口的，但是我可以让代码在外层窗口跑，只要你能获取到窗口对象[/quote]
按照您的说的
if (this.online.document.getElementById(data)) {
if (this.online.document.getElementById(data).innerHTML.indexOf("parent.sw") == -1) {
rstr = this.online.document.getElementById("大家").outerHTML;
//mdstr = this.online.document.body.innerHTML;
mdstr = this.online.document.getElementById('mdonline').innerHTML;
mdstr = mdstr.replace(rstr, rstr + restr);
this.online.document.getElementById('mdonline').innerHTML = mdstr;
}
} else {
if (this.online.document.getElementById('onlineok')) {
rstr = this.online.document.getElementById("大家").outerHTML;
//mdstr = this.online.document.body.innerHTML;
mdstr = this.online.document.getElementById('mdonline').innerHTML;
mdstr = mdstr.replace(rstr, rstr + restr);
this.online.document.getElementById('mdonline').innerHTML = mdstr;
}
}
} catch (e) {
return false;
}
}
悬浮层代码弄到同页面了，可还是不行，

persuit666 2019-01-01

打赏
举报

修改显示逻辑，将你的悬浮层放到index页面上来创建即可，如果在你右侧iframe里创建当然是跑不出iframe那个区域的。

思路如下(以下是你右侧Iframe的代码)：
文字放上去的时候，判断下
var w=window.self
if(window.top!=w)//如果顶级窗口不是当前窗口，则取顶级窗口
w=window.top

那么这个w就是你要创建的悬浮层的所在的窗口对象
可以获取w.document.body.追加你的那个悬浮层即可