React 设置iframe自适应全屏

故事

最近干项目，之前由于一直是做后端的，前端自己也会一部分，然后这次遇到一个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宽度