17

にクリックイベントを追加したいiframe。この例を使用して、これを得ました： 

$(document).ready(function () {
   $('#left').bind('click', function(event) { alert('test'); });
});

<iframe src="left.html" id="left">
</iframe>

しかし、残念ながら何も起こりません。
別の要素 (ボタンなど) でテストすると、次のように動作します。

<input type="button" id="left" value="test">
4

5 に答える 5

31

クリックを iframe コンテンツに添付できます。

$('iframe').load(function(){
  $(this).contents().find("body").on('click', function(event) { alert('test'); });
});

注: これは、両方のページが同じドメインにある場合にのみ機能します。

ライブデモ: http://jsfiddle.net/4HQc4/

于 2013-02-26T03:02:01.460 に答える
21

2 つのソリューション:

  1. 要素:afterでの使用.iframeWrapper
  2. pointer-events:none;iframe の 1 つを使用する

1.使用:after

非常に簡単です。iframe ラッパーには、より高い z-index:afterを持つ (透明な) 疑似要素があります。これは、ラッパーがクリックを登録するのに役立ちます。

jQuery(function ($) { // DOM ready
  
   $('.iframeWrapper').on('click', function(e) {
     e.preventDefault();
     alert('test');
   });
  
});
.iframeWrapper{
  display:inline-block;
  position:relative;
}
.iframeWrapper:after{ /* I have higher Z-index so I can catch the click! Yey */
  content:"";
  position:absolute;
  z-index:1;
  width:100%;
  height:100%;
  left:0;
  top:0;
}

.iframeWrapper iframe{
  vertical-align:top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="iframeWrapper">
  <iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>

2.使用pointer-events:none;

外部リソースからの iframe の外部からのクリックは処理できません(iframe がドメイン内にない場合)。その関数は、 iframe ホスティングページ内からではなく、「iframe に呼び出された」
ページ 内でのみ作成できます。

やり方：

  • あなたはあなたをdivにラップすることができますiframe
  • iframeCSSを使用してクリックを「通過」させますpointer-events:none;
  • jQueryラッピングDIV（iframe親要素）でクリックをターゲットにします

jQuery(function ($) { // DOM ready
  
   $('.iframeWrapper').on('click', function(e) {
     e.preventDefault();
     alert('test');
   });
  
});
.iframeWrapper{
  display:inline-block;
  position:relative;
}

.iframeWrapper iframe{
  vertical-align:top;
  pointer-events: none; /* let any clicks go trough me */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="iframeWrapper">
  <iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>

ノート ベネ:

  • クリックは iframe 要素によって登録されないため、ユースケースは次のようになります。つまり、iframe をクリックしてフルスクリーンに拡大したい場合....など...
  • また（@Christopheから親切に提案されました）IE8はブラインドpointer-eventsです：\
于 2013-02-26T02:19:17.750 に答える
1

私はそれを機能させましたが、ホストにアップロードした後でのみです。localhostもうまくいくと思います。

アウター

<html>
   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function() {
            var myFrame = document.getElementById("myFrame");
            $(myFrame.contentWindow.document).find("div").on("click", function () { alert("clicked"); });
        });
    </script>
    <body>
        <iframe id="myFrame" src="inner.htm"></iframe>
    </body>
</html>

インナー

<html>
    <head>
        <style>
            div {
                padding:2px;
                border:1px solid black;
                display:inline-block;
            }
        </style>
    </head>
    <body>
        <div>Click Me</div>
    </body>
</html>
于 2013-02-26T02:58:42.373 に答える
0 
$(document).ready(function () {
 $('#left').click(function(event) { alert('test'); });
});

<iframe src="left.html" id="left">Your Browser Does Not Support iframes</iframe>

スクリプトは完全にiframeから実行する必要があります。phpなど、コンテンツを呼び出す別の方法をお勧めします。

iframeは面倒な価値はありません。

于 2013-02-26T02:32:17.017 に答える
0

実際の問題は、クリックイベントがiframeのDOMにバインドされず、bind（）が非推奨になったことです。これを使用.on()して、イベントをバインドします。次のコードを試してみると、iframeの境界線をクリックしてアラートを受け取ることができます。

$('#left').on('click', function(event) { alert('test'); });

その問題のデモ

それで、それを成し遂げる方法は？

どのようにすべきかは、iframeページで関数を作成し、そのiframeページからその関数を呼び出すことです。

于 2013-02-26T02:35:39.083 に答える