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;

  const setStyle = () => { 
    document.body.style.zoom = scale;
    document.body.style.cssText += `; -moz-transform: scale(${scale});-moz-transform-origin: 0 0; `; 
  }
 
  const zoomout = () => {  
    scale = scale + 0.1;  
    setStyle(); 
  }  

  const zoomin = ()=> {  
    scale = scale - 0.1;  
    setStyle();  
  }

原文地址：https://blog.csdn.net/web18285997089/article/details/144384328

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！