Javascript - Event Propagation (iframe to enclosed html)

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Wendi
    #1

    Javascript - Event Propagation (iframe to enclosed html)

    If i have an iframe from within an HMTL document:

    Iframe.htm:
    ------------------------------
    <html>
    <head>
    <title>Iframe.h tm</title>
    </head>
    <body>
    <iframe src="sample.htm "></iframe>
    </body>
    </html>

    And this iframe loads the src=Sample.htm below:

    Sample.htm
    -------------------------------
    <html>
    <head>
    <title>Sample.h tm</title>
    <script language="JavaS cript">
    function fireClickFuncti ons(){
    alert('do lots of stuff');
    }
    </script>
    </head>
    <body>
    <b onClick="fireCl ickFunctions(); ">CLICK ME</b>
    </body>
    </html>

    How can i capture an onClick event from within the calling iframe document
    (not
    using a cookie or something)? Any ideas?

    Wendi Turner
    wenditurner@ear thlink.net


    Tags: None
    • Stephen Chalmers
      #2
      Re: Javascript - Event Propagation (iframe to enclosed html)

      "Wendi" <wenditurner@ea rthlink.net> wrote in message
      news:1e235dad13 e22a971a0309909 9b1587f@localho st.talkaboutpro gramming.com...
      [color=blue]
      > How can i capture an onClick event from within the calling iframe document
      > (not
      > using a cookie or something)? Any ideas?
      >
      > Wendi Turner
      > wenditurner@ear thlink.net
      >[/color]

      It still isn't totally clear what you're asking.
      I assume you want an onclick event in the parent document to call a function
      coded in the iframe's document (sample.htm), and you want the code that
      instigates this action to be within the latter.

      If so, say you created a link in the parent document (Iframe.htm) like:

      <A HREF='#' id='callFrameFu nc' >Whatever</A> (or any element with an onclick
      event)

      Then in sample.htm you would have:

      <SCRIPT>
      parent.document .getElementById ('callFrameFunc ').onclick=fire ClickFunctions;
      </SCRIPT>

      Alternatively you could simply use the element's onclick event to call a
      function in the iframe (sample.htm)

      <A HREF='#'
      onclick="if(win dow.frames)wind ow.frames[0].fireClickFunct ions();return false">Do
      it in the iframe</A>

      If you wanted it the other way round (click in iframe calls function in parent),
      the syntax in the parent document would be something like:

      window.frames[0].document.getEl ementById('myEl ement').onclick =localFunction;

      --
      Stephen Chalmers





        Comment

        • Thomas 'PointedEars' Lahn
          #3
          Re: Javascript - Event Propagation (iframe to enclosed html)

          Wendi wrote:
          [color=blue]
          > If i have an iframe from within an HMTL document:
          > [...]
          > And this iframe loads the src=Sample.htm below:
          > [...]
          > How can i capture an onClick event from within the calling iframe
          > document (not using a cookie or something)? Any ideas?[/color]

          The "click" event ("onclick" is merely the name of its intrinsic handler)
          bubbles by default[1]. If it occurs in the iFrame, it bubbles up to the
          container object of that iFrame (usually a Window object), not any further
          (the event does not "know" that it occurs in a document that is the resource
          of a container embedded in another document).

          So if you do not want to change the source code of the iFrame document, the
          solution is to attach an event listener to the window object for "click"
          events, in the "parent" document. The following should work (untested):

          <!-- required for registerEvent(. ..) -->
          <script
          type="text/javascript"
          src="http://www.stud.tu-ilmenau.de/~thla-in/scripts/dhtml.js"[color=blue]
          ></script>[/color]

          <iframe
          ...
          onload="registe rEvent(this, "click", myFunction);">

          where "anyFunctio n" is a reference to a function you have coded to
          do whatever you want it to. That can be e.g. the function's name,
          the result of a Function() constructor call, a function statement
          or a function operation in particular, depending on the versions of
          J(ava)Script you want to support (ask Google Groups for details).

          Of course all this is possible *only* if you can follow the Same
          Origin Policy[2].

          If the above works, please save the dhtml.js script file to your
          webspace (to save me traffic) and take heed of the license agreement.


          HTH

          PointedEars
          ___________
          [1] <http://www.w3.org/TR/DOM-Level-2-Events/events.html#Eve nts-flow-bubbling>
          <http://www.w3.org/TR/DOM-Level-2-Events/events.html#Eve nts-eventgroupings-mouseevents>
          [2]
          <http://www.mozilla.org/projects/security/components/same-origin.html>

            Comment

            • Thomas 'PointedEars' Lahn
              #4
              Re: Javascript - Event Propagation (iframe to enclosed html)

              (Since it has been quite a time since the original posting (OP): posted &
              mailed; usually it is impolite to ask for e-mail responses (only) in an
              OP -- nobody wants to be subscribed to a newsgroup that contains only
              questions, no answers; if possible, please post replies to this posting
              to the newsgroup [I am including the Message-ID so the thread can be
              easily found].)

              Wendi wrote in
              <1e235dad13e22a 971a03099099b15 87f@localhost.t alkaboutprogram ming.com>:

              (localhost.talk aboutprogrammin g.com resolves to 127.0.0.1 which is localhost
              [TCP/IP loopback device]. Thus the above is not a valid message ID since it
              lacks a Fully Qualified Domain Name (FQDN). This is a bug in the supposedly
              HTTP-to-NNTP gateway used here. The makers of it should be informed about
              that issue to get it fixed ASAP.)
              [color=blue]
              > If i have an iframe from within an HMTL document:
              > [...]>
              > <iframe src="sample.htm "></iframe>
              > [...]
              >
              > And this iframe loads the src=Sample.htm below:
              >
              > Sample.htm
              > -------------------------------
              > <html>
              > <head>
              > <title>Sample.h tm</title>
              > <script language="JavaS cript">[/color]

              This should read

              <script type="text/javascript">
              [color=blue]
              > function fireClickFuncti ons(){
              > alert('do lots of stuff');
              > }
              > </script>
              > </head>
              > <body>
              > <b onClick="fireCl ickFunctions(); ">CLICK ME</b>[/color]

              Are you sure the "b"(old) element is the correct
              element to attach the click event listener to?
              [color=blue]
              > </body>
              > </html>
              >
              > How can i capture an onClick event from within the calling iframe document
              > (not using a cookie or something)? Any ideas?[/color]

              I do not understand. You already do that.


              PointedEars

                Comment

                • i-Safire
                  #5
                  Re: Javascript - Event Propagation (iframe to enclosed html)

                  Just a reminder, we can catch the onClick event, but the original
                  onclick on the document (if there is any) will be overwritten

                    Comment

                    • Thomas 'PointedEars' Lahn
                      #6
                      Re: Javascript - Event Propagation (iframe to enclosed html)

                      i-Safire wrote:
                      [color=blue]
                      > Just a reminder,[/color]

                      For what?
                      [color=blue]
                      > we can catch the onClick event,[/color]

                      So where exactly is the problem?
                      [color=blue]
                      > but the original onclick on the document (if there is any) will
                      > be overwritten[/color]

                      I still do not understand. Overwritten by what with what?
                      Without further information, e.g. having a look at your code
                      (URL?), it is impossible to say what is going wrong here.


                      PointedEars

                        Comment

                        • i-Safire
                          #7
                          Re: Javascript - Event Propagation (iframe to enclosed html)

                          The following line in the parent document,
                          <iframe ... onload="registe rEvent(this, "click", myFunction);">
                          will overwrite
                          1) the "onload" event handler in the "sample.htm " document; also,
                          2) the "onClick" event handler in the sample.htm document.

                          (Ref:Phoenix398 017)

                            Comment

                            Previous template Next
                            Working...