My page uses Less files that are compiled on the client side. I want to load some of those files after page finished loading.
I tried the "Less in the browser" way, but it seems to only work for files that were originally declared in the head part of the page. Declarations I add later (from Javascript) are not processed by the Less...
Another way I tried was "Programmatic Usage", but in this case I have to inject the CSS code myself. It means I cannot use less.modifyVars() any more to change styling later (or I have to trigger recompilation myself and then replace the generated CSS, which I want to avoid).
I like the first way more, but I don't know how to load files after page finished initial loading. Maybe there is a function to load Less file?
Thank you!
I think I found solution:
less.registerStylesheets().then(
function () {
less.refresh();
}
);
First function will reread declarations. The second one will recompile all files (actually not very good).
I have two HTML files that are generated from a particular application; one is a navigation "header" file and the other is a "content" file that the navigation file points to.
I have access to these files but I don't have control over how they're generated.
The files currently fit together by a third file "index.html". The index file uses document.write() to create a frameset tag and then two frame tags, one for each HTML file noted above.
I'm writing a replacement index.html file that mimic's the frameset with section tags and then adds in some features that allows the user to perform processes on the "content" html file.
So far I'm able to accomplish this by using the jquery load() method to grab the navigation and content files, but when I take the files offline (these files are meant to be consumable directly from the desktop) it does not work. I read into the jquery documentation for load() and see that it needs to be run from a server.
My questions is: is there any way to load the content from one html file into another html file without being in a hosted environment? I've seen it work in other solutions like the bwip-js and it looks like it's just using the jquery load(), but there must be something I'm missing.
Any suggestions?
I am very new with Imacros and javascript and I already learn a few things here. But I still got some problems..
I want to execute different javascript file on one single imacros file. The javascript is too long if I place it in a single file so I decided to put some functions on a separate .js file.
so I have
imacrosFile.iim = this is where I want all the functions from different .js files to be executed
my different .js files where functions are coded
script1.js
script2.js
script3.js
script4.js
Thanks,
in JS file place
iimPlay("macro1.iim")
iimPlay("macro2.iim")
And make sure that each macro you play like this is located with #Current.iim macro.
I have a log.js file(it contains log function along with some properties) for debugging purpose.
I have two other js file which are the controlling various behavior of the web application.
Now I need to include the log function considering not to repeat the debug function in both the js file and just calling the file name.
How do I do it?
The idea is to make my code clean and separate them in other files to limit the size of a single js file.
Include all .js-files in the html page. Include log.js first.
Call the functions all you want.
All functions in all files are included in the source and are "written on the page", any functions can be accessed from anywhere within the HTML as they all become essentially one document. Make sure you do not have duplicate functions as this could cause an issue
I've seen quite a few questions regarding loading a .js file into an HTML file, and I know how to do that. However, say I have the file "classlist.js." How can I go about using the classes defined in that javascript file in another javascript file? I keep seeing answers that suggest using the
<script type="text/javascript" src="filepath"></script>
syntax. When used in a .js file, though, it throws a syntax error on the "<" so I assume this code is invalid.
So, how would one utilize a function in a .js file that was defined in a separate .js file... that works, and is efficient (If there is one)?
EDIT:
I'm going to clarify some thing for the future, since I'm still fairly new to Javascript, and it looks like there were a number of other factors I didn't even know came into play.
I had two .js files, one of which declared classes that were extensions of classes in the other file. I wanted to use the extended classes in a webpage, and I thought I had to load the originial classes into the second .js file, THEN load that .js file into the HTML file. I wasn't programming completely outside of HTML.
Sorry for any misunderstanding, hopefully this thread is helpful to somebody else in the future.
Assuming you are talking about javascript in a web browser, all js files are loading in an html file, typically index.html. You need to use the script tag to load the javascript in the proper order in that html file, not in the javascript file. So if file B requires the things in file A, you need to load file A first, meaning put the script tag that loads file A before the script tag that loads file B.
Two answers:
Non Browser
If you're using JavaScript in a non-browser environment (NodeJS, RingoJS, SilkJS, Rhino, or any of a bunch of others), the answer depends on the environment — but many of these use the CommonJS require mechanism. E.g.:
// Get access to public symbols in foo.js
var foo = require("foo.js");
// Use the `bar` function exported by foo.js
foo.bar();
Browser
If you're using JavaScript in a browser, you put script tags like the one you quoted in the HTML, in the order in which they should be processed (so, scripts relying on things defined in other scripts should be included after the scripts they rely on).
If you want to maximize efficiency in terms of page load time, combine the scripts together on the server (probably also minifying/compressing/packing them) and use just the one script tag.
The answers posted above should do the trick however since you mentioned doing it efficiently you can consider taking a look at javascript module based loaders like require js( http://requirejs.org/ ) based on AMD
You have to put the reference to classlist.js in your HTML file (not your Javascript file), before any other SCRIPT element which requires it. For example, within the 'head' element:
<html>
<head>
<script src="testclass.js"></script>
<script src="file_using_testclass.js"></script>
<script>
var tc = new TestClass();
</script>
</head>