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

<code> 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'code>

name='baidu_iframe'code>

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放大或缩小的能力