iframe内部嵌入大屏没有自适应怎么解决

最新推荐文章于 2024-07-22 08:55:10 发布

weixin_44914810

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量321

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/weixin_44914810/article/details/134400142

版权

import useWindowSize from '@/utils/useWindowSize';
import { useState, useEffect } from 'react';
import { debounce, throttle } from 'lodash';

const ExternalWindow = ({ src, isFullscreen, scale = 1920 / 1080 }) => {
  // const windowSize = useWindowSize();
  const [resize, setResize] = useState(false);
  const getWindowSize = () => ({
    innerHeight: window.innerHeight,
    innerWidth: window.innerWidth,
  });
  const [windowSize, setWindowSize] = useState(getWindowSize());
  useEffect(() => {
    const handleResize = debounce(() => {
      () => {
        setWindowSize(getWindowSize());
        setResize((resize) => !resize);
      };
    }, 300);
    // 监听
    window.addEventListener('resize', handleResize);
    // 销毁
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  // 宽度
  let iframeWidth = windowSize.innerWidth;

  // 计算宽高
  let iframeHeight = Math.floor(iframeWidth / scale);

  // 计算是否存在滚动条
  if (iframeHeight > windowSize.innerHeight) {
    iframeWidth -= 8;
    iframeHeight = Math.floor(iframeWidth / scale);
  }
  console.log('windowSize', windowSize, src);
  return (
    <>
      {resize ? (
        <iframe
          style={{ border: 'none' }}
          key={'0'}
          width={isFullscreen ? '100%' : iframeWidth}
          height={isFullscreen ? '100%' : iframeHeight}
          src={src}
        />
      ) : (
        <iframe
          style={{ border: 'none' }}
          key={'1'}
          width={isFullscreen ? '100%' : iframeWidth}
          height={isFullscreen ? '100%' : iframeHeight}
          src={src}
        />
      )}
    </>
  );
};

export default ExternalWindow;

给iframe设置key,然后resize一次重新渲染一次，加防抖节流