So... Just so you have less reasons to call me an idiot, here's why I need this:
I'm currently working on an offline project that uses jruby. So, to generate reports on the fly, it was decided (by my superiors) to use JavaFX's WebView component - so, HTML, CSS and JS.
But here's the catch: no using file system. All the content is drawn from DB and generated on the fly. No internet either. So all the content to be loaded into the WebView is to be in a single file, however enormous.
I have an HTML page and two huge files - one js, one css. When I use <link> tag for css and <script src="..."> for js - all works. Both in a browser and if I artificially load the page into a WebView. But if should I copy-paste the files into corresponding <style> and <script> tags (as it, probably, will be handled in the program), half the things do not work. Is there a special way for doing it right?
Here are the html, css and JS I'm working with (html is filled with sample data so it can be seen if everything works):
html filecss filejavascript file
You could try and merge them. Read more about this here.
Related
I created a plugin for some web software that doesn't natively support plugins. I found that I could inject code into the head of the plugin webpage through their GUI. Currently, users have to paste a huge block of code into the head which contains the plugin HTML, CSS, and JS all minified into one block. I'd like to instead serve this over a CDN so users could simply subscribe and receive all updates without having to repaste. It also would keep them from having to paste a large chunk of code into the tool and instead it would be a nice link.
I tried:
<link rel="import" href="~my_CDN_link~">
but it seemed to only partially work. I didn't really understand the issue, but I saw that import is deprecated so this seems like it would only be a temporary patch.
At the end of the CDN link is a text file which contains:
HTML
<script>~my_scripts~</script>
<style>~my_styles~</style>
I was hoping there is some way to just resolve this link into the text which it contains and "paste" it into the head of the document. Maybe this isn't even the approach I should be taking? Should I instead provide two links? One for the stylesheet and one from the JavaScript? The JavaScript could then make a call to get the required markup and append it to the document. I'd love to keep it as one link if at all possible.
I am little new to web development and when I was searching internet about other topics, I have seen many people has put popular JS Libraries in Different Places of their websites.
eg: Inserting JS Libraries on the Very Beginning or Start of the <head> </head> section. (Before loading any JS Code or a CSS File)
eg: Inserting JS Libraries on the End of the <head> </head> section. (After loading all JS Codes and CSS Files)
eg: Inserting JS Libraries on the End of the <body> </body> section. (After loading all JS Codes, Texts, Images, Videos, CSS Files etc...)
So my question is this.
What is the best practice for inserting (where) following JS Libraries, Plugins and CSS Style Sheets to a web page for the most faster loading times and other advantages? - Please mention the reason -
JQuery and it's Plugins
Bootstrap 3.js
Modernizr.js
Angular.js
And another widely used JS Libraries which I couldn't mention here...
Normalize.css
reset.css
bootstrap.css + more
Thank You..!
There is no so called "standard" method. The choice of where to put the lines boils down to one question: When will I need the library?
You see, web files loads line by line, let's take the following as an example of what I mean:
<script>
document.getElementById("target").innerHTML = "changed"
</script>
<p id="target">unchanged</p>
#target isn't altered because the script was loaded before the element did. Web files loads procedurally. When the line of JavaScript is loaded. It is executed immediately, but the target element isn't. So it couldn't change the element.
Even with jQuery, there is the same problem:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#target").text("changed");
</script>
<p id="target">unchanged</p>
Therefore, we often use $(function(){}).
Back to the loading problem
People who put their <script> tags or <link> tags in the body (in front) or in the head, wanted to execute the script immediately, sometimes they won't use $(function()) or document.onload
People who put their <script> tags or <link> tags in the body (in the end) wanted to ensure all elements are loaded then execute the script or load CSS.
Conclusion
You should load independent resources such as jQuery first, then load dependent resources such as jQuery plugins. Then you try to decide when you want the resources to start loading, then put the lines in places.
You should put CSS links in the <head> tag because you don't want visitors seeing unstyled content before loading the CSS files.
If you can't decide or don't care about the time, put every <script> and <style> tags in the <head>.
Here is another post you might be interested in: Load and execution sequence of a web page?
CSS can added inside header tag & but put all JS Libraries and custom files just before closing closing body tag
<body>
//other tags
<script> All Scripts here </script>
</body>
By doing so you wont have to check if DOM content has loaded.
It decrease page loading time.Otherwise a js need to be completely loaded before DOM loading.
It also makes sure that all events are attached properly to DOM element.
I think this address all your concern specially the third one
CSS Sheets go in the < head >. The order of the CSS files matter so libraries should be put in first then you can put in the specific ones you have.
Javascript links go in the < body > but place them at the very end. That way your HTML content loads first then the JS loads and it will recognize all your selections. It is more efficient to do it this way.
The most important thing to note when placing your css and script tags is that the order you place them determines the order they are loaded in and if style or code is loaded later it over writes the code written before. So if you have css styling that assigns different styles to the same attributes of the same element then it is the one loaded later that takes effect. And with script tags it's important to remember that for dependency reasons. You should load the dependencies first so that they are there for the other scripts to use. Aside from that normally css tags are in the head and script tags at the bottom of your body element
I have developed a mobile application which loads 3 css and 7 javascript files. Problem is if the wifi signal is very slow, HTML loads before all javascript and stylesheets are loaded. Since stylesheet is not loaded, HTML looks disturbed and after few seconds (i guess after css and js are loaded properly), HTML structure automatically take correct format but I dont want to show the disturbed format and to do that I need to make sure that all js files are loaded first then only HTML should display.
If you have any idea how can this be achieved ?
You can do using Cache manifests. Read these resources:
http://appcachefacts.info/
http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5
https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache
Alternatively - ensure your resources are loaded before the body by placing them in the right place (head tag).
You should link to your external css stylesheet at the top of your webpage in the header like this:
<link rel="stylesheet" type="text/css" href="http://whiterootmedia.com/css/example.css" />
or insert your <style> element in the header. Likewise this should be done for your JavaScript if it effects your initial layout. Keep in mind that if you are using an external JS file, the browser will stop rendering your page at the point in your code where your external JavaScript file is referenced, to load that external JavaScript file. If you're using a lot of JavaScript, place it at the bottom of your page (contrary to what most people do) or use an onload() function.
The webpage is loaded top-to-bottom, so the problems you're having should be related to the order of your css (most likely).
I am trying to find out a solution which will notify user if some resources did not loaded correctly.
Already I founded following methods:
For CSS I found example in Trello source:
<div id="nocss">
Your browser was unable to load all of Trello's resources. They may have been blocked by your firewall, proxy or browser configuration.
<br>Press Ctrl+F5 or Ctrl+Shift+R to have your browser try again.
<hr>
</div>
And in last downloaded CSS there is a following CSS:
#nocss {
display: none;
}
For JS i founded following article: The best way to load external JavaScript, but I am not sure about it.
UPDATE
Small update: the best solution should work also with files from CDN, because they are the biggest problem. I had a site in which I added jquery and in companies behind the firewall it was blocked.
You can do pretty much the same with your javascript like you do with your css.
$(document).ready(function(){
$("#nojs").css("display","none");
}
This code uses jquery. If put into the beginning of your javascript file it hides a div like your css does once the javascript is loaded. (of course you need a <div id="nojs">)
You might want to add a class to the body for each successfully loaded JS file (in each JS file write code to add additional CSS class to the body element like so $(document.body).addClass("SomeClass")). Then simply check
if (!$(document.body).hasClass("ALL YOUR CLASSES")){
$("nojs").show();
}
This should do the trick.
If you don't have access to the files and cannot modify them then why do something like the following:
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script> (Taken from HTML5 Boilerplate)
Rather than being dependent on any other method, can you use
window.onload=function(){SomeJavaScriptCode};
or
<body onload="SomeJavaScriptCode">
Above ones will only execute after loading all contents of your page. (onload is most often used within the element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).)
This type question has been asked a number of times, but I can't find a solution that fits exactly what I am looking for..
I have a large App based in Ajax. Ajax responses includes HTML and JavaScript files used to build pages, widgets and so on.
I would like to load the CSS for these widgets on the fly via the ajax JavaScript calls. There can be any number of CSS files loaded dynamically as and when required. The most commonly accepted way (from what I can see) is to place an id on the link tag and target that, but as i am including an undetermined number of external style sheets, this will not work..
Any suggestions on how to solve this problem would be appreciated..
I am using Dojo to power the app, if that it of any help..
Thanks
We load as well many widgets on the fly in our app.
Each widget is an HTML + JS + CSS that is loaded with an IFRAME.
Once the IFRAME is loaded, you can loop on the LINK in the HEAD and import them in the main page.The same apply for the HTML, in our case it is a set of pure.js templates.
The JS extend automatically at load time a global object in the main page.
Be careful about dynamically loading CSS. CSS is loaded asynchronously so you can get race conditions with widgets that do layout in Javascript such as BorderContainer.
You can put all your necessary CSS in a file with import statements. For example, from claro.css
#import url("../dijit.css");
#import url("../../icons/commonIcons.css");
#import url("Common.css");
...
and then use the build tool to compact everything for production.