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.
Related
I’m new at using PHP but I’m searching for a very specific function and I don’t know if PHP would be able to do what I want.
I would like to load a HTML page, wait several seconds (in order to allow JavaScript to make change on the page), and then download the content that changed.
For example there is a HTML doc which has a <video> tag that is changing its src attribute every 10 seconds (with JavaScript) and the thing I want to do is to grab using PHP all those src in one script.
I know that it’s possible to download the first attribute, I’ve done some research and it seems that I should use the get_file(url) function, but I don’t know if it is even possible to load the doc, wait until the attribute changes and then download the changed attribute.
This is not, as you've described it (that is, assuming that the src attribute really is changed by JavaScript), something that PHP can do on its own. PHP doesn't run JavaScript, browsers do. Once your PHP code downloads the HTML, what you have is simply a string of characters; PHP alone doesn't know any difference between that and "hello world". It's not going to change in memory, no matter how long you wait.
But all is not lost. You should look at the HTML and JavaScript of the page, this may give you some ideas about how to proceed. The JavaScript must be getting the new src from somewhere, right? The only obvious options are that it's already embedded in the source somewhere (an array of sources, for example, which it cycles through) or it's being retrieved from a server via Ajax. If it's the former, you can just directly extract that list right away, no waiting required. If it's the latter, you may be able to send your own queries to the server to get them all, though there are security things that could cause problems here.
To do what you're seeking, you'll need a browser engine that can execute JavaScript just like what would happen with real users.
Look into a headless browser, such as SlimerJS, or one of the many headless Chromium APIs. You can tell the browser engine to load a page and execute its scripts. After some time (or a certain trigger), you can use the DOM API just like you would in-browser.
Like in the title. With jQuery, or even simple JavaScript code, I can get table of all scripts (CSSes and images) that particular page uses, and I'm looking, if there is any solution to get each resource file size?
I think I did a quite good research here. Most answers are about files uploaded to server, being uploaded or just before being uploaded, so that is not, what I'm looking for. There is some support introduced in HTML5, but again, it seems to be for uploaded files only.
Of course, I'm looking for a cross-browser solution, so using some crappy file-object, introduced in old IE, is also not, what I'm looking for. Also, please let me underline, that I'm talking purely about checking file size of a file stored on server, accessible by given URL. So, please, don't write answers like, that I can't access local files, from JavaScript, for security reasons. I already know that.
I found quite great solution on SO, but it uses AJAX request to solve the problem. Although it is very interesting (sending request of HEAD type), it might not work on all servers (but was tested by answer's author that is supported to all major browsers). And I'm a bit thrilling about firing AJAX request for each resource I find on each analysed page.
So, I'm assuming that there isn't such solution. And I would be happy, if someone could prove that my assumption is wrong. But, then, on the other hand, how do they do this in for example Firebug? If I'm not mistaken, XPI extensions are written in JavaScript, right? And Firebug certinally can measure sizes of resuorces used in current website.
To verify content length from inline scripts you can use their .text attribute.
document.getElementsByTagName('script')[0].text.length //works for inline scripts
For external scripts, where .src attribute refer to another file/resource, there's a problem with Access-Control-Allow-Origin security constraint, unless you allow them in your browser settings. If the external scripts are from the same domain as the page where you are trying to catch them, is ok.
I created a fiddle to demonstrate how to get their content length.
UPDATED 20/07
Firebug has its own implementation to intercept page loads that extends the Mozilla.org observer-service.
Question 'An observer for page loads in a custom xul:browser' should give you an idea of how to implement this kind of interceptor using Mozilla Add-on API.
I need to arbitrarily rewrite Javascript code, client-side, before it's loaded by the browser. I would like to handle script tags as well as referenced .js files. Dynamically generated script tags are not a goal. My client is running a proprietary system, so this only needs to work with IE for now (IE6+). I've read up on MIME-filtering, but I don't think that would take care of static script tags, just .js files.
What is the use case for this? It sounds like an approach to be avoided if at all possible. You will lose any ability to cache javascript for one thing.
Can you give an example of the kinds of rewriting you want to do?
Ouch, nasty. Would it be possible to configure users' browser with a custom proxy which can parse and rewrite the javascript? This could be pushed out with group policy (if the browsers are not already configured with proxies)
I've been building a site. At some stage I noticed that IE display was a little broken and Chrome had all but rendered nothing but the body tag (empty), and FF all looked good.
After throwing my keyboard around the room and bashing my head against my mouse, I discovered the problem. I had left (don't ask how or why, must have been some lightning speed cut and paste error) an HTML comment unclosed in an inline script block.
<script type="text/javascript">
<!--
...
</script>
I'm guessing (not tested) the problem would have either not come up, or manifested itself in a far more noticeable way if the script was external. So anyways, I got to thinking, is there ever a time when you have a really good reason to write inline script??
No. Write Unobtrusive Javascript.
If you want your Javascript to run as early as possible, it might make sense to include inline Javascript, since it will run before any other HTTP requests have necessarily completed.
And in some cases, you're including Javascript from a 3rd party provider and you don't really have a choice. Certain ad systems, as well as Google Analytics, spring to mind.
If the script must be dynamically generated (say by a PHP or ASP.NET MVC page) would be one reason to have it inline :-)
Depends on how much JS do you plan to write. If you're writing many support routines (lots of validation checks, text processing, animation and effects) then it makes sense to have the code in a separate file. This allows code reuse and removes a lot of junk from your HTML page.
On the other hand, there is no need to put 10 lines of code, or a single function (a refresh JS comes to mind) in a separate file. It will also load slightly faster, since the browser does not need to make an additional HTTP request to download the separate JS file.
Most XSS vulnerabilities can only be exploited using inline javascript.
It's not necessarily enough of a reason, but the pages will load faster. To this end, sometimes, even when you write the script in another file, you want it to show up as inline on the client side.
I sometimes place javascript inline in pages that get partially reloaded (to bind some events to newly added form-fields for example) and / or pages that use some unique javascript that I will not use on any other page.
Having many external scripts can ultimately slow down the page as the browser must call each file separately. Combining the JavaScript into one file or into the page itself can sometimes alleviate this problem.
On the other hand, I believe the browser may cache a script file once it's been called for the first time so if you have a lot of the same code across your site, external is the way to go.
I work a good deal in something called Flex, which combines XML and ActionScript to create the final bytecode. It is ALWAYS best practice to separate the two as much as possible. That way, you can very clearly and easily separate the View (the HTML or MXML in my case) from the Controller (the script)
It also means that you do not have to worry about looking through five files for one line of code -- all of your code is in one place.
File caching is the reason to have external js and css files. Even if you only have one HTML page, this page is likely to be updated often and so will be downloaded by the browser as often. If the js (and css) are in the HTML page, that too will be downloaded often. Keeping them separate will keep the HTML file smaller and will download faster. The js and css files will have been cached so will not be continually downloaded. That is assuming these files are not updated very often.
This question already has answers here:
How do I hide javascript code in a webpage?
(12 answers)
Closed 8 years ago.
How do I hide my javascript/jquery scripts from html page (from view source on right click)? please give suggestion to achive this .
Thanks.
You can't hide the code, JavaScript is interpreted on the browser. The browser must parse and execute the code.
You may want to obfuscate/minify your code.
Recommended resources:
CompressorRater
YUI Compressor
JSMin
Keep in mind, the goal of JavaScript minification reduce the code download size by removing comments and unnecessary whitespaces from your code, obfuscation also makes minification, but identifier names are changed, making your code much more harder to understand, but at the end obfuscation gives you only a false illusion of privacy.
Your best bet is to either immediately delete the script tags after the dom tree is loaded, or dynamically create the script tag in your javascript.
Either way, if someone wants to use the Web developer tool or Firebug they will still see the javascript. If it is in the browser it will be seen.
One advantage of dynamically creating the script tag you will not load the javascript if javascript is turned off.
If I turned off the javascript I could still see all in the html, as you won't have been able to delete the script tags.
Update: If you put in <script src='...' /> then you won't see the javascript but you do see the javascript file url, so it is just a matter of pasting that into the address bar and you d/l the javascript. If you dynamically delete the script tags it will still be in the View Source source, but not in firebug's html source, and if you dynamically create the tag then firebug can see it but not in View Source.
Unfortunately, as I mentioned Firebug can always see the javascript, so it isn't hidden from there.
The only one I haven't tried, so I don't know what would happen is if you d/l the javascript as an ajax call and then 'exec' is used on that, to run it. I don't know if that would show up anywhere.
It's virtually impossible. If someone want's your source, and you include it in a page, they will get it.
You can try trapping right click and all sorts of other hokey ways, but in the end if you are running it, anyone with Firefox and a 100k download (firebug) can look at it.
You can't, sorry. No matter what you do, even if you could keep people from being able to view source, users can alway use curl or any similar tool to access the JavaScript manually.
Try a JavaScript minifier or obfuscator if you want to make it harder for people to read your code. A minifier is a good idea anyhow, since it will make your download smaller and your page load faster. An obfuscator might provide a little bit more obfuscation, but probably isn't worth it in the end.
Firebug can show obfuscation, and curl can get removed dom elements, while checking referrers can be faked.
The morale? Why try to even hide javascript? Include a short copyright notice and author information. If you want to hide it so an, say, authentication system cannot be hacked, consider strengthening the server-side so there are no open holes in server that are closed merely though javascript. Headers, and requests can easily be faked through curl or other tools.
If you really want to hide the javascript... don't use javascript. Use a complied langage of sorts (java applets, flash, activex) etc. (I wouldn't do this though, because it is not a very good option compared to native javascript).
Not possible.
If you just want to hide you business logic from user and not the manipulation of html controls of client side than you can use server side programming with ajax.