2

可能であれば、iframe 内の要素をクリックして、レンダリングされたページで機能を実行させることはできますか?

例えば：

<div class="page">

    <iframe class="frame">[... the source will render: <div class="clickme"></div>...] 
    </iframe>

...その間、メイン ページに戻ります...

    <script>
          $(".clickme").click(function(){
                 alert('clicked');
           });
    </script>
</div>

また、ページの読み込み後にiframeのsrcが変更されることを忘れていました。これは障害になる可能性があります!

私にはうまくいかないようで、ここで適切な回答/質問が見つかりませんでした。ありがとう！

4

3 に答える 3

5

ユーザーが iframe 内のアイテムをクリックした結果、親で関数が起動する場合、親で呼び出さdoStuffれた関数があると仮定すると、次のように動作します。

window.top.doStuff();

もちろん、これには iframe のドメインが親ページのドメインと一致する必要があります。

クロスドメインにする必要がある場合はどうなりますか?

クロスドメイン通信が必要な場合は、HTML5 の postMessage 関数を使用して、親ページを iframe のリスナーとして登録し、iframe が親ページにメッセージを渡すことができるようにします。

親 HTML で、リスナーを登録します。

// register to listen for postMessage events
window.addEventListener("message", receiveMessage, false);  

// this is the callback handler to process the event
function receiveMessage(event)  
{  

  // you're responsible for your own security. Make sure requests are 
    // coming from domains you whitelist!
  if (event.origin !== "http://example.org:8080")  
    return;  

  if(event.data == "click!") {
      // do your stuff on the parent page here
  }
}

iframe HTML ページ:

// pass the string "click!" to the parent page, where the receiveMessage
 // handler will take action when it sees the message matches.
top.window.postMessage("click!", targetOrigin);

詳細については、 window.postMessageを参照してください。

于 2012-05-20T04:09:52.387 に答える
2

content() を使用して iframe の要素にアクセスできます

$('.frame').contents().find('.clickme').each(function(){
   $(this).click(function(){ //this is .clickme
     //enter code here
   })
});

iframe の src が別のドメインからのものである場合、アクセスが拒否されることに注意してください。

于 2012-05-20T03:52:43.213 に答える
1

Iframeで関数を呼び出すことができます

window.frames['iframeName'].yourFunction();

そしてiframeで

    <script>
              $(".clickme").click(function(){
                      yourFunction();
               });

             function yourFunction(){
              alert('clicked');
             }
   </script>
于 2012-05-20T03:47:09.790 に答える