5

Hammer.js [jQuery プラグイン バージョン] を使用してシンプルなタッチ ジェスチャを提供しています。すべて正常に動作しますが、...

一部のページでは<iframe>、Youtube ビデオを表示する必要があります。ジェスチャが 内で開始されると<iframe>、次のページをロードする JavaScript は実行されません。これは、コンテキストが で<iframe>あり、ページの残りの部分ではないためです。ジェスチャがページの他の場所で開始された場合 (たとえ で終了していても<iframe>)、次のページが適切に読み込まれます。

私が望んでいるのは、ジェスチャがウィンドウ内のどこでも認識され、iframe の影響を受けないようにすることです。

私はかなりの量のグーグルを行ってきましたが、まだ実用的な解決策を思い付いていません.

私のHammer JSコードは次のとおりです。

var hammertime = Hammer('html').on("swipeleft", function(event) {
  document.location = "http://www.example.com/";
});

そして、これが標準の YouTube<iframe>コードです。

<iframe width="100%" src="http://www.youtube.com/embed/Gh5XWWXHVQk?rel=0" frameborder="0" allowfullscreen></iframe>

私はJSの初心者でもあります。

あなたが与えることができるどんな助けも大歓迎です.

ライアン

4

1 に答える 1

5

同様の要件があり、私がしたことは、<body> 次のようにスワイプ イベントを iframe に添付することでした。

// Get <iFrame>
var iframe = document.getElementById('iframeElement');

iframe.onload = function () {
    // Once content is available, get body
    var iframeBody = iframe.contentWindow.document.body;

    // Register gestures as normal
    Hammer(iframeBody).on("swipeleft", function (event) {
        // Dosomething
        SwipeLeft();
    });
}

onload により、ドキュメントの読み込みが完了し、必要な要素がバインディングに使用できるようになります。

これで、iframe 内の任意の場所で左にスワイプすると SwipeLeft() がトリガーされます。これをメイン ドキュメントのバインディングと組み合わせて、「全画面」スワイプを実現できます。

于 2014-07-17T12:11:47.267 に答える