how to load javascript file from absolute network path - javascript

Is there a way i can define my script tag to use absolute path instead of relative path so that my JavaScript files are loaded from a network location?
This is what i have tried:
<script src="file:\\\MyDFSDirectory\Test\TestApp\Scripts\jquery-1.7.1.js"></script>
This does not work. in FF, i get the error Security Error: Content at http://localhost/Test/Test.html may not load or link to file:\\\MyDFSDirectory\Test\TestApp\Scripts\jquery-1.7.1.js
In IE, I dont see the file being downloaded. In Network Tab (IE Dev Toolbar), it shows Received 0 B. If i take the URL and paste it in the File Explorer, it opens the JS file.
What am i missing here?

You are indeed running up against the security model of the browsers. The only way around this is to run a web server locally and serve up the files that way.

Related

How can I open the editor when I click browser or nodejs console file path?

For example, In my website I have print absolute file path using console.log
like this
console.log('/user/myname/work/projectName/index.ts')
I want to open the file in the editor when I click the message in the devtool in the chrome.
If I log it in nodejs how can I do the same thing?
node index.js
console.log(__dirname)
I want to open the __dirname file using current editor maybe vscode or webtorm and so on when I click the message in the terminal.
How can I do?
Thanks for your help!
All you need to do in most cases (most of the terminal apps already support this functionality for a long time out-of-the-box) is to prepend a correct protocol before the file path, so that the logged path becomes a file URI.
More on file URIs here: https://en.wikipedia.org/wiki/File_URI_scheme
In your case, you can just prepend file:// to the path and it should work out of the box, e.g.:
file:///Users/someuser/somefile.txt
Note that I used standard Unix/MacOS pathname for the example. The first two slashes depict the protocol (file://), the next one comes from the root path in the filesystem, this will look different in e.g. Windows environment.
So, if you want to use __dirname (note that you can still add other text to the logged message, file URI just has to be a part of it):
console.log(`I will be opening file://${__dirname}`);
This works due to the support of hyperlinks in terminal emulators. If you want to delve deeper into the topic, follow this GIST:
https://gist.github.com/egmontkob/eb114294efbcd5adb1944c9f3cb5feda

Why can't I get my script tag src's to work?

I have been coding up a localhost, and I made the localhost by using of course a JavaScript file to do so, and I then made it reference an HTML file. However, I noticed that when I am using localhost to serve up the HTML file I get this error:
"GET http://localhost:3333/filetesting.js"
The filetesting.js is that js file, there are also other things I'm referencing too, like websites. I'm referencing it by using script tag src.
I looked at the network on developer tools of it and it says it's a 404 error not found. I'm trying to figure out how to reference my script tag src's without having localhost:3333 go before it.
When I run the HTML file without using the localhost, it works just fine when it comes to the script tag src's. If you do not entirely understand what I'm asking for, just ask.
Assuming that your script will always reside in the root level of your website, you can simply target it with the root-relative prefix /:
<script src="/filetesting.js"></script>
This will load your script from the root, regardless of the site the file is hosted on. For example, on http://localhost:3333/ it will load the file from http://localhost:3333/filetesting.js, and from http://localhost:3333/folder/, it will attempt to load the file from the same location.
If you move your files over to a proper website, it will still work the same way: www.example.com will look for the file at www.example.com/filetesting.js, and www.example.com/folder/ will look for the same file at www.example.com/filetesting.js.
Hope this helps! :)

Is it mandatory to mention protocol to load jQuery?

Below code,
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script type="text/javascript">
console.log(jQuery);
</script>
works fine in firefox browser after src is modified to "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"(remote file) or "../js/jquery.min.js"(local file)
Otherwise, dev console gives Reference error: jQuery is not defined
I would like to test the code with remote library but not local
How do I understand this problem?
Leaving the scheme off the URL means that it is scheme relative.
If the HTML document is loaded over HTTP then the JS will be too.
If the HTML document is loaded over HTTPS then the JS will be too.
If the HTML document is loaded over FILE then … the JS won't be because file://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js doesn't exist.
Do your local testing on a local web server, don't load your HTML directly from your file system.
As mentioned by Mosh Feu, if you run a file locally, without a webserver, you cannot use protocol relative paths to load jQuery. That's because it is trying to find a local reference: file://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js.
Well, you could if you have jQuery locally in a folder /some/where/jQuery.js and you reference it with <script src="//some/where/jQuery.js>
So yes, if you're running pages from the disk directly, you must specify the protocol if you want jQuery from a CDN. See the first comment on http://www.paulirish.com/2010/the-protocol-relative-url/
Save yourself some trouble, install a local web server.
You must be viewing the file locally without using a web server which results in a wrong URL when the protocol is not explicitly specified.

loading html file into html with jquery for offline/local project

I'm trying to load an html file into another html file for an app-project. Right now I'm doing it like this:
$.get('mod_navigation.html', function(data) { $('body').append(data);});
works as it should and is all I need :-) ... yet it does only work when i upload it on my server and test it via browser from there. Doing it via browser offline, so with the local files, the html file does not get included. Since the app later should work "offline" this does get me worried. How can I get this code to work offline/local?
Thanks in advance,
ANB_Seth
Can you use load()?
Load can work in localhost:
$('body').append($('<div id="nav">').load('mod_navigation.html'));
This appends a div to the body with the content (which is more common).
To replace the body entirely, just use:
$("body").load('mod_navigation.html');
Just remember that load paths from the root directory, not from the parent page's directory.
In localhost, there are restrictions. You will get a Access to restricted URI denied from a Get.
You could try JsonP or you could use HTML5 web app file storage.

Cannot import a local js file in html page [duplicate]

For development purposes, I'd like to be able to easily load locally-stored scripts into the browser instead of having to copy-paste to the console.
Creating a new <script> element isn't working, it gives a Not allowed to load local resource: file://.... error (in Chrome).
Also, creating a userscript won't work--I'd have to re-install it every time I make an edit.
Is there an alternative way to easily load a local script via a bookmarklet/etc?
In Chrome, you can create an extension that holds all of the local files that you need to load. It will make your files accessible via chrome-extension://... instead of file://...
Make a file named manifest.json in a new folder and fill it with:
{
"name": "File holder",
"manifest_version": 2,
"version": "1.0",
"web_accessible_resources": ["test.js", "other.js", "yetanother.js"]
}
Then, put all the scripts you want to load in that new directory, and make sure they are included in the web_accessbile_reources manifest list. Load the extension by going to chrome://extensions, enabling Developer Mode, and selecting the new folder with Load unpacked extension....
Now you can access all the files in your extension directory using chrome-extension://[app_id]/[file_name], where "app_id" is the hash listed for the extension on the chrome://extensions page. Note that because the protocols and hostnames differ from where you've doing your actual work (unless you decide to do all your development in the extension folder, which might be acceptable to you), the extension resources are cross-domain and can only be loaded via <script> tag.
Now from the console, you can do:
var s = document.createElement("script");
s.src = "chrome-extension://aefigdoelbemgaedgkcjpcnilbgagpcn/test.js";
document.body.appendChild(s);
(Assuming your file is test.js and your app id is aefigdoelbemgaedgkcjpcnilbgagpcn.)
It's a quite bit to type, I know, but perhaps you can store the chrome-extension://[app_id] part as a shorthand variable?
Sadly, Chrome doesn't allow you to load local files via AJAX; however, you can work around this limitation by launching the browser with the flag --disable-web-security (details vary per host operating system).
run chrome as:
chrome.exe --allow-file-access-from-files
from CLI
you need to run local http server
this is a good document for this:
https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server
Have you tried a relative path from your page to your js file liek so...
src='/js/javascript.js'

Categories