jQuery addEventListener not finding function

Question

I have a page that listens to messages from a page on another domain (via an iframe) using window.postMessage. My previous code works:

<script type="text/javascript">
    window.addEventListener("message", receiveMessage, false);

    function receiveMessage(event) {
      if (event.data == "scrollTop"){
          window.scrollTo(0,0);
      }
    }
</script>

Even though the above code works, I need to restrict it from executing except when the .postMessage is from a specific domain (http://origindomain.com), so I changed the above code to the following:

<script type="text/javascript">
    window.addEventListener("message", receiveMessage, false);

    $(function () {
        $.receiveMessage(function(event){  
            if (event.data == "scrollTop") {
                window.scrollTo(0, 0);
            }

            // An optional origin URL (Ignored where window.postMessage is unsupported).
            }, 'http://origindomain.com' );
        });
    });
</script>

This second approach doesn't work. The error output in Firebug console is:

ReferenceError: receiveMessage is not defined
window.addEventListener("message", receiveMessage, false);

jQuery is not my first language, so if the solution is obvious I apologize. Why is the receiveMessage() callback undefined?

well.. you never defined it. You defined a $.receiveMessage, but not a receiveMessage. — user400654
– user400654, Commented Jan 23, 2014 at 18:58
You're specifying the callback function receiveMessage by name, but you have not defined such a function. — Madbreaks
– Madbreaks, Commented Jan 23, 2014 at 18:59
You are declaring receiveMessage on jQuery document ready handler, while you are attaching it to the window event listener outside of that scope — Daniel Conde Marin
– Daniel Conde Marin, Commented Jan 23, 2014 at 19:03
Daniel, your comment taught me something. Thank you for spelling it out! — rwkiii
– rwkiii, Commented Jan 23, 2014 at 19:06

user400654 · Accepted Answer · 2014-01-23 19:02:11Z

4

You never defined receiveMessage, instead you tried to use $.receiveMessage. You're miss-using the jquery methods, you don't always need to wait for the dom to be ready. You also don't need jquery at all for this.

<script type="text/javascript">
    window.addEventListener("message", receiveMessage, false);

    //$(function () {
    function receiveMessage(event){  
        if (event.origin == "http://origindomain.com" && event.data == "scrollTop") {
            window.scrollTo(0, 0);
        }
    }
    //});
</script>

If you installed a jQuery plugin that defines $.receiveMessage, then you likely didn't need the first line at all because the plugin should take care of that. But, i'm not sure why a plugin would be needed for this functionality.

answered Jan 23, 2014 at 19:02

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

rwkiii Over a year ago

Kevin, your code works and Daniel's comment above helps me understand why mine didn't. Thank you.

Daniel Conde Marin Over a year ago

@Kevin is right, nothing in this code needs to be on document ready, so this way is better in terms of performance!

rwkiii Over a year ago

Kevin, I am using a plugin from benalman.com/projects/jquery-postmessage-plugin - it would be nice to eliminate the dependency if it isn't needed. As I said, Neither jQuery nor Javascript are my first language. Perhaps this plugin was recommended to support older browsers?

rwkiii Over a year ago

postMessage is an HTML5 function, I believe. The plugin is used for browsers that do not support HTML5. I think this is correct...

user400654 Over a year ago

But, it's supported all the way back to IE8. you only need it if you need to support IE6/7 and older versions of opera. I generally would agree with adding backwards IE support, but for me that stops at IE8 since IE7 has fallen well below 1%.

Collectives™ on Stack Overflow

jQuery addEventListener not finding function

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related