Can things like <script type="text/javascript" src="/actions/generateScript"></script> be used without troubles?
It's kinda hard and tricky to setup server for processing urls with extensions, so maybe I just don't need them.
No, it's not needed. Browser just tries to download resource from src and execute it as JS code.
I once have use .php file as CSS source and it worked fine
No, since you already have "script type="text/javascript" the browser knows you are attempting to load a .js file. In addition modern browsers will run javascript regardless.
Related
Previously I was using managed hosting but have recently been testing a VPS server setup running CentOs with Virtualmin.
I have moved over a website which works absolutely fine on the managed hosting, but moving it to the VPS gives me multiple JS errors. For some reason, it doesn't seem to be loading any of the JS scripts. When I replace the scripts with CDN links, it all works fine again.
I've checked the directory permissions and they're set the same as the previous hosting, I can also access and read each file using website.com/js/bootstrap.min.js for example. The only difference is the JS directory itself is "Forbidden". I'm not sure if that makes a difference when I can read the actual files?
My question is, why could this be happening if JS runs similar to HTML and works fine when using the CDN scripts? Also, what is the meaning of the random IDs contained in the JS SRC scripts right before text/javascript shown below, could this be the cause?
<script src="js/jquery-3.2.1.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/bootstrap.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/jquery.slicknav.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/owl.carousel.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/jquery.magnific-popup.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/circle-progress.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/mixitup.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/instafeed.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/masonry.pkgd.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/main.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/rocket-loader.min.js" data-cf-settings="7fb652456240e11add396d8d-|49" defer></script></body>
</html>
It seems that you didn't put JQuery back on your new hosting.
There are a few clues:
'unexpected token': jquery uses $
'jQuery is not defined'
It could also be that you put jQuery in a different location than where it was on your managed hosting. It could also be that it's still pointing to your old hosting.
If that doesn't work, try removing the text before text/javascript (although I doubt that's the issue, considering it worked on your old hosting). Also, Javascript's mime type is application/javascript.
Try checking those. That should fix your problem.
I can also access and read each file using
website.com/js/bootstrap.min.js for example. The only difference is
the JS directory itself is "Forbidden".
This doesn't make sense. Either the folder is forbidden or it is not.
If you can access that folder through the browser url, then clearly it is not forbidden. If you get a 'Forbidden' message in your browser, then obviously the folder is forbidden and you found the problem.
My question is, why could this be happening if JS runs similar to HTML
and works fine when using the CDN scripts?
Go to the network tab in your browser and check the http status that you receive in the browser for the resource that you request, i.e. jQuery in this case. The error that bootstrap throws is probably just a consequence of the fact that jQuery isn't loaded. I guess there must be a dependency.
If not, in the absolute worst case you can load the unminified version of the script that throws, and debug the problem based on the original source code.
The reason why it works for a CDN is obviously because these domains allow you public access to the resource it hosts, if not you wouldn't be able to get it, and it is sort of the point of using a CDN.
Btw, you should use a CDN, there is no clear argument as for why you shouldn't for these common libs.
Also, what is the meaning of the random IDs contained in the JS SRC
scripts right before text/javascript shown below, could this be the
cause?
I assume that you mean in the type, not in the src attribute of the html.
This is your code:
<script src="js/jquery-3.2.1.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
This doesn't make sense. If anything, they look like generated hashes which often happen when you load chunks of Javascript asynchronously.
It must be framework related, although I have no idea what framework you're currently using. I don't know if you're using SSR, CSR, templating library, bundling library etc.
But it should be clear that something generates this string for you. You need to check your template, what generates your template, and either way, remove the type altogether if you can. It's really useless in that spot.
so id like to link a refernce to a couple js files if possible, but im not sure i could go about doing this so i can use it
<script type=text/javascript src=http://mylinkedjs></script>
and call i from my jquery.
Anyone know how this is possible?
Let me try to rephrase your question.
I want to include some JavaScript files from another server on my page, and call functions from those files in my own jQuery code. Is this possible?
That’s certainly possible. Once you’ve included a JavaScript file on your web page (like you did in the question), the global variables it creates are accessible to any other JavaScript running on that page, regardless of which server the JavaScript file was loaded from.
This is often how jQuery itself is included on pages: by linking to a copy of jQuery on a big CDN, e.g.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
See http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery
<script type="text/javascript" src="http://wherever.com/linked.js">
I am building a public facing website and I am using a lot of jQuery and jQueryUI. What I have noticed is that most site on internet that use jQuery and jQueryUI don't have code like this in their pages.
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
$( "input:submit" ).button();
});
</script>
I know this is a simplistic example but most sites, for example SO have only one obfuscated js file included for all the pages. It doesn't even seem like they use $(document).ready anywhere. On my current site it seems like I would need to include a js file for each page. My question is how is it suppose to be done and is there a best practice on how to use/include javascript in a page?
You wouldn't see the famous document.ready because most of the code is compressed usually into one big file for caching purposes. Just include your js at the end of the body like:
<script type="text/javascript" src="site.js"></script>
so this can be cached once and for all for every page.
According to W3C you could put scripts almost anywhere: http://www.w3schools.com/js/js_whereto.asp
So where should you put them?
Ege is right to say that you should put them as far down the page as possible because it will enable the browser to load more in parallel up front before it gets to the 'blocking' scripts. See here for more detail: http://developer.yahoo.com/performance/rules.html#js_bottom
Also, it is nearly always a good idea to put your scripts (and CSS) into external files so the browser can cache them tus saving the user from having to download them with the page each time.
Personally, I always use a CDN for script frameworks such as jQuery and the like as they can deliver external resources quicker than you probably can. Also the likelyhood of the browser having already cached jQuery for another site from the same CDN is far more likely. More detail here: http://code.google.com/apis/libraries/devguide.html
Finally, there's nothing wrong with using $(document).ready, but just be aware that this could affect the site's responsiveness and its pros may not outweight its cons. Again, more detail here: http://encosia.com/2010/08/18/dont-let-jquerys-document-ready-slow-you-down/
Hope this helped.
Whether you include the 'site.js' file at the top or bottom doesn't matter, unless your javascript is doing document.write to put something on the page. Then of course at the top would be desired. Some like it at the bottom so that the rest of the page will load before downloading the js file, which can sometimes delay the page load if it is a large file.
I was just wondering what the simplest javascript function would be to request a server side .js file. Currently I have a jquery-1.4.2.min file that weighs in at 70kb, and I figured that there has to be a way, using javascript, to request this file. That way, if the user doesn't have javascript enabled the function would be ignored and the jquery file wouldn't have to be downloaded, thus speeding up the download of the page and decreasing the bandwidth used by the server.
Also if this works, would the file just be downloaded, or would the page begin to use it? Thanks in advance!
Most browsers already don't download JavaScript when it's disabled, so this is an over-optimization for most browser users. If I can find the question on it I'll update this...but it's something you don't need to handle :)
Edit: Here's that question, though I think there's another similar one as well.
Something else to keep in mind is that the user will only download it once if your cache headers are set correctly. Also take a look at using a CDN for your jQuery include.
If the user doesn't have javascript enabled, <script> elements with src attributes will be ignored.
If you really want to, you can document.write() the script tag or create a script element and append it. If js is disabled it will never happen. But others have mentioned already, for most modern browsers, the script tag will simply be ignored if js is disabled, so it's overkill.
I don't want my users having to load a ton of JS files if their browser doesn't support it. What's the best/easiest/fastest to only load JS scripts if the browser supports Javascript?
Thanks in advance,
- JS noob
If JavaScript is off, the browser won't download files from the src attribute of <script type='text/javascript'> tags.