2

HTML+CSS+JQueryでスマートフォンのスワイプナビゲーションをモックアップしようとしています。HTML ページを含むいくつかの iframe を設定してから、ナビゲーション メニューからそれらの間をスワイプします。それはいいのですが、スワイプを iframe 内のボタン (例の「メニューに戻る」ボタン) から有効にしたいです。

これは私がこれまでに行ったことです: 例

スワイプ効果を作成するために使用したコードは次のとおりです。

JQuery:

$(document).ready(function() {
     $('#slide1_controls').on('click', 'button', function(){
         $("#slide1_images").css("transform","translateX("+($(this).index()-2) * -475+"px)"); 
     });
 });

そのようなことはできますが、iframe 内のボタンを使用できますか?

注:各ページには、内側のスワイプ効果もあります。これは、iframe ではなく div 間でスワイプすることによって実装されるため、指定された iframe を div に変更してもおそらく機能しません。

4

1 に答える 1

1

書いたものを関数に変換し、iframe 内からその関数を呼び出すことができます。

//// on parent page
function slidePage(){
    // slide logic goes here
}

//// inside iframe
$('#slide-control').on('click', function(){
    window.parent.slidePage()
});

これが機能するには、iframe とサイトのドメインが同じである必要があることに注意してください。

于 2013-05-18T20:26:48.907 に答える