JSFiddle wrap in onLoad?

brooklynsweb picture brooklynsweb · Oct 6, 2013 · Viewed 10.8k times · Source

I'm trying to understand how JSFiddle 'wraps' code in 'onLoad' based on this description: [1]: http://doc.jsfiddle.net/basic/introduction.html#javascript. I've seen onLoad being used in the HTML's BODY tag to load function(s). So does JSF (behind the scenes) wrap every call and every function I create int its JS window? AKA:

onLoad = "myfunc1(),myfunc2,alert(1);" 

If so then when I select jQuery as a framework, should I avoid using this format:

 $(document).ready(function(){
     myfunc1{(...)}
     myfunc1{(...)}
     ...

Apologize in advance if an armature question.

Answer

Joe picture Joe · Oct 6, 2013

They put all your JS inside <script> tags with the onLoad event code wrapped around it.

For example, if you choose to include jQuery and onLoad then this is what jsfiddle will use:

<script type="text/javascript">
    //<![CDATA[
        $(window).load(function(){ /* your js here */ });
    //]]>
</script>

If you don't include a library then they use:

<script type="text/javascript">
    //<![CDATA[
        window.onload=function(){ /* your js here */ }
    //]]>
</script>

I presume they also use other library specific load events depending on what you choose to include.

Using $(document).ready(function(){ }); isn't required when running your code in a fiddle.

Note: for a good explanation of what CDATA is take a look at this answer - https://stackoverflow.com/a/7092306/2287470