sirwsl的博客

故事

最近干项目，之前由于一直是做后端的，前端自己也会一部分，然后这次遇到一个iframe的问题。大概问题如下：
由于页面采用React写的，其中嵌入iframe，但是页面需要在web和app中进行使用，这时候就需要iframe根据页面大小进行等比例缩放。

思路

iframe大家都知道是内嵌网页时使用的。之前也尝试过object进行内嵌还是没很好解决。既然iframe它能够设置初始时的宽高、也能够设置旋转、缩放参数。那是不是逐步有了思路？
1：页面打开时候就获取页面或者容器的高度
2：iframe加载完成时候获取iframe的body高度
3：页面宽度/body宽度=缩放比例
4：按照比例缩放，重新设置iframe宽度，高度

说干就干

原来的iframe

<iframe src={'xxxxxxxx'} className={styles.xxx} ></iframe>

改造后的iframe

const {iwidth,iheight,itransform,itransformOrigin} = this.state;
    let iframeStyle = {
      width:this.state.iwidth?this.state.iwidth:'100%',
      height:this.state.iheight?this.state.iheight:'100%',
      transform:"scale("+this.state.itransform+")",
      transformOrigin:this.state.itransformOrigin
    }
  
<div id='IframeBox' className={styles.IframeBox}>
   <div id='IframeInhorBox' className={styles.IframeInhorBox}>
    <iframe style={iframeStyle}
        id = 'iframe'
        src={'/xxxx'}
        frameborder='0'
        onLoad={() => {
          let doc = document.getElementById("iframe").contentWindow.document.getElementsByTagName("body")[0];
          let dom = document.getElementById('IframeInhorBox');
          let x = dom.scrollWidth/doc.scrollWidth;
          this.setState({
            iwidth:dom.scrollWidth/x + 'px',
            iheight:doc.scrollHeight + 'px',
            itransform : x,
            itransformOrigin : '0 0',
          })
          document.getElementById('IframeInhorBox').style.height = doc.scrollHeight*x + 'px';
        }}

    />
   </div>
</div>

.IframeBox{
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;


  .IframeInhorBox{
    width:100%;
    overflow: hidden;
  }
}

关键点

1：itransform 属性的使用以及函数scale
2：缩放比例 = iframe外层盒子宽度 / iframe中body宽度