两个iframe框滚动条联动以及iframe窗口高宽自适应

2024年2月1日 112次阅读 来源: hexy_xiaojie

因为iframe没有onsccoll要领，所以采纳把iframe放进牢固大小且带有滑动条的div中，然后先给iframe一个合适的宽度，页面加载后再让iframe窗口自顺应src链接的页面。

<div id="div1"  style="width:620px;height:500px ; float:left;overflow:scroll" onscroll="funcsrcoll1()">
    <iframe name="left" id="left" scrolling="no" width="600px" height="500px" src="2.html"></iframe>
</div>
<div id="div2" style="width:620px; height:500px ;float:left;overflow:scroll" onscroll="funcsrcoll2()">
    <iframe name="right" id="right" scrolling="no" width="600px" height="500px" src="3.html"></iframe>
</div>
<script>
//掌握两个div的滚动条联动，便于页面对照
function funcsrcoll1()
{
div2.scrollLeft = div1.scrollLeft;
div2.scrollTop = div1.scrollTop;
}
function funcsrcoll2()
{
div1.scrollLeft = div2.scrollLeft;
div1.scrollTop = div2.scrollTop;
}
//调解iframe窗口大小顺应src链接的页面
function func(){
     $('iframe').each(function(){
          this.style.height = this.contentWindow.document.body.scrollHeight+20 + 'px';//为了显现完全，分外加了20px的宽度
          this.style.width = this.contentWindow.document.body.scrollWidth+20 + 'px';
     });    
}
</script>
    原文作者：hexy_xiaojie
    原文地址: https://segmentfault.com/a/1190000000621803
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞