如果有朋友使用跨域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问题