iframe内嵌网页放大或缩小的处理方案

其一：React实现内嵌网页放大或缩小（对内嵌页面有内部跳转链接有动画生硬问题）

const[loadFinished, setLoadFinished]=useState(false);const handleOnLoad =useCallback(e =>{setLoadFinished(true);const iframeBody = e.target?.contentWindow?.document?.body || e.target?.contentDocument?.body;if(iframeBody){const size ='0.85';
      iframeBody.style.zoom = size;// 在iframe的style属性里面，用opacity代替transform的动画效果，以隐藏transform生硬变化过程// iframeBody.style.transition = 'transform 0.2s ease';
      iframeBody.style.transform =`scale(${size}) translate(0, 0)`;
      iframeBody.style.transformOrigin =`0 0`;}},[]);<div className={styles.mainBox}><iframe
        key='my_iframe_baidu'
        name='baidu_iframe'
        src={'https://www.baidu.com/'}
        onLoad={handleOnLoad}
        style={{
          border:'none',
          width:'100%',
          height:'100%',
          opacity: loadFinished ?1:0,
          transition:'opacity 0.2s ease'}}/></div>

.mainBox{width: 100%;height: 100%;padding: 12px 0 12px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

其二：用postMessage的方式实现下面的js放大或缩小的能力

let scale =1.0;constsetStyle=()=>{ 
    document.body.style.zoom = scale;
    document.body.style.cssText +=`; -moz-transform: scale(${scale});-moz-transform-origin: 0 0; `;}constzoomout=()=>{  
    scale = scale +0.1;setStyle();}constzoomin=()=>{  
    scale = scale -0.1;setStyle();}