この記事について
| 環境 | jQuery + iframe（iPhone safari） |
|---|---|
| 目的 | iframe内のタップでイベントを発火させる |
| 結果 | contents().find() で iframe 内の要素にイベントを付ける |
つまずきポイント要約
- iframe要素自体にはタッチ・クリックイベントが発行されない
- iPhoneのsafariは body に付けた click が無効。div などに付ける
sample.html
<!DOCTYPE HTML>
<html>
<head>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/test.js" type="text/javascript"></script>
</head>
<body>
<iframe src="iframe_test.html" id="iframe"></iframe>
</body>
</html>iframe_test.html
<html>
<head>
</head>
<body>
<div>
インラインフレームの内容
</div>
</body>
</html>test.js
//iframeの内容が完全に読み込まれたら
$(window).on("load", function(e){
//iframeにはタッチやクリックイベントは発行されないためこういう記述
$("#iframe").contents().find("body").on("touchstart", function(e){
alert("タップされた");
});
});ただ、これだとiPhoneのsafariだと「click」うまく動作しない。「touchstart」なら動く。理由はこれだと思う。
iPhoneのsafariだとbody要素に登録したclickは無効なのでdivなどに登録先を変える。
$("#iframe").contents().find("body").on("click", function(e){
alert("タップされた");
});↓↓↓↓↓↓↓↓↓
$("#iframe").contents().find("div").on("click", function(e){
alert("タップされた");
});iframe内の部品がクリックされたイベントを起こす場合は↓
■sample.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<title>Test</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#hoge").contents().find("#fuga").bind("click", function() {
alert("hogehoge");
});
})
</script>
<iframe id="hoge" src="hoge.html"></iframe>■hoge.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<title>hoge.html</title>
<button id="fuga">PUSH!!</button>参考：http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1036893315
