如何從父框架滾動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中的水平滾動條？

回答

相關問題