我在外部CMS页面上有我的React页面的iFrame,但是我希望高度可以自动调整。
我正在尝试使用以下库:https://github.com/davidjbradshaw/iframe-resizer 但是不幸的是我无法正确实现它...我不知道我的React项目中是否需要在什么地方设置某些参数/调用函数,以及在哪里导入该JS文件。
我尝试按照此处和某些在线教程中的说明进行操作: https://github.com/davidjbradshaw/iframe-resizer
但这始终只是在宿主页上实现它的方式。
我已经在主机页面中包含了该脚本:
<iframe id="my-iframe" src="https://myiframeurl.com" width="100%" frameBorder="0" scrolling="no"></iframe>
<script type="text/javascript" src="https://www.mycmsurl.com/IFrameResizer/Javascripts/iframeResizer.min.js">
</script>
<script type="text/javascript"> //<![CDATA[
jQuery('#my-iframe').iFrameResize({autoResize: true});
//]]></script>
据我所知,我需要从我在文档中阅读的内容中,在我的React项目中的某个地方调用iFrameResizerContentWindow,但是我不太确定这样做的正确方法,现在这些文档使我感到困惑一点点。因此,如果有人可以帮助我,将不胜感激!
答案 0 :(得分:0)
即使我尝试使用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中的事件。
答案 1 :(得分:0)
我刚刚为支持iframe-Resizer的正式反应包装提供了支持,该包装支持其完整的API