Can I use one script file in two different HTML files (HTML1 and HTML2). How can I specify which document to get the element form when I use DOM? Or will it automatically identify which document is by the element id??
Yes.
Take javascript CDNs for an example, you potentially have one javascript file used by millions of websites, let alone web pages.
The script itself doesn't care or know what page has loaded it. It is loaded by the browser and if you are doing DOM manipulation it works with whatever DOM has been loaded into the browser via the HTML in the loaded page.
It is up to you, the developer, to make sure that you have the appropriate hooks in your HTML for your javascript to use.
Related
I am trying to implement a SPA (single page application) without using any framework. I figured that I need to first download all my application resources (HTML, JS, CSS etc.) on my first page load and then use them later.
Now, since I have to pre-load resource and use it later, so I think I have 2 options:
Option 1: Download them using "script" or "link" tag etc. and then refer the downloaded resource later.
Option 2: Download then using xhr or jquery.get(), put them in a global variable and then use those global variables later.
Problems with options 1:
First and biggest challenge is how do I refer the downloaded resource later. Lets say I have somehow downloaded all my HTML, JS etc. but later, dynamically, how will I refer or read or load them later? I will read it from cache? But what if user has disabled caching of resources?
I know I can download JS files using <script> tag but how do I download HTML resource dynamically? I know some templating engine which can download but I do not want to use any external library.
Problems with options 2:
I could pretty much achieve this except below issues:
I downloaded my resources using jquery.get but since I wanted to refer them before DOM rendering so I couldn't use asynchronous mode. I had to download them synchronously. But then there is warning from XHR that synchronous downloading is deprecated. So, then how I can download a application resource synchronously?
I have to keep the content of downloaded resource in a global variable. So, I am worried that will it be a bad idea because it will consume my browser memory? How does the frameworks like Backbone.js or AngularJS does it?
Problems with options 1:
First and biggest challenge is how do I refer the downloaded resource
later. Lets say I have somehow downloaded all my HTML, JS etc. but
later, dynamically, how will I refer or read or load them later? I
will read it from cache? But what if user has disabled caching of
resources?
First of all, you can't directly download HTML using <script> or <link> tags as far as I know.
You can download scripts and css, the scripts will be compiled and executed once downloaded, and CSS will be applied to the web page. There is no need to refer to them later.
I know I can download JS files using <script> tag but how do I
download HTML resource dynamically? I know some templating engine
which can download but I do not want to use any external library.
In the above bullet you stated you can download HTML using <script> tags and now you're saying you can't in the very next bullet of same option. This is already answered, You can't.
Problems with options 2:
I could pretty much achieve this except below issues:
I downloaded my resources using jquery.get but since I wanted to
refer them before DOM rendering so I couldn't use asynchronous mode.
I had to download them synchronously. But then there is warning from
XHR that synchronous downloading is deprecated. So, then how I can
download a application resource synchronously?
"since I wanted to
refer them before DOM rendering" - consider DOM rendering is the process of downloading and processing the mandatory resources - resources that is needed to present the initial state, and load the resources that is going to be needed later. These will be downloaded by browser (think of the index.html and the <script> and <link> tag resources in it)
I have to keep the content of downloaded resource in a global
variable. So, I am worried that will it be a bad idea because it will
consume my browser memory? How does the frameworks like Backbone.js
or AngularJS does it?
There are techniques like name spacing, IIFE etc used to avoid global variables. And regarding memory, download the extra resources after the document is ready, when required. You wouldn't need any extra resources before document is ready.
Angular has some sort of optional cache, I haven't came across anything like that in backbone.
To conclude, simply load JS and CSS resources that are mandatory using <script> and <link> tags in index.html. And load any other resources required afterwards using AJAX, you wouldn't need to refer to JS or CSS since that is processed by the browser when injected via <script> and <link> tags. You can keep a reference to HTML strings simply using variables like var myHTML= ajaxResponse.
With all that said, look into libraries like requireJS, lazyload etc that already handles stuff like these.
I need a way to take a web page that's already loaded in the page and save the page's full DOM (as an HTML string) such that were I to load the HTML offline as a single file, it would preserve the effects of all CSS and whatever scripts had been run prior to saving it. Keeping the images would be a bonus, but even having them missing but with a placeholder so that the layout is preserved is fine.
The catch is I can't reload or requery any of the resource files (JS/CSS). Fonts are not important.
This means the resulting HTML can't refer to external files. Is this even possible using just JavaScript?
EDIT:
1) This needs to be a programmatic solution using JavaScript, not a browser UI solution.
you can store the entire HTML along with inline CSS as a var in in JavaScript (which you write ). Maybe you can write some JS which uses HTML5 local storage to store the external JS/CSS resources and use them later while loading the page offline.
I'd like to create Chrome bookmarks that perform actions when clicked. The vast majority of them will be manipulating the URL and reloading the page. Can you make Chrome bookmarks that contain large amounts of Javascript? Maybe even jQuery?
The better approach would be using javascript to load an external script and append it to the <head> of the document, this, IMO, makes it easier to work with your script as only the call to load the resources needs to be bookmarklet'd*.
Example : Load external jQuery script via Bookmarklet
For example, if you wanted to load jQuery onto the page you're looking at, you could run this bookmarklet from your bookmark bar. (Disclaimer: Best to do a check for jQuery already on the page to avoid conflict. More on that here ).
javascript(function({var%20external_script=document.createElement('script');20external_script.type='text/javascript';20external_script.src='http://code.jquery.com/jquery-latest.js';document.getElementsByTagName('head')[0].appendChild(20external_script)})();
*Note that it has been minified and URL encoded. If you use Textmate, there's an option to "Copy Javascript to clipboard as bookmarklet" which does the minifying and encoding automatically.
Worth pointing out that you can load multiple resources into the DOM with this method, including stylesheets.
Is there a blanket rule in terms of how javascript should be loaded. I'm seeing people saying that it should go on the end of the page now.
Thoughts?
The thought behind putting it at the end of the document is to ensure that the entire contents of the document have been downloaded prior to any attempts to reference elements in it. If the JavaScript was loaded first it is possible that code could go looking for elements when the document was not ready.
jQuery addresses this issue with the ready function:
Binds a function to be executed
whenever the DOM is ready to be
traversed and manipulated.
This is probably the most important
function included in the event module,
as it can greatly improve the response
times of your web applications.
There are also performance considerations that suggest including JavaScript files at the bottom of the page - this is due to the fact that downloading a JavaScript file may block all other HTTP requests (for images, CSS, etc.) until it is complete.
Well there are two cases (at least) depending on what do you want to achieve. If you need the functionality incorporated in the script or scripts, like function libraries, available before or during page loading then you should load JavaScript code in the head tag.
If you need to do something that needs some resources that are made available only after the page is loaded (DOM resources that is) than you should load the script/s at the bottom of the page (this can also be solved using onDOMReady events that are already available in most of the JavaScript frameworks).
There could be also some performance issues that could dictate your decision. For instance there are situations when loading the script or scripts in the head tag would slow down the page rendering and if you can provide basic functionality with page rendered until the script are fully functional then again the script or scripts should be loaded at the bottom.
It is more or less a decision based on what you need to do.
If you need to use javascript to run some special logic while the document is still loading, you can put minimal code at the top. But practically all usage of javascript in today's rich web applications is required after the document is ready, hence the <script> tags can be safely put after </body>.
Here is a very relevant read: http://developer.yahoo.com/performance/rules.html
There is no rule : if you want the Js to be loaded first, you put it in the head. If you want it to be the last thing the browser load, you put it at the bottom.
For websites getting usuable with JS, you probably want to put it at the top, in head. For web sites that degrade nicely, you'll follow Yahoo! recommandations and let the page render, then load the script.
N.B : this has nothing to do with executing the script before or after the DOM is loaded. This issue is not a real one, most of the time you use onload or a $.ready equivalent. This is about when the file is actually loaded, not executed.
I like to minimize my code into a single file when I deploy to production. So, during development, I create a single file for each JavaScript class and load each in the head (after the CSS files). Since I wait for an event from the browser indicating the DOM is ready, I place my JS file in the head of the only HTML/JSP page.
I've been trying to build my own (small) framework in JavaScript for an AIR application and I've run into a peculiar problem: I can't find a way for a JavaScript file to load another. It seems the only way to load JavaScript is for an HTML file to load it.
Is this correct? Is there really no way for a JavaScript file to load another?
The security restrictions in Application Sandbox mode do not allow instantiating any new JavaScript code after the load event (during that event you can still load and evaluate JS).
As for the loading data, you should be able to use XHR to retrieve any text data you want at any moment of time without any restrictions.
Have you tried creating a script element, setting the src attribute, and adding it to the document body? I don't think the usual document.write() trickery works but I'm pretty sure adding a script element should.
(I believe all paths are relative to the root of the Air application itself.)