CODEWITHSUNDEEP
javascriptasp.nethtmlcss
Mary Rawson
Mary Rawson

Reputation: 1

Location of image resources

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).

Upvotes: 0

Views: 1913

Answers (4)

sarcastyx
sarcastyx

Reputation: 2219

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>

Upvotes: 1

DrStrangeLove
DrStrangeLove

Reputation: 11557

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;

}

Upvotes: 0

misteraidan
misteraidan

Reputation: 2003

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

Upvotes: 0

Tom Kris
Tom Kris

Reputation: 1227

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

Upvotes: 1

Related Questions