iframe加载白屏闪烁问题解决

point：onload 事件在frame或者iframe载入完成后被触发。

直接上代码：

export default function IframeDemo() {
  const [iframeLoad, setIframeLoad] = useState<boolean>(false);
  
  return (
    <div className={cn(style.itemImg, style.iframeWrapper)}>
      /* 添加缺省图/水印 */
      <img
        src={
          iframeLoad
            ? `/assets/images/water-mark.png`
            : `/assets/images/no_img.png`
        }
        alt=''
      />
      <iframe
        style={iframeLoad ? { display: 'block' } : { display: 'none' }}
        onLoad={() => setIframeLoad(true)}
        className={style.iframe}
        width='100%'
        height='100%'
        title='market'
        src='xxx'
      />
    </div>
  );
}

tips：水印导致iframe点击失效，使用css属性 pointer-events 来控制；

.iframeWrapper {
   position: relative;
   overflow: hidden;
   height: 560px;
   background: transparent;
   img {
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: 2;
     pointer-events: none; // 当前元素不可点击,点击会默认穿透到下方元素
   }
   .iframe {
     position: absolute;
     width: 100%;
     height: 100%;
   }
 }