How to integrate images on CDN with JS on CDN - javascript

I've moved all my CSS and JS to the Cloudinary CDN and everything works except where the JS files need to grab an image.
I've got a index.html file thats pulling the JS and CSS from the CDN without issue but when JS goes looking for any image I get an error saying the resources is missing.
On the CDN I've created a few folders for CSS, JS and images and used root paths in JS as normal, example: "./sprites/img1.png".
When I have this folder/img in the same directory as the local HTML file it works fine.
If I move that folder to the CDN it cant find the resource.
Looks like once the JS is served to the local file it also expects local resources.
Is there anything I can do to prevent this besides placing the HTML file on the CDN as well. Cloudinary doesnt allow HTML to be served to the browser you see.
Thanks for any help and if you need further info dont hesitate to ask.

Found the issue.
The paths in external JS files are relative to the Page they are included in (in this case the index.html page), not the actual location of the file.
Thats why it was searching the local directory and not the CDN.
Solution comes from another Stack Overflow question:
Relative Paths in Javascript in an external file

Related

Apache2 not serving javascript/css when using CGI.pm perl script to render web page

I am working on a college assignment which requires me to stick with perl and cgi.pm to render webpages.
With my current implementation I have included a javascript cdn for a javascript library (p5js) and another script tag that points to a js file present in the cgi-bin folder.
All the html content seems to be working fine, but I keep getting a 404 error saying that the files can't be found, despite it being there
The webpage works fine when executed as a regular html page.
If the cgi-bin directory is not the expected location, please let me know where to place the js files as well as how to point to them using a the script tag
From the browser view the js files are static content so apache try to get it from the DocumentRoot. Put it there or better make a directory DocumentRoot/js an locate all js files there. The path part of the URL looks then like /js/p5.js

Remote js file works from a directory but not a subdirectory?

I'm just learning javascript, making an external radio player for other website owners to embed.
I'm including .js files in my head from a subdirectory /scripts/externalplayer on my top-level domain, which doesn't work.
Putting /externalplayer on the root of the domain and calling it from there works just fine. Is there a specific way of linking js from a remote URL that's not obvious?
Note: Including a .css file from the subdirectory worked fine.
<script src="http://example.com/externalplayer/jquery-3.4.1.js"></script>
<script src="http://example.com/externalplayer/mediaelement-and-player.min.js"></script>

GitHub Pages + Jekyll + Bootstrap + CDN question

I'm new to GitHub Pages and Jekyll, and moving my blog to it.
I decided to use CDN for Twitter Bootstrap, so just copied example links from official website to the default.html template which is in the _site/_layouts/default.html
But when my site is generated, Jekyll creates a local copy of css on the fly, so instead of pointing to the CDN, it creates a link to /assets/styles.css file, but styles are not applied.
Also, at the default.html page bottom, instead of 3 JavaScript files on CDN I got only one unknown to me pointing to CloudFlare.
What I have to do to bypass Jekyll processing links to the files located on CDN?
The problem was in the folder structure. I put my whole website in the _site subfolder (you may notice that from the path I provided in the question). The website generated correctly after I moved all of its content to the root folder.

How to share TinyMCE Javascript source across multiple ASP.Net sites

I'm using the Moxie code TinyMCE text editor (http://www.tinymce.com/) for content entry on a number of sites. At the moment I have the tiny_mce folder sitting in the folder of each site. This means that I have lots of copies of the same .js files.
I think it would be better to have one copy of the tiny_mce folder and reference it for each site - so if I make a change, or upgrade the tiny_mce I only have to do it once. Also, if I make a new site I can reference the same one to save needing to upload or copy another 9Mb of duplicated files onto the server.
I have tried putting the tiny_mce into a folder outside the individual websites and setting it up as a site on localhost that they can see.
I then include the javascript from each site like this:
<script type="text/javascript" src="http://localhost/MCE/tiny_mce/tiny_mce.js"></script>
I'm pretty sure the the file can be found by the site - I've tested with a simple javascript alert box test which works fine - and if I "View Source" and check the link it's using, I can access the tiny_mce.js file - which is the correct file.
However, the tiny_mce doesn't work.
I'm guessing there are some kind of dependencies or configurations that I'm not aware of that are causing a problem, but I'm not sure quite where to start to find out what isn't working. (I don't get any errors, it just doesn't load the tiny_mce)
Has anyone managed to get tiny_mce to share it's source files across multiple sites? Does tiny_mce require the .js files to be inside the root folder of the site in order to work?
Has anyone managed to get tiny_mce to share it's source files across
multiple sites?
I have not tried it yet.
Does tiny_mce require the .js files to be inside the root folder of
the site in order to work?
No.
Depending on your server system and in case your different website files are stored on one physical server device you could use a hardlink or softlink to the shared tiny_mce_folder (which should be accessible from the net too).

Why isn't my javascript working on a local HTML file using UIWebView loadRequest:?

I have a script that generates a temporary HTML file that has links to external Javascript files that it requires to run.
<script src="file:///Users/raphaeldefranco/Library/Application Support/iPhone Simulator/User/Applications/BA9E724E-76BD-4F28-B224-54B4C73786D6/LogTen.app/Reports/Time by Year/../../Tools/PlotKit/Base.js" type="text/javascript"></script>
The links are absolute and they are to the right place (There is a CSS link as well that uses the same method and it works fine). I've been using the following, which finds images and CSS just fine but for some reason won't run the .js.
[webView loadRequest:requestObj];
I've tried changing the encoding of the files. I had a problem getting the CSS to work until the file was in unicode, but so far no luck. All the Script files are bundled with my project etc.
Thanks in advance!
You can't access things outside the application bundle directory. Just copy them in and access them without the path. They will be in a different location anyway when installed on the device.

Categories

Resources