问题
我帮助维护一个庞大，复杂且杂乱的旧站点，其中所有内容（从字面上看）都嵌套在多个iframe级别中-其中许多是动态创建的和/或具有动态src。这带来了以下挑战：
- HTML结构的任何更改都有可能破坏多年未触及的脚本和样式表。
- 手动查找和修复所有iframe和src文档将花费大量时间和精力。
在到目前为止发布的解决方案中，这是我所见过的唯一能够克服挑战1的解决方案。不幸的是，它似乎不适用于某些iframe，并且当它起作用时，滚动就会出现故障（这似乎会导致其他问题）页面上的错误，例如无响应的链接和表单控件）。
解决方案
如果以上听起来像您的情况，您可能需要尝试以下脚本。它放弃了原生滚动，而是使所有iframe在其视口范围内可拖动。您只需要将其添加到包含顶级iframe的文档中即可；它将根据需要将修复程序应用于他们及其后代。
这是一个有效的小提琴*，下面是代码：
(function() {
var mouse = false //Set mouse=true to enable mouse support
, iOS = /iPad|iPhone|iPod/.test(navigator.platform)
if(mouse || iOS) {
(function() {
var currentFrame
, startEvent, moveEvent, endEvent
, screenY, translateY, minY, maxY
, matrixPrefix, matrixSuffix
, matrixRegex = /(.*([\.\d-]+, ?){5,13})([\.\d-]+)(.*)/
, min = Math.min, max = Math.max
, topWin = window
if(!iOS) {
startEvent = 'mousedown'
moveEvent = 'mousemove'
endEvent = 'mouseup'
}
else {
startEvent = 'touchstart'
moveEvent = 'touchmove'
endEvent = 'touchend'
}
setInterval(scrollFix, 500)
function scrollFix() {fixSubframes(topWin.frames)
function fixSubframes(wins) {for(var i = wins.length
function addListeners(win) {
try {
var doc = win.document
if(!doc.draggableframe) {
win.addEventListener('unload', resetFrame)
doc.draggableframe = true
doc.addEventListener(startEvent, touchStart)
doc.addEventListener(moveEvent, touchMove)
doc.addEventListener(endEvent, touchEnd)
}
fixSubframes(win.frames)
}
catch(e) {}
}
function resetFrame(e) {
var doc = e.target
, win = doc.defaultView
, iframe = win.frameElement
, style = getComputedStyle(iframe).transform
if(iframe===currentFrame) currentFrame = null
win.removeEventListener('unload', resetFrame)
doc.removeEventListener(startEvent, touchStart)
doc.removeEventListener(moveEvent, touchMove)
doc.removeEventListener(endEvent, touchEnd)
if(style !== 'none') {
style = style.replace(matrixRegex, '$1|$3|$4').split('|')
iframe.style.transform = style[0] + 0 + style[2]
}
else iframe.style.transform = null
iframe.style.WebkitClipPath = null
iframe.style.clipPath = null
delete doc.draggableiframe
}
function touchStart(e) {
var iframe, style, offset, coords
, touch = e.touches ? e.touches[0] : e
, elem = touch.target
, tag = elem.tagName
currentFrame = null
if(tag==='TEXTAREA' || tag==='SELECT' || tag==='HTML') return
for(
if(elem.scrollHeight > elem.clientHeight) {
style = getComputedStyle(elem).overflowY
if(style==='auto' || style==='scroll') return
}
}
elem = elem.ownerDocument.body
iframe = elem.ownerDocument.defaultView.frameElement
coords = getComputedViewportY(elem.clientHeight < iframe.clientHeight ? elem : iframe)
if(coords.elemTop >= coords.top && coords.elemBottom <= coords.bottom) return
style = getComputedStyle(iframe).transform
if(style !== 'none') {
style = style.replace(matrixRegex, '$1|$3|$4').split('|')
matrixPrefix = style[0]
matrixSuffix = style[2]
offset = parseFloat(style[1])
}
else {
matrixPrefix = 'matrix(1, 0, 0, 1, 0, '
matrixSuffix = ')'
offset = 0
}
translateY = offset
minY = min(0, offset - (coords.elemBottom - coords.bottom))
maxY = max(0, offset + (coords.top - coords.elemTop))
screenY = touch.screenY
currentFrame = iframe
}
function touchMove(e) {
var touch, style
if(currentFrame) {
touch = e.touches ? e.touches[0] : e
style = min(maxY, max(minY, translateY + (touch.screenY - screenY)))
if(style===translateY) return
e.preventDefault()
currentFrame.contentWindow.getSelection().removeAllRanges()
translateY = style
currentFrame.style.transform = matrixPrefix + style + matrixSuffix
style = 'inset(' + (-style) + 'px 0px ' + style + 'px 0px)'
currentFrame.style.WebkitClipPath = style
currentFrame.style.clipPath = style
screenY = touch.screenY
}
}
function touchEnd() {currentFrame = null
function getComputedViewportY(elem) {
var style, offset
, doc = elem.ownerDocument
, bod = doc.body
, elemTop = elem.getBoundingClientRect().top + elem.clientTop
, elemBottom = elem.clientHeight
, viewportTop = elemTop
, viewportBottom = elemBottom + elemTop
, position = getComputedStyle(elem).position
try {
while(true) {
if(elem === bod || position === 'fixed') {
if(doc.defaultView.frameElement) {
elem = doc.defaultView.frameElement
position = getComputedStyle(elem).position
offset = elem.getBoundingClientRect().top + elem.clientTop
viewportTop += offset
viewportBottom = min(viewportBottom + offset, elem.clientHeight + offset)
elemTop += offset
doc = elem.ownerDocument
bod = doc.body
continue
}
else break
}
else {
if(position === 'absolute') {
elem = elem.offsetParent
style = getComputedStyle(elem)
position = style.position
if(position === 'static') continue
}
else {
elem = elem.parentElement
style = getComputedStyle(elem)
position = style.position
}
if(style.overflowY !== 'visible') {
offset = elem.getBoundingClientRect().top + elem.clientTop
viewportTop = max(viewportTop, offset)
viewportBottom = min(viewportBottom, elem.clientHeight + offset)
}
}
}
}
catch(e) {}
return {
top: max(viewportTop, 0)
,bottom: min(viewportBottom, doc.defaultView.innerHeight)
,elemTop: elemTop
,elemBottom: elemBottom + elemTop
}
}
})()
}
})()
* jsfiddle为测试目的启用了鼠标支持。在生产站点上，您需要设置mouse = false。
