Referencing an image from a javascript file, both inside a static resource

Question

Inside a Visualforce page, I have a static resource (MyResource.zip) which contains the following:

• scripts/Script.js
• img/iconoTP.gif

I'm using the Chrome notifications API to show desktop notifications of events in this page.

The following code is inside script.js:

function notify(thetitle, thebody) {
  if (!Notification) {
    return;
  }

  if (Notification.permission !== "granted")
    Notification.requestPermission();
  else {
    var notification = new Notification(thetitle, {
      icon: URLFOR($Resource.MyResource,'img/iconoTP.gif'),
      body: thebody,
    });
  }
}

And after calling the notify function, the line referencing the static resource throws an error because URLFOR isn't defined.

Is this possible in any way or should I upload my image in a different way? (i.e. not inside an static resource but as a document).

Note: this js file is correctly referenced in the VF page.

Answer 1

Found this on the Salesforce Developer forums. Maybe it will help you.

Do you want a quick (and a little bit ugly) solution ? define a global js variable with the path from the visualforce page :

<script> var globalStaticResourcePath = '{!URLFOR($Resource.thenameofyourzipfile)}'; </script>

and inside the js, every time that you are going to put the img url , add the global url var, example:

(inside script.js that is in the zip file) var imgpath = globalStaticResourcePath+'image.jpg';

Answer 2

To expand a little bit on the answer from Doug, I think this can be done in way that seems like much less of a hack. I have frequently used a similar pattern to pass information such as static resource urls, object describe information, or anything else available in a visualforce global variable to a javascript file.

To make this more robust, you will want to add these items to a namespace object. This prevents conflicts with someone else re-defining the variable globalStaticResourcePath. This would look like:

Visualforce

<script> 

  // Declare your namespace with an anonymous function. Replace "myNs" in
  //   this code with whatever your namespace is. If you don't have one
  //   you can just make one up. Just don't use anything Salesforce already
  //   uses like "sfdc", "sfone", "force", etc.
  (function(myNs, undefined) {

    // Declare your custom $Resource object only if it is not already
    //  declared.
    myNs.$Resource = myNs.$Resource || {};

    // Add any resources you want to the object
    myNs.$Resource.MyResource = '{!URLFOR($Resource.MyResource)}';
    myNs.$Resource.OtherResource = '{!URLFOR($Resource.OtherResource)}';


    //OPTIONAL: Add a helper function for getting resource urls
    myNs.getResourceUrl = function(resourceName, filePath) {
      var baseResourceUrl = myNs.$Resource[resourceName];

      // Throw an error if you get a resource that does not exist
      if(!baseResourceUrl) {
        throw 'The static resource ' + resourceName + ' does not exist or has not been added to the $Resource map.';
      }

      var url = baseResourceUrl;

      // If we have a file path, append it.
      if(filePath) {
        url = url + filePath;
      }

      // Return the resource url
      return url;
    };

  }(window.myNs = window.myNs || {}));
</script>

Javascript

// Use your function or you could directly reference myNs.$Resource
var myImageUrl = myNs.getResourceUrl('MyResource', '/img/file.png');
var myResourceUrl = myNs.getResourceUrl('MyResource');
var otherResourceUrl = myNs.$Resource.OtherResource;

This can be made even more modular by placing the visualforce code inside a component that can be included on any page where you or someone else on your team needs to access resources from javascript.

-D.S.