1

親フレーム内に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);
};
4

1 に答える 1

1

あなたの例には少なくとも2つの問題があります。

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

ここでは、document.bodyに存在するかどうかをテストしiframeWithWideContent、その条件に依存して…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>

私はこれをFirefox3.6.3とChromium5.0.342.9でのみテストしました。どちらもLinuxで実行されています。Chromeでのエラー（別のドメインからのiframeへのアクセスまたは別のプロトコルの使用に関する）を防ぐには、これらのファイルをアップロードするか、ローカルテストサーバー（localhost）を使用する必要があります。

もう1つの補足：これがすべての（主要な）ブラウザーで機能するかどうかは非常に疑わしいです。少なくとも、（高度に標準に準拠した）Operaには含まれていません。

更新2：さらにテストすると、FirefoxとChromeのスクロール方向は反対でした。Mohammadの提案を使用して、それに応じてコードを調整しました。

これもIE7でテストしましたが、IEはマウスホイールイベントをサポートしていますが、正しく機能しませんでした。この時点で私は少し退屈しているので、別の機会に例をIEに適合させようとするかもしれません。

于 2010-05-25T11:04:13.623 に答える