0

I've read the reasons why having someone (say Google) do the hosting of jQuery and other js files is a good thing. However, I have a client that has domains like googlecode.com and googleapis.com blocked (a government agency).

I wanted to keep the Google hosted js files, but also have a local copy on my server for the above client (which is only a fraction of my cliental, but an important one).

Does having the same js file referenced in the same page cause any issues?

This is basically how it looks in my source, 1 listed after the other:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/js/local/jquery.min.js"></script>
Chris M.
  • 23
  • 4
  • 5
    I would take a look at http://stackoverflow.com/questions/6115132/loading-jquery-from-google-or-locally-if-not-online – Nix Jan 03 '13 at 16:24
  • Well written javascript files will protect themselves from being overwritten by duplicate declarations. That being said, I would try to avoid duplicates as most javascript files (jQuery excluded) are not well written. – jbabey Jan 03 '13 at 16:26
  • @Nix Thank you! I had not seen that post before. – Chris M. Jan 03 '13 at 17:11

2 Answers2

4

When you include a script in your page using a <script> element, you don't "reference" it : you execute it.

So it wholly depends on the script.

jQuery, for example, won't break much, the second execution will simply replace the first value of window.jquery and window.$, this will only take some (minor) additional time.

Other scripts could be unprepared to a duplicate execution.

Generally, I'd say you should make the effort to avoid this duplication. This isn't clean and it slows the page. If you can't simply use your own copy of jQuery, I'd recommend to deploy two versions of your application.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
2

Using the pattern popularised by the HTML5 Boilerplate is the most efficient way of doing this. It will load your local file only if the file from Google can not be reached.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
amustill
  • 5,274
  • 23
  • 15
  • 2
    You should probably be voting to close as a duplicate, not copying and pasting someone elses answer from another question. – jbabey Jan 03 '13 at 16:27
  • 1
    @jbabey Having missed the first comment, I was unaware that the previous question existed. As for copy and pasting, I think you'll see that I've clearly taken the code from the latest HTML5 Boilerplate rather than "another question". It's a common pattern, and it's indeed possible that more than one person may think of it as an answer. You should perhaps probably be helping rather than trolling questions. – amustill Jan 03 '13 at 16:34
  • Awesome, thank you! This helps me greatly! (And apologies, I searched before making this question and did not find the duplicate) – Chris M. Jan 03 '13 at 17:03