0

I have a plugin that runs off my customer's websites. The plugin is at http://mycompany.com/Tool.js, and needs to pull in some images. The problem is that the javascript seems to try to pull images from the customer's site, rather than from my own site. Here is the JS:

button.style.cssText = 'position:absolute;top:-20px;right:-20px;background-image:url(/Resource/Button.png);

In the above JS, the retrieval URL is CUSTOMER.com/Resource/Button.png (the site where the plugin runs), rather than my sites mycompany.com/Resource/Button.png.

Note that I cannot use absolute paths, as they become a pain between environments (test/prod) and also because my image retrieval must use http/https based on the client environment (otherwise you can errors if http is used on an https site).

Mary Rawson
  • 1
  • 2
  • I'm slightly unclear on what's loading/running from where. Could you explain it more carefully? – thirtydot Feb 24 '11 at 02:01
  • My javascript is loaded as external resource by a client's server. Consider 1000 customers all pulling my JS from just my server, and that I further need images to come from my server. – Mary Rawson Feb 24 '11 at 02:03
  • [Scheme relative URLs](http://stackoverflow.com/questions/3583103/scheme-relative-urls) might be helpful for you to know about here. – thirtydot Feb 24 '11 at 02:04

4 Answers4

1

Just replace it with background-image:url(http://mycompany.com/Resource/Button.png);

Tom Kris
  • 1,227
  • 1
  • 8
  • 15
  • I can and cannot do this. The above format becomes a pain between test and prod (I would obviously like the same code) and between http and https (our plugin runs on both and must use https if the client uses that). – Mary Rawson Feb 24 '11 at 01:58
  • You can create an Http Handler, which intercept the request of js file, read content of js file, check the host name, scheme (http or https), compilation options (debug or release), then replace 'url(' with an apropriate scheme and domain name, for example with 'url(https://mycompany.com)' and post it to the client – Tom Kris Feb 24 '11 at 02:09
1

Instead of using Javascript or anything you can actually just use // before the URL in the stylesheet and it will use http or https depending on how the client came to the site. You can do the same on the HTML page when you link the stylesheet to the page. So your HTML page will be:

<link href="//mycompany.com/stylesheet" />

And in your stylesheet you can have

background-image:url(//mycompany.com/Resource/Button.png);

edit

I forgot to mention that you can do the same when attaching javascript files to the page as well.

For eg: <script type="text/javascript" src="//mycompany.com/javascript"></script>

sarcastyx
  • 2,219
  • 17
  • 16
0

absolute path should be included!!

switch (window.location.protocol) {   

case "http:":
button.style.cssText = 'position:absolute;top:-20px;right:-20px;background-image:url(http://yourcompany.com/Resource/Button.png);break;

case "https:":
button.style.cssText = 'position:absolute;top:-20px;right:-20px;background-image:url(https://yourcompany.com/Resource/Button.png);break;

}
DrStrangeLove
  • 11,227
  • 16
  • 59
  • 72
0

The javascript will run in the context of where it runs, not where it is downloaded from. If the resource URL is not absolute, the domain will be assumed to be the one your browser is currently accessing.

You'll need an absolute URL. E.g. http://mycompany.com/Resource/Button.png

misteraidan
  • 1,984
  • 4
  • 23
  • 31