Как прокрутить горизонтальную полосу прокрутки в iFrame от родительского кадра? - PullRequest
Новая
       26

Как прокрутить горизонтальную полосу прокрутки в iFrame от родительского кадра?

1 голос
/ 25 мая 2010

Есть ли кросс-браузерный способ прокрутки горизонтальной полосы прокрутки IFrame с супершироким контентом с Javascript внутри родительского фрейма. Также мне нужно, чтобы он был прикреплен к событию колеса мыши.

Ответ (см. Подробности в документации Марселя Корпеля ниже) 

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);
};

1 Ответ

1 голос
/ 25 мая 2010

В вашем примере как минимум две вещи не так: 

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

Здесь вы проверяете наличие iframeWithWideContent в document.body, и вы полагаетесь на это условие, чтобы использовать либо …onmousewheel, либо …addEventListener. Это совершенно не связано. Более того, addEventListener требует дополнительного аргумента.

Поскольку ответ , на который вы ссылаетесь, Firefox не поддерживает onmousewheel (в любом случае, он нестандартный), поэтому вы должны определить, присутствует ли это свойство: 

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

На всякий случай, если вы не знали, это (более или менее) правильный способ обнаружения функции (на самом деле, я должен был проверить, был ли DOMMouseScroll доступным ранее применяя его).

Согласно этот ответ , 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 и Chromium 5.0.342.9, оба работают в Linux. Чтобы избежать ошибок в Chrome (о доступе к фреймам из другого домена или по другому протоколу), вы должны загрузить эти файлы или использовать локальный тестовый сервер (localhost).

Еще одно замечание: я очень сомневаюсь, что это будет работать во всех (основных) браузерах. По крайней мере, это не так (в соответствии с высокими стандартами) Opera.

Обновление 2: При дальнейшем тестировании направления прокрутки в Firefox и Chrome были противоположными. Я изменил свой код соответственно, используя предложения Мухаммеда.

Я также проверял это в IE 7, но, хотя IE поддерживает события onmousewheel , он не работал должным образом. На данный момент мне немного скучно, поэтому, возможно, я попытаюсь адаптировать пример для IE в другой раз.

...