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
