How to restrict external javascript load to one time. Sitecore implementation

Question

I have a view layout (main.cshtml) where I am calling an external javascript file. I have renderings (another cshtml files) which are included as placeholders to this layout(main.cshtml). example: two pages: 1) http://localhost/home/ has two renderings for Body placeholder 2)http://localhost/about/ has two renderings for Body placeholder

both home and about pages uses same main.cshtml, I don't want to load externalJS.js every time I navigate from home to about or vice versa. i.e;the externalJS.js should load once for entire application. Can I achieve it?

    <!DOCTYPE html>
<html>
<head>
    <title>Main</title>
</head>
<body>
    <div data-role="page" class="pageWrapper">
        <header data-role="header" class="header">
            @Html.Sitecore().Placeholder("Header")
        </header>
            <div class="wrapper" data-role="main">
            @Html.Sitecore().Placeholder("Body")
        </div>
        <div data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit">
            @Html.Sitecore().Placeholder("Footer")
        </div>
    </div>
  <script src="../../js/externalJS.js"></script>
 </body>
</html>

8bittree 8bittree · Accepted Answer · 2015-07-31T23:51:34

If you are worried about the bandwidth usage and load on your servers from users downloading exernalJS.js each time they visit one of your pages, you're worries might already be solved by web browser caching. Basically the web browser saves a copy of html, css, js, image files, etc locally and reloads those if it needs to, rather than jumping back out to the network.

On the other hand, if the initial processing of externalJS.js is what you want to avoid, then something like Ajax (Asynchronous Javascript and Xml) is what you want. The idea behind Ajax is that you write Javascript to handle fetching new content from the network. So rather than the user clicking on an anchor and having their browser download an entirely new page, you would set up something for them to click on and Javascript would then send a request to the server, which would return some xml (or html, or json) and Javascript would then insert the new data into the existing page without the browser reloading anything or changing pages. Note that you may want to use Javascript to add the change to the browser's history since that won't happen by default. See here for an Ajax tutorial.

How to restrict external javascript load to one time. Sitecore implementation

2 Answers