如何从父框架滚动iFrame中的水平滚动条？

是否有任何跨浏览器的方式来滚动IFrame的水平滚动条与超级宽内容与父框架内的Javascript。此外，我需要将它附加到鼠标滚轮事件。如何从父框架滚动iFrame中的水平滚动条？

回答（请看详细内容马塞尔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); 
};

来源

2010-05-25 Mohammad

至少有两件事情错了你的例子：

if ("iframeWithWideContent" in document.body){ 
    document.body.onmousewheel = mouseWheelEvt; 
}else{ 
    document.body.addEventListener("DOMMouseScroll", mouseWheelEvt); 
}

这里您测试iframeWithWideContent存在在document.body中，并且您依赖该条件使用…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在应用之前可用，我应该测试它）。

根据this answer,contentWindow是iframe的窗口对象。

更新：我做了另一个测试用例，并在Firefox和Chrome中使用它（它可能也适用于其他基于WebKit的浏览器）。

iframescrolling.html：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=utf-8> 
    <title>&lt;iframe&gt; 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和铬5.0.342.9，在Linux上都运行测试这一点。为了防止Chrome中的错误（关于访问来自不同域或使用不同协议的iframe），您应该上传这些文件或使用本地测试服务器（本地主机）。

另一个方面说明：我非常怀疑这可以在每个（主要）浏览器中使用。至少它不在（符合高度标准的）Opera中。

更新2：在进一步测试中，Firefox和Chrome的滚动方向相反。我使用穆罕默德的建议相应地调整了我的代码。

我也在IE7中测试过这个，但是，虽然IE支持onmousewheel事件，但它不能正常工作。在这一点上，我有点无聊，所以也许我会尝试再次将这个例子改编成IE。

来源

2010-05-25 11:04:13

Marcel Korpel，你是天才！这完美的工作，我们可以原谅的歌剧在这段时间：）我已经添加了一个小的更新到您的代码，它修复了Firefox和Chrome浏览器之间的方向（因为滚动在相反的方向移动相同的鼠标滚轮运动）。我已将更新后的代码添加到问题中。请更新您的答案，我会将其标记为正确！：） – Mohammad 2010-05-26 12:23:04

如何从父框架滚动iFrame中的水平滚动条？

回答

相关问题