iframe自适应高度-跨域访问解决

2020-04-29

字数统计: 227字 | 阅读时长≈ 1分

问题描述

iframe内嵌其他项目的网页时(即跨域访问),会有自己的滚动条,并且高并不能自适应调整,预期得效果就好像iframe本身就是属于原页面的.

解决方案

查找了许多资料,并没有一种便捷的解决方案.最后找到了iFrame Resizer,具体可以查看官方文档.

原网页:

<iframe src='内嵌的网页地址' frameborder="0" id="iframe" scrolling="no" width="60%"></iframe>
<script src="https://cdn.bootcss.com/iframe-resizer/4.1.1/iframeResizer.js"></script>
<script type="text/javascript">
      iFrameResize({
        log: true,
        checkOrigin: false 
      }, '#iframe');
</script>

内嵌网页,头部引入:

1 2	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script src="https://cdn.bootcss.com/iframe-resizer/4.1.1/iframeResizer.contentWindow.js"></script>

注意: iframe必须引入jQuery,两个地方都要,因为它是基于jQuery实现的,

本文作者： Veng
本文链接： http://veng0923.github.io/2020/04/29/iframe自适应高度-跨域访问解决/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！