即使我尝试使用 iframe-resizer,但总会有一些失败的情况。所以我编写了自己的 javascript 来调整 iframe 的大小,它工作正常,并且不依赖第三方库。
// region react lifecycle methods
componentWillMount () {
// Detect whether device supports orientationchange event, otherwise fall back to the resize event
let supportsOrientationChange = 'onorientationchange' in window
let orientationEvent = supportsOrientationChange ? 'orientationchange' : 'resize'
if (window.addEventListener) {
window.addEventListener('message', this.checkSender)
window.addEventListener(orientationEvent, this.setIframeHeight)
} else if (window.attachEvent) {
window.attachEvent('message', this.checkSender)
window.attachEvent(orientationEvent, this.setIframeHeight)
}
}
componentWillUnmount () {
window.removeEventListener('message', this.checkSender)
let supportsOrientationChange = 'onorientationchange' in window
let orientationEvent = supportsOrientationChange ? 'orientationchange' : 'resize'
window.removeEventListener(orientationEvent, this.setIframeHeight)
}
// endregion
// region custom methods.
setIframeHeight = () => {
try {
let iframe = document.getElementById(iframeId)
if (iframe) {
let iframeWin = iframe.contentDocument || iframe.contentWindow
if (iframeWin && iframeWin.getElementById('root')) {
iframe.style.height = iframeWin.getElementById('root').offsetHeight + 'px'
}
}
} catch (e) {
console.error('Resizing method call', e)
}
}
checkSender = (e) => {
e.preventDefault()
// error added or removed in iframe
if (e.data.msg === 'validationChanged') {
this.setIframeHeight()
}
}
// end region
这里 setIframeHeight 是调整 iframe 大小的主要方法。休息是支持代码。如果需要,您可以使用参考。注意:- 这里的消息是来自 iframe 的事件。