iframe跨域position fixed失效超简单解决方案

最新推荐文章于 2022-12-15 16:58:53 发布

X-1X

最新推荐文章于 2022-12-15 16:58:53 发布

阅读量2.8k

点赞数 4

分类专栏： html 文章标签： html position fixed 定位 css

本文链接：https://blog.csdn.net/lyflyyvip/article/details/90174104

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如果有朋友使用跨域iframe的时候遇到了这个问题，那么欢迎你试一下这个办法，我再全网都没搜到非常完善的解决方案，有个兄弟的帖子帮了我很大的忙，但是我解决了问题的时候却找不到他的帖子了，实在抱歉

首先声明一下场景

一个html页面，作为父页面，拥有iframe标签，iframe的src地址为【2】
一个html页面，作为子页面
两个html页面位于不同域下

页面1（父页面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面1（父页面）</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body style="">

    <iframe id="child" src="http://127.0.0.1:9527/2" width="100%" height="1100px"></iframe>

</body>
<script>
</script>
</html>

页面2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面2（子页面）</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body style="height: 1000px;">
    <div class="fixed" style="position:fixed;top: 50px; right: 50px">
        <h1>漂浮</h1>
        <h1>漂浮</h1>
        <h1>漂浮</h1>
        <h1>漂浮</h1>
    </div>
    <div style="height: 1000px;background-color: #62a8ea">
    </div>
</body>
<script>
</script>
</html>

页面内容很简单，我后端用的是java，主页面的访问路径我在后端设置为http://localhost:9527/1，子页面设置为http://localhost:9527/2，所以iframe的src属性设置为了http://localhost:9527/1

访问主页面会是这个样子
在这里插入图片描述
但是，当鼠标向下滚动的时候就会发现漂浮的div并不是固定在顶端的

如果直接访问子页面，会发现漂浮是一直在顶部的

鼠标向下滚动的时候，就会发现，子页面的position定位并没有根据父页面的滚动而定位

这个时候有一个解决办法就是设置合适高度
设置父页面的iframe的高度为500px，这个时候iframe出现滚动条，之所以上面的不好使是因为上面的那个截图的滚动条是父页面的，这个滚动条是子页面的滚动条

在这里插入图片描述

这个时候滚动滚动条，发现fixed是可以的，这回知道为什么了吧。但是这种方式并不是很完善，毕竟出现了滚动条，在某些业务下并不一定合适。下面还有一种方式，是通过监听父页面的鼠标滚动事件，获取父页面的当前高度，传给子页面，然后子页面进行重新css定位，来达到悬浮的效果。下面是代码
父页面还是原来的代码，并没有改变，监听与设置css都在子页面中进行就ok了

子页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面2（子页面）</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body style="height: 1000px;">
    <div class="fixed" style="position:fixed;top: 50px; right: 50px">
        <h1>漂浮</h1>
        <h1>漂浮</h1>
        <h1>漂浮</h1>
        <h1>漂浮</h1>
    </div>
    <div style="height: 1000px;background-color: #62a8ea">
    </div>
</body>
<script>
    $(parent.window).scroll(function(){
        console.log('xxx')
        $('.fixed').css({
            top : $(parent.window).scrollTop()
        });
    }); 

</script>
</html>

重点就是script里的代码，根据父页面的监听滚动，设置子页面悬浮div的高度为父页面的滚动高度

页面展示
在这里插入图片描述
这个滚动条是父页面的滚动条哦

当滚动条滚动的时候，漂浮几个字还是在页面上方的，按理说这样就可以了

但是不妨有朋友遇到了这种情况，iframe的src与父页面不属于同一个域下，这个时候就会出现问题

在这里插入图片描述
我的地址刚才是127.0.0.1:9527/1，iframe的src的地址是127.0.0.1:9527/2
刚才都同属于一个域下，正常定位没有问题，但是现在我父页面的地址变成了localhost,我使用localhost访问的时候，定位就不好使了，同时控制台打印出了报错的原因，iframe跨域，查阅资料如下

怎么样是跨域
在这里插入图片描述

跨域问题怎么解决
在这里插入图片描述
通过这个api在跨域的iframe里进行信息交互，ok，至此问题就可以解决了，上一部解决问题的思路是通过父页面的滚动监听，将高度设置为子页面悬浮div的高度，都是在子页面中进行的，现在子页面的js报错，因为跨域了，通过这个api可以实现父页面监听当前页面的滚动高度，将数据传递给子页面，子页面监听到高度变化，改变自己的div，就是这个么个思路，下面是代码

父页面改造

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面1（父页面）</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body style="">

    <iframe id="child" src="http://127.0.0.1:9527/2" width="100%" height="1100px"></iframe>

</body>
<script>
    $(parent.window).scroll(function(){
        document.getElementById('child').contentWindow.postMessage($(parent.window).scrollTop(), "http://127.0.0.1:9527/2")
    });
</script>
</html>

将子页面中监听父页面高度的代码放到父页面中
并且将获取到的高度发送给子页面 document.getElementById(‘child’).contentWindow.postMessage($(parent.window).scrollTop(), “http://127.0.0.1:9527/2”)

子页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面2（子页面）</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body style="height: 1000px;">
    <div class="fixed" style="position:fixed;top: 50px; right: 50px">
        <h1>漂浮</h1>
        <h1>漂浮</h1>
        <h1>漂浮</h1>
        <h1>漂浮</h1>
    </div>
    <div style="height: 1000px;background-color: #62a8ea">
    </div>
</body>
<script>
    window.addEventListener('message',function(event){
        console.log(event.data);
        $('.fixed').css({
            top : event.data
        });
    }, false);

</script>
</html>

子页面监听父页面传来的消息，并修改悬浮div的css
页面呈现如下

滚动鼠标后

至此，完美的解决掉了

跨域
iframe position fixed问题

X-1X

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
iframe跨域position fixed失效超简单解决方案

如果有朋友使用跨域iframe的时候遇到了这个问题，那么欢迎你试一下这个办法，我再全网都没搜到非常完善的解决方案，有个兄弟的帖子帮了我很大的忙，但是我解决了问题的时候却找不到他的帖子了，实在抱歉首先声明一下场景一个html页面，作为父页面，拥有iframe标签，iframe的src地址为【2】一个html页面，作为子页面两个html页面位于不同域下页面1（父页面）<!DO...
复制链接

扫一扫

专栏目录