是否有任何跨浏览器方式在父框架内使用Javascript滚动具有超宽内容的IFrame的水平滚动条。此外,我需要它附加到鼠标滚轮事件。
回答(详情请查看Marcel Korpel文档)
var myIframe = document.getElementById("iframeWithWideContent");
myIframe.onload = function () {
var mouseWheelEvt = function (e) {
var event = e || window.event;
if(event.wheelDelta)
var d = 1;
else
var d = -1;
// the first is for Gecko, the second for Chrome/WebKit
var scrEl = this.parentNode || event.target.parentNode;
if (document.body.doScroll)
document.body.doScroll(event.wheelDelta>0?"left":"right");
else if ((event.wheelDelta || event.detail) > 0)
scrEl.scrollLeft -= d*60;
else
scrEl.scrollLeft += d*60;
event.preventDefault();
return false;
};
if ("onmousewheel" in this.contentWindow.document)
this.contentWindow.document.onmousewheel = mouseWheelEvt;
else
this.contentWindow.document.body.addEventListener("DOMMouseScroll", mouseWheelEvt, true);
};
答案 0 :(得分:1)
您的示例至少有两个问题:
if ("iframeWithWideContent" in document.body){
document.body.onmousewheel = mouseWheelEvt;
}else{
document.body.addEventListener("DOMMouseScroll", mouseWheelEvt);
}
您可以在此测试document.body中存在的iframeWithWideContent
,并依靠该条件使用…onmousewheel
或…addEventListener
。这些完全不相关。而且,addEventListener需要额外的论证。
作为您链接的the answer描述,Firefox不支持onmousewheel(无论如何都是非标准的),因此您应该检测该属性是否存在:
if ("onmousewheel" in document.body)
document.body.onmousewheel = mouseWheelEvt;
else
document.body.addEventListener("DOMMouseScroll", mouseWheelEvt, true);
万一你不知道,这是(或多或少)feature detection的正确方式(事实上,我应该在申请之前测试DOMMouseScroll是否可用)。< / p>
根据this answer,contentWindow
是iframe的窗口对象。
更新:我制作了另一个测试案例并让它在Firefox和Chrome中运行(它可能适用于其他基于WebKit的浏览器)。
iframescrolling.html:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title><iframe> horizontal scrolling test</title>
<style>
* { padding: 0; margin: 0; border: 0 }
#large { background: #aaa; height: 5000px; width: 5000px }
</style>
</head>
<body>
<iframe id="iframeWithWideContent" src="iframecontent.html" width="500" height="300"></iframe>
<div id="large"></div>
<script>
var myIframe = document.getElementById("iframeWithWideContent");
myIframe.onload = function () {
var mouseWheelEvt = function (e) {
var event = e || window.event;
// the first is for Gecko, the second for Chrome/WebKit;
var scrEl = this.parentNode || event.target.parentNode;
if(event.wheelDelta)
var d = 60;
else
var d = -60;
if (document.body.doScroll)
document.body.doScroll(event.wheelDelta>0?"left":"right");
else if ((event.wheelDelta || event.detail) > 0)
scrEl.scrollLeft -= d;
else
scrEl.scrollLeft += d;
event.preventDefault();
return false;
};
if ("onmousewheel" in this.contentWindow.document)
this.contentWindow.document.onmousewheel = mouseWheelEvt;
else
this.contentWindow.document.body.addEventListener("DOMMouseScroll", mouseWheelEvt, true);
};
</script>
</body>
</html>
iframecontent.html:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>iframe</title>
<style>
* { padding: 0; margin: 0; border: 0 }
#long { background: #ccc; height: 500px; width: 5000px }
</style>
</head>
<body>
<div id="long">long 5000px div</div>
</body>
</html>
我只在Firefox 3.6.3和Chromium 5.0.342.9中对此进行了测试,两者都在Linux上运行。为了防止Chrome中的错误(关于从其他域访问iframe或使用其他协议),您应该上传这些文件或使用本地测试服务器(localhost)。
还有一个注意事项:我非常怀疑这可以在每个(主要)浏览器中使用。至少它不符合(符合高标准的)Opera。
更新2:在进一步测试中,Firefox和Chrome中的滚动方向相反。我使用穆罕默德的建议相应调整了我的代码。
我也在IE 7中对此进行了测试,但是,尽管IE支持onmousewheel个事件,但它无法正常工作。在这一点上,我有点无聊,所以也许我会尝试再次将这个例子改编为IE。