解决iframe中fixed失效问题

92 阅读 0 评论 61 点赞

我是靠谱客的博主整齐悟空，最近开发中收集的这篇文章主要介绍解决iframe中fixed失效问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

代码如下：

aa.html

<html>
<head>
<meta name="" content="" charset="utf-8"/>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">

function say() {
    var box = "<div style='width:500px;height:500px;background:red;position:fixed;top:100px;left:100px;'></div>"
    $("body").append(box);
}
//调用bb页面中的创建button方法
function callChild(){
    myFrame.window.say();
}

</script>
</head>
<body>
    <input type=button value="aa页面调用bb" οnclick="callChild()">
    <iframe name="myFrame" src="bb.html"></iframe>
    <div style="height:3000px;"></div>
</body>
</html>

bb.html

<html>
<head>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">

function say(){
    $("body").append("<button>按钮</button>");
}
//调用aa页面中的创建box方法
function callParent(){
    parent.say();
}

</script>
</head>
<body>
<input type=button value="bb页面调用aa" οnclick="callParent()">
</body>
</html>

其中，页面中使用的jquery需自行加载。