如何从父框架滚动iFrame中的水平滚动条？ [英] How to scroll the horizontal scrollbar in an iFrame from the parent frame?
问题描述
是否有任何跨浏览器方式在父框架内使用Javascript滚动具有超宽内容的IFrame的水平滚动条。此外，我需要它附加到鼠标滚轮事件。
Is there any cross browser way to scroll the horizontal scroll bar of an IFrame with super wide content with Javascript inside the parent frame. Also I need it to be attached to the mouse wheel event.
回答（详情请参阅下面的Marcel Korpel文档）
Answer (please look at Marcel Korpel documentation bellow for details)
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);
};
推荐答案
您的示例至少有两个问题：
There are at least two things wrong with your example:
if ("iframeWithWideContent" in document.body){
document.body.onmousewheel = mouseWheelEvt;
}else{
document.body.addEventListener("DOMMouseScroll", mouseWheelEvt);
}
在这里测试 iframeWithWideContent 存在于document.body中并且您依赖该条件来使用 ... onmousewheel 或 ... addEventListener 。这些完全不相关。此外， addEventListener 需要额外的参数。
Here you test for iframeWithWideContent being present in document.body and you rely on that condition to use either …onmousewheel or …addEventListener. These are completely unrelated. Moreover, addEventListener requires an extra argument.
您链接到的答案描述，Firefox不支持onmousewheel（无论如何它都是非标准的），因此您应检测该属性是否存在：
As the answer you link to describes, Firefox doesn't support onmousewheel (it's non-standard anyway), so you should detect whether that property is present or not:
if ("onmousewheel" in document.body)
document.body.onmousewheel = mouseWheelEvt;
else
document.body.addEventListener("DOMMouseScroll", mouseWheelEvt, true);
万一你不知道，这是（或多或少）正确的方式< a href =http://www.nczonline.net/blog/2009/12/29/feature-detection-is-not-browser-detection/ =nofollow noreferrer>特征检测（在事实上，我应该测试一下 DOMMouseScroll 在申请之前是否可用。）
Just in case you didn't know, this is (more or less) the right way of feature detection (in fact, I should have tested if DOMMouseScroll was available before applying it).
根据此答案， contentWindow 是iframe的窗口对象。
According to this answer, contentWindow is the iframe's window object.
更新：我制作了另一个测试用例并让它在Firefox和Chrome中运行（它也适用于其他基于WebKit的浏览器）。
Update: I made another test case and got it working in Firefox and Chrome (it probably works in other WebKit-based browsers, too).
iframescrolling.html ：
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：
And 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）。
I only tested this in Firefox 3.6.3 and Chromium 5.0.342.9, both running on Linux. To prevent errors in Chrome (about accessing iframes from a different domain or using a different protocol), you should upload these files or use a local test server (localhost).
还有一个注意事项：我非常怀疑这可以在每个（主要）浏览器中使用。至少它不符合（符合高标准的）Opera。
One more side note: I highly doubt this will work in every (major) browser. At least it doesn't in (the highly standards compliant) Opera.
Update 2：进一步测试Firefox和Chrome中的滚动方向相反。我使用Mohammad的建议相应地调整了我的代码。
Update 2: On further testing the scrolling directions in Firefox and Chrome were opposite. I adjusted my code accordingly, using Mohammad's suggestions.
我也在IE 7中对此进行了测试，但是，虽然IE支持 onmousewheel 事件，它无法正常工作。在这一点上我有点无聊，所以也许我会尝试再次将这个例子改编为IE。
I also tested this in IE 7, but, although IE supports onmousewheel events, it didn't work properly. At this point I'm a little bored, so maybe I'll try to adapt the example to IE another time.
这篇关于如何从父框架滚动iFrame中的水平滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
