我正在构建一个可在不同域中使用的iframe。 iframe 有一个数据列表，到达滚动底部后会更新更多数据。
我遇到一个问题，其中包含 iframe 的父窗口有两个滚动条；我的目标是消除父滚动条并依赖 iframe 滚动或相反。重要的是两者都需要一张卷轴，
我的代码如下:
<html>
<body >
<div>Header</div>
<iframe
width='100%'
height='500px'
onLoad="window.parent.scroll(0,0);"
id='iframe'
src="myIframe.com"></iframe>
<div>Footer</div>
</body>
<script type="text/javascript">
window.addEventListener('message', function (e) {
document.getElementById("iframe").height = e.data.frameHeight
});
</script>
</html>
监听来自父级的消息并设置框架的高度，有助于消除 iframe 的滚动，但我确实需要该滚动在到达底部时更新列表。
我尝试了一些方法但没有成功。在这种情况下实现我的目标的最佳方法是什么？
最佳答案
简短回答
https://github.com/davidjbradshaw/iframe-resizer
更长的答案
上述库的做法是使用 MutationObserver 来检测 iframe 中 DOM 的变化，以触发页面大小的重新计算。复杂之处在于必须检测新加载的 html 中的图像何时也加载。
function setupBodyMutationObserver() {
function addImageLoadListners(mutation) {
function addImageLoadListener(element) {
if (false === element.complete) {
log('Attach listeners to ' + element.src)
element.addEventListener('load', imageLoaded, false)
element.addEventListener('error', imageError, false)
elements.push(element)
}
}
if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
addImageLoadListener(mutation.target)
} else if (mutation.type === 'childList') {
Array.prototype.forEach.call(
mutation.target.querySelectorAll('img'),
addImageLoadListener
)
}
}
function removeFromArray(element) {
elements.splice(elements.indexOf(element), 1)
}
function removeImageLoadListener(element) {
log('Remove listeners from ' + element.src)
element.removeEventListener('load', imageLoaded, false)
element.removeEventListener('error', imageError, false)
removeFromArray(element)
}
function imageEventTriggered(event, type, typeDesc) {
removeImageLoadListener(event.target)
sendSize(type, typeDesc + ': ' + event.target.src, undefined, undefined)
}
function imageLoaded(event) {
imageEventTriggered(event, 'imageLoad', 'Image loaded')
}
function imageError(event) {
imageEventTriggered(event, 'imageLoadFailed', 'Image load failed')
}
function mutationObserved(mutations) {
sendSize(
'mutationObserver',
'mutationObserver: ' + mutations[0].target + ' ' + mutations[0].type
)
// Deal with WebKit / Blink asyncing image loading when tags are injected into the page
mutations.forEach(addImageLoadListners)
}
function createMutationObserver() {
var target = document.querySelector('body'),
config = {
attributes: true,
attributeOldValue: false,
characterData: true,
characterDataOldValue: false,
childList: true,
subtree: true
}
observer = new MutationObserver(mutationObserved)
log('Create body MutationObserver')
observer.observe(target, config)
return observer
}
var elements = [],
MutationObserver =
window.MutationObserver || window.WebKitMutationObserver,
observer = createMutationObserver()
return {
disconnect: function() {
if ('disconnect' in observer) {
log('Disconnect body MutationObserver')
observer.disconnect()
elements.forEach(removeImageLoadListener)
}
}
}
}
function setupMutationObserver() {
var forceIntervalTimer = 0 > interval
// Not testable in PhantomJS
/* istanbul ignore if */ if (
window.MutationObserver ||
window.WebKitMutationObserver
) {
if (forceIntervalTimer) {
initInterval()
} else {
bodyObserver = setupBodyMutationObserver()
}
} else {
log('MutationObserver not supported in this browser!')
initInterval()
}
}
关于javascript - 处理来自父窗口 ScrollBar 的 iframe 滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59928424/