For fun, I'm trying to copy the source code of entire websites into an .html file and run it locally from my Desktop (not public). While mostly everything loads like it appears on the original website, I am having trouble displaying the actual content of interactive graphs.
For example, the NOAA's Global Monitoring Laboratory displays an interactive version of the Keeling's Curve, which features two graphs that can be manipulated from the bottom (timeframe), hovered over to display figures, etc.
It should look something like this:
But instead, my local file looks like this:
As you can see, the slope/plot itself is missing, as well as some of the other features below and to the side. What am I doing wrong? Obviously, the website's actual stylesheet has shortened file paths (e.g. /gmd/css/gmd.css), so I made sure there were direct links in the local HTML file (e.g. https://esrl.noaa/gov/gmd/css/gmd.css).
I copied the entire HTML code in the Elements tab of the Inspect Element console (everything after <!DOCTYPE html>). Is there something else I should add to the local file?
Update: There was a long list of errors in the console, but only four actual lines of faulty code. Both the errors and the faulty code are shown below:
Are you loading the HTML directly from local disk? In general you can't do XMLHttpRequests for local files.
Your best option is to spin up a small HTTP server and load the content from there. Two good options are Python's http.server:
python -m http.server
or node's http-server:
npm install --global http-server
http-server
The first script tag(highlighted) in error contains a typo(/gov instead of .gov). It should be:
https://esrl.noaa.gov/gmd/js/dygraph.min.js
instead of
https://esrl.noaa/gov/gmd/js/dygraph.min.js
Related
I am working a project in which I have to insert thousands of trigonometrical shape in a webpage. Basically I'm working on a project of converting an ancient book in html. But the problem is- drawing a svg in Adobe illustrator or in any software is time consuming and managing thousands of svg shape in one html page seems very difficult for us. I have searched a lot in stack overflow to draw a shape quickly and I found this library which convert latext into svg which seemed to be a great solution for us. See a live demo here. We simply create a shape in Mathcha and copy the latext of the shape and insert it in our html page.
But the problem is when we import the tikzax Library in the head of our html page and insert the latext code of that shape (as instructed in the documentation) in the body like this:
<script type="text/tikz">
\begin{tikzpicture}
\draw (0,0) circle (1in);
\end{tikzpicture}
</script>
we can't get the ouptut. It only shows a blank html page . The latext code does not effect in any part of the html page. In short we are unable to render the latext in html. Can someone please explain how to render these latext into svg on a webpage. we are unable to find a way to get of it.
Can someone please explain how to render these tikz latext into svg format in a webpage ?
I've attached the screenshots of the html code and the output of it in the chrome browser.
Screenshot of Code:
Output of the Code in Google Chrome (Blank page) as I have told:
I tried to setup the example and ran into two issues. I'll explain how to solve those. However, before you do this, try opening your own example again. After I fixed the issues, I went back to look more closely at the problems, but.. it worked. There is a small chance that the maintainer of the files adjusted the CORS-Headers just while I tried this out - so maybe your problem solved itself. In case it doesn't work for you just like that, here is how I solved the initial problems:
The library doesn't allow requests from other domains, so you can't just include the JS file from tikzjax.com. To solve this, you have to download the source files and put them in the same folder. The js file itself is not enough, you have to download these files:
https://tikzjax.com/v1/tikzjax.js
https://tikzjax.com/ef253ef29e2f057334f77ead7f06ed8f22607d38.wasm.
https://tikzjax.com/7620f557a41f2bf40820e76ba1fd4d89a484859d.gz
Then change your script tag to that local js file: <script src="./tikzjax.js">
The script uses fetch to get other files, and this is not working, when opening the page with the file:// protocol (you'll get this error message in the console: Fetch API cannot load file:///ef253ef29e2f057334f77ead7f06ed8f22607d38.wasm. URL scheme must be "http" or "https" for CORS request.
So you have to setup a local webserver to show the page on e.g. http://localhost:8080. If you're comfortable with the command line, you can use the npm package http-server for such cases. If you haven't installed npm and/or node, you can install it from here (npm is installed with node). Then run the command npm install -g http-server. Then navigate to the folder where your html and js files are (in the terminal) and execute http-server. This will setup the server and the circle should render there.
I am a newbie in programming and I have a task here I need to solve. I am trying to get the html source code of a webpage using Java / Webdriver method getPageSource(). Problem is, that page is somehow generated, probably by javascript, so the result I get is html code containing just page skeleton - a table that is empty, not filled by data. But, there is tag like <script type="text/javascript" src="/x/js/main.c0e805a3.js"></script> in the very bottom of that html code.
The question is, how can I force Webdriver to run that Javascript and give me the result - the whole source html with data. I already tried to use this (js.executeScript("window.location = '/x/js/main.c0e805a3.js'");) before calling getPageSource() but not successful.
Any help will be appreciated, thanks!
There are quite a few setups, now, that can run the Java-Script on a web-page. The most well known, I think, is likely Selenium since I think it has been around for a while. Others include karate, Puppeteer, and even an old tool called Rhino. Puppeteer is a Google, Inc. project that uses Java-Script (server-side Java-Script, called Node.js. They don't like us comparing, contrasting libraries here.
I haven't had the time to engage Selenium, yet, but I write HTML parser, search and update code all the time. If your only goal is to load a page whose contents are dynamically "filled in by AJAX calls" - and what I mean by that, you only want the contents of an HTML that would normally see when you visit the sites web-page, and you are not concerned with button presses then the one I have been using for that is called Splash This tool does have the ability to let you invoke Java-Script, but if all you want to do is see the JS on a page dynamically load the table, then, literally, all you have to do is start-the tool, and add one line to your program.
On Google Cloud Platform, these 2 lines will start a Splash Proxy Server. If you are writing your code on AWS (Amazon) or Azure (Microsoft), it would likely be similar. If you are running your code in an office on the local machine, you would have to research how to start it.
Install Docker. Make sure Docker version >= 17 is installed.
Pull the image:
$ sudo docker pull scrapinghub/splash
Start the container:
$ sudo docker run -it -p 8050:8050 --rm scrapinghub/splash
Then, in your code, all you have to do is the following:
// If your original code looked like this:
URL url = new URL("https://en.wikipedia.org/wiki/Christopher_Columbus");
HttpURLConnection con = (HttpURLConnection) url.openConnection();
con.setRequestMethod("GET");
con.setRequestProperty("User-Agent", USER_AGENT);
return new BufferedReader(new InputStreamReader(con.getInputStream()));
Change the first line of code in this example to this, and (theoretically), and dynamically loaded HTML tables that are completed with the onload page events will be automatically loaded before returning the HTML page.
// Add this line to your methods
String splashProxy = "http://localhost:8050/render.html?url=";
URL url = new URL(splashProxy + "https://en.wikipedia.org/wiki/Christopher_Columbus");
For most web-sites, any initial tables that are filled by JS/jQuery/AJAX will be filled in. If you are willing to learn teh Lua Programming Language, you can also start invoking the methods there. It has been pretty convenient for my purposes, since I am not writing web-page testing code (code that simulates user button presses). If that is what you are doing, Selenium is likely worth spending time learning / studying the A.P.I.
I am creating browser based video editing tool. I want a user to first download a ~70mb javascript file and store it somewhere on his computer. I want to link that file when my website is opened. How can I achieve that.
EDIT
What i meant is that there are various files like js1.js,js2.js... all sums upto 70mb . So i will offer a zip folder to download and only link js1 or js2 file etc depending on the effects user wish to apply
i am sorry to inform you but i think there is something really wrong with what you are trying to do.
A "solution" would be to just cache the javascript on the user's browser so any subsequent requests parse the cache instead of requesting the resource again from the server.
You should know however that if you are in need to download ~70mb of a javascript file you are doing something wrong. I have a whole web app project that when published the total size is around 60mb, all files required to properly run included, and its a damn big codebase in there.
I find it very hard to believe there is ever a need for a single javascript file to be that big, in any case maybe a simple caching should do the trick
That is actually done automatically. Once you add a <script> tag with a link to a local js file (also stored on the server) the file is loaded automatically.
See HTML <script> src Attribute for more information on that.
You can only reference to js files on the server. Files on the server could look like this:
index.html
somefancyjsfile.js
You can then reference from inside your html file to the js file via the <script> tag.
I'm not sure though if the size is not a bit too much...
I am referencing two JS files in my map.HTML header. Chrome console gives
Uncaught SyntaxError: Unexpected token <
Here is why I'm confused. When I click on the Chrome Console error message, it takes me to the Sources tab. Under Sources, it puts me on the relative JS tab, and shows code starting with < !DOCTYPE html> then continues with a ton of code that is not in my map.html file or JS file. Presumably this is generated when the JS is read?
The two JS files are:
https://github.com/socib/Leaflet.TimeDimension/tree/master/dist
https://github.com/calvinmetcalf/leaflet-ajax/tree/gh-pages/dist
I am opening map.HTML locally with Chrome using a simple python server using a batch file (python.exe -m http.server).
I am sure this is very basic, but it's confusing me because I reference plenty of other JS files both online and locally and I don't get this error.
Thanks
If you try https://github.com/socib/Leaflet.TimeDimension/blob/master/dist/leaflet.timedimension.min.js in your browser, you will get an HTML page.
If you try https://raw.githubusercontent.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js you will get what seams a source javascript file. But your browser may also consider it text/html, because that's what github sends in content-type header.
You can use third party sites which will serve files with appropriate content-type header, (example: https://rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js ).
In the future, try to do more research before posting here, otherwise a lot of people are going to downvote your questions, and even insult you.
A simple Google search for the differences between html and javascript may be a good start. The first step would be to remove those doctype lines. They mean nothing in Javascript. Just like the word granola has no meaning in Japanese. Different languages.
However, looking at your code, I don't see any DOCTYPE text in your javascript. In order to really debug this, you're going to want to open your webpage (html) in a browser (I recommend Chrome) and press F12 to open the developer tools. Go to the console and trace the error back through all of the files to find the origin.
In order to check and make sure that you're trying to pull javascript files and not html, take all the src urls you're using and paste them in a browser. If you land on a webpage, that url will serve up html, not javascript like you want. If you get a wall of text, you're probably referencing it correctly.
Correct: https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js
Incorrect: https://github.com/socib/Leaflet.TimeDimension/blob/master/dist/leaflet.timedimension.min.js
Hopefully this helps before this question gets deleted or put on hold. Also notice that people are going to downvote me for actually answering and trying to help.
You can't directly reference code stored in a github repo like you're trying to.
The URLs you're listing aren't javascript files; they're github webpages. That's why they contain HTML doctypes and code you don't recognize -- it's the github website code.
You can get the URL for the actual javascript files by clicking the "raw" button at the top of any of those pages (after selecting a specific individual file -- the urls you gave were for directories, not individual files.) For example:
This is an HTML file: https://github.com/socib/Leaflet.TimeDimension/blob/master/dist/leaflet.timedimension.min.js
This is the raw javascript:
https://raw.githubusercontent.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js
(That said, I don't believe it's a good idea to treat github like a CDN; usually you would use that purely as a repository and host the actual files in use elsewhere.)
I'm completely new to JavaScript and D3.js. I have done some work in recent days, like making appropriate json object for the graph, and wanted to know how to get this example running in particular. Any direction to appropriate links would be great, though I would prefer to get an answer in the form of any missing tags or any details I need to take care of.
Note: I have to run it locally, not on server-client model.
Update: I have done it a lot of times what Bill answered, it didn't work. So I tried again and I opened the console in browser to check for any errors. Got this:
Failed to load resource: file://d3js.org/d3.v3.min.js
net::ERR_FILE_NOT_FOUND
index.html:23 Uncaught ReferenceError: d3 is not defined
The point is that you cannot access files on your computer from javascript using file:// (think that people could access all your file...).
So you have to use <script src="address/d3.js"></script> here, address correspond to the address of your server (http://domain.com or http://localhost) or the relative path.
For example, you can download d3.js next to your html file (same folder) and just type <script src="d3.js"></script>
Hope this helps
You can do the following:
Go to https://gist.github.com/mbostock/4062045
Click on the Raw button next to index.html
Copy everything and paste it into a file on your computer called index.html
Go back and click on the Raw button next to the .json file
Copy everything and paste it into a file on your computer called miserables.json (make sure this file is in the same folder as index.html)
Double click on index.html, it should open in your browser