Load a particular JS file base on what URL its hosted

Question

I've an MVC ASP page with the following code:

<script type="text/javascript" src="https://TEST_DOMAIN.com/test.js"> </script>
@*<script type="text/javascript" src="https://LIVE_DOMAIN.com/Live.js"> </script>*@

Essentially I comment or uncomment the script I want to use if the site is Live or if its on Test. I'd love to be able to do this dynamically some how. One solution, perhaps, is if it could read the current URL and figure out if its Live/Test.

Updated with Answer (thanks Whipdancer)

In Web.config I have added the url:

<add key="BundleJS" value="https://TEST_DOMAIN.com/test.js" />
<!--<add key="BundleJS" value="https://LIVE_DOMAIN.com/Live.js" />

I will look into web.config transformations next. But this is much better than what I had before.

The next step was during Session_Start in the Global.asax.cs file I set the url to an application variable:

Application["BundleJS"] = System.Configuration.ConfigurationManager.AppSettings["BundleJS"];

After this was set I was able to go to the controller of the view (Tip: in my case the view was a layout so I went to the parent controller). On or after the ActionResult method I added the Application variable to the viewbag

ViewBag.BundleJS = HttpContext.Application["BundleJS"];

Finally in the cshtml page (which was _layout for me) I set the script up

   <script type="text/javascript" src="@ViewBag.BundleJS"> </script>

That doesn't look like vanilla HTML. What are those `@*` things? What framework are you using? — birdoftheday, Jan 07 '16 at 14:28
You should set up separate environments all together and use environment variables — Chris L, Jan 07 '16 at 14:59

score 2 · Accepted Answer · answered Jan 07 '16 at 16:46

Since you are using ASP.NET MVC - you can use web config transformations to handle your different environments.

More info on web config transformations

I would then use a web config parameter to determine the appropriate environment, that is loaded via global.asax (or possible in my primary view controller).

You would then be able to automatically determine the appropriate URL based on the environment you compiled to.

in test web.config:

<appSettings>
    <add key="JSSource" value="https://TEST_DOMAIN.com/test.js" />
</appSettings>

in release web.config:

<appSettings>
    <add key="JSSource" value="https://LIVE_DOMAIN.com/Live.js" />
</appSettings>

in global.asax you could do something like:

public class MvcApplication : System.Web.HttpApplication
{
    public static string jsUrl;

    protected void Application_Start()
    {
        jsUrl = System.Configuration.ConfigurationManager.AppSettings["JSSource"];
    }
}

In you page you could then use something like this:

<script type="text/javascript" src="@jsUrl"> </script>

** I don't think this code will run as is. It is to give you a general idea.

Hi whipdancer, how would the above work if @jsUrl does not exist in the current context on the cshtml page? — Sniipe, Apr 11 '16 at 13:34
If `@jsUrl` doesn't exist, it wouldn't work. The point of making it web.config driven - so that the config you are using (debug, test, release, what-ever) will supply the correct value in the web.config, when the app starts it will populate `jsUrl` and you will have it available at the view. — trenthaynes, Apr 11 '16 at 13:38

score 0 · Answer 2 · edited May 23 '17 at 11:50

You can check this answer: https://stackoverflow.com/a/5819693/2710681

Alternatively, you can test with jQuery's Ajax getScript method but the above is probably better:

if (test) {
    $.getScript( "https://TEST_DOMAIN.com/test.js", function( data, textStatus, jqxhr ) {
      console.log( data ); // Data returned
      console.log( textStatus ); // Success
      console.log( jqxhr.status ); // 200
      console.log( "Test load was performed." );
    });
} else {
    $.getScript( "https://LIVE_DOMAIN.com/Live.js", function( data, textStatus, jqxhr ) {
      console.log( data ); // Data returned
      console.log( textStatus ); // Success
      console.log( jqxhr.status ); // 200
      console.log( "Live load was performed." );
    });
}

Alexandru Chichinete · Answer 3 · 2016-01-07T16:43:54.530

Since you are using Razor you could do it server side:

@if(isLive)
{
    <script type="text/javascript" src="https://TEST_DOMAIN.com/test.js"> </script>
}
else
{
    <script type="text/javascript" src="https://LIVE_DOMAIN.com/Live.js"> </script>
}

where isLive is a variable that indicates if current environment is Test or Live. This solution will run server side and won't pollute the HTML with more scripts

EDIT: If you don't have an environment variable, you could pass a bool object from the controller to the view (using ViewBag), setting to true if it's build in DEBUG, using preprocessor directives.

[Code]

bool isLive = true;
#if DEBUG
isLive = false;
#end if;

score -1 · Answer 4 · answered Jan 07 '16 at 14:42

-1

your if statement could be

var a = document.createElement('a');
a.href = url;
var hostname = a.hostname;

if(hostname == "yourlivewebsite.com") {

} else {
}

answered Jan 07 '16 at 14:42

Frederik Nielsen

26
2

That's incredibly hacky. – Dan Jan 07 '16 at 14:42

Load a particular JS file base on what URL its hosted

4 Answers4