Bind Control to Content in Iframe

Question

Basically, I have 2 php pages which are a.php and b.php. What I trying to achieve is to bind a jquery function into content in b.php.

The jquery function will used to trigger popup in a.php. However, I cannot get it worked. Does any one know what mistake I did?

a.php

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title></title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
      <script>
         $(function () {
         var abc = function(){
         alert("");
         }
         $("iframe").contents().find("a.toggle").click(abc);
         });
      </script>
      <meta http-equiv="cache-control" content="no-cache">
      <meta http-equiv="pragma" content="no-cache">
   </head>
   <body>
      <form method="post" action="">
         <div class="container" id="">
            <div class="resize main" id="" style="height: 600px;">
               <iframe id="" frameborder="0" scrolling="no" src="b.php" style="width: 1022px; border: none; height: 600px;">
               </iframe>
            </div>
         </div>
      </form>
   </body>
</html>

b.php

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title></title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta http-equiv="cache-control" content="no-cache">
      <meta http-equiv="pragma" content="no-cache">
   </head>
   <body>
      <form method="post" action="b.php">
         <div class="titlewrap">
            <div id="" class="pagetitle">
               <a class="toggle" href="#"><span class="icon slider-close">aa</span></a>
            </div>
         </div>
      </form>
   </body>
</html>

Take a look at this: http://stackoverflow.com/questions/1655862/attach-click-handler-even-on-element-inside-iframe-with-jquery. Also your question has nothing to do with PHP. — Jeremy Harris, Oct 15 '13 at 15:34

Buchow_PHP · Accepted Answer · 2013-10-15T15:52:48.200

I believe it's because your javascript function is being executed before the iframe has loaded. If you change

   $("iframe").contents().find("a.toggle").click(abc);

to

 setTimeout( function(){ $("iframe").contents().find("a.toggle").click(abc); }, 2000);

then your code works.

So to fix your problem I would suggest moving the binding function to b.php and calling it when the document.ready event is fired.

b.php

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title></title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta http-equiv="cache-control" content="no-cache">
      <meta http-equiv="pragma" content="no-cache">
      <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
      <script>
       $(document).ready(
        function()
        {
           var abc = function(){
           alert("");
           }
           $('.toggle').on('click', abc);
        }
       );
      </script>
   </head>
   <body>
      <form method="post" action="b.php">
         <div class="titlewrap">
            <div id="" class="pagetitle">
               <a class="toggle" href="#"><span class="icon slider-close">aa</span></a>
            </div>
         </div>
      </form>
   </body>
</html>

Bind Control to Content in Iframe

1 Answers1