Having some issues getting the livejs.com script to automatically update web pages for changes made to HTML/CSS/Javascript. Below is my HTML on my localhost and it points to the web location of the script, which is accurate. Can you help me understand why my web pages don't update when I save my html?
<!DOCTYPE html>
<html>
<head>
<title>Page Title-Sam</title>
<script type="text/script" src="http://livejs.com/live.js"></script>
</head>
<body>
<h1>My First Heading adfasdfadf this is cool</h1>
<p>My first paragraph.</p>
</body>
</html>
Typo
type="text/script"
This is not a format of script that browsers recognise. It should be text/javascript.
In HTML 5 you should omit the attribute entirely.
Working locally
From the homepage:
Just include Live.js and it will monitor the current page including local CSS and Javascript by sending consecutive HEAD requests to the server.
If you are working from a local file (i.e. without a web server) then there is nowhere to make the HEAD request to. You need to be testing using HTTP(S).
Server support
The script checks a variety of headers, including Etag and Last-Modified. If your server doesn't set any of them for static files, it won't be able to tell when the file has updated.
Related
i tried to use fetch on localhost, but it didn't work.
here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
fetch("hi.txt").then(function(response){
response.text().then(function(text){
alert(text)
})
})
</script>
</body>
</html>
hi.txt file is in same folder with the script file.
below error is shown in console:
index.html:12 Fetch API cannot load file:///C:/~~~~/hi.txt. URL scheme "file" is not supported.
(~~~) is path
Since your URL is relative (it's just "hi.txt"), it's resolved against the URL of the page the code is running in. In your case, that appears to be file:///something — that is, a file you've loaded directly from your file system, not by requesting it from a server. Chrome doesn't allow fetching from the file scheme. The file scheme's origin is null. The Chrome team's interpretation of the Same Origin Policy is that no origin, not even itself, should match null. (A reasonable interpretation in my view, but opinions can vary.)
When doing web development, you want to be working through a server process because pages loaded directly from the file system behave differently in several sometimes-subtle ways vs. pages loaded from servers.
There are a couple of ways to do that:
Use the features of your IDE, if you use one, and/or extensions to it. For instance, for VSCode there's the "live server" extension which makes it very easy to run your code from a minimal server.
Use an actual web server process running locally. There are simple ones that are easy to install.
Use one of various "quick start" scaffolding tools that set up simple projects for you, often via npm (and Node.js), with a command you can use to build and run the project locally in development mode.
hi you are running your file like this way
-you are right clicking on your html file-opening with it browser. This way you are telling to browser to open your html file from your file location where you have saved it.Check in Your browser url bar you will get something like this C:/xampp/htdocs/xyz.html so this is your local directory file system. so now you have to first start your sever such as xampp or whatever server you have installed and then you type this localhost/filename or /subfolder name and / file name if you have stored it in subfolder...and hit enter.inshort you have to query to a server like you does in php file calling.....
You can just create a local web server (XAMPP) and upload there your hi.txt file. If you did that, replace
fetch("hi.txt")
with
fetch("http://127.0.0.1/hi.txt")
I have a few pieces of example JS and HTML that are stored in .js and .html files on my server. My server is run using cloudflare as a DNS server (I'm hosting it on my own server).
I read this code to display using code-prettify in my code, and it works in my local machine. When I push this code to my server, there are a few extra elements and additions to elements in my html.
This is the html file, and how it shows in the browser on my localhost
<!DOCTYPE html>
<html>
<script src="../../libraries/p5.min.js"</script>
<script src="../../libraries/p5.graphing.js"></script>
<script src="xySample.js"</script>
</html>
This is the html that displays when my server is through cloudflare
<!DOCTYPE html>
<html>
<script src="../../libraries/p5.min.js" type="5679b6186495861c611c81b4-text/javascript"></script>
<script src="../../libraries/p5.graphing.js" type="5679b6186495861c611c81b4-text/javascript"></script>
<script src="xySample.js" type="5679b6186495861c611c81b4-text/javascript"></script>
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/a2bd7673/cloudflare-static/rocket-loader.min.js" data-cf-settings="5679b6186495861c611c81b4-|49" defer=""></script>
</html>
On my cloudflare dashboard, I've been to the Page Rules tab and have passed in the url of both the HTML which my code should show up in as well as the location of the HTML thats being injected and disabled rocket loader for both. This didnt work, even after clearing cookies.
How do I stop this HTML injection by cloudflare. Thanks!
Just disable Rocket Loader in your Cloudflare dashboard
I want to load data from this text file that is in the same folder as the html file on my computer but it won't work. In process of learning Ajax and put together this little test for myself test.html and the text file test.txt. Any advice please, would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
function loadData()
{
var test;
test=new XMLHttpRequest();
test.onreadystatechange=function()
{
if (test.readyState==4 && test.status==200)
{
document.getElementById("test").innerHTML=test.responseText;
}
}
test.open("GET","test.txt",true);
test.send();
}
</script>
</head>
<body>
<div id="test"></div>
<button type="button" onclick="loadData()">Get data</button>
</body>
</html>
When I press the button, nothing happens. On the site where I saw a similar example the data from the text file is displayed above the button.
The problem is likely to be that you're accessing the files directly on your local system; web browsers have been designed not to allow this in order to prevent saved web pages loading personal files from your disks and uploading them to remote servers. In order to make it work, you'll need to run a web server locally and use that to view the files. I recommend the Apache web server, which is flexible and can be used on Windows, Linux or OSX.
Can you add the javascript in the desired *.html files without including in each of the *.html files? Like:
<html>
<head>
......<!-- no script-->
</head>
<body>
......<!-- also no script tags-->
</body>
</html>
So can I use a method that will automatically include my desired javascript file in my any future desired *.html files without manually adding <script> tags in my html files? Just like htaccess that will redirect all mis-leading urls in a domain to a 404 page.
Please tell me if I need to add any information.
*edit - I don't want to use iframe
Well the concept you're talking about is basically php templating.
You can make a single header and footer, and then all you have to change is the body. The header and footer gets included with the page server side.
Besides that there is probably some kind of automated program that can do it auto-manually.
I am looking for fast methods/ways I can redirect a HTML page to another page.
Currently I use meta-tags to redirect a HTML page to a python script that grabs the website HTML from a SQL database(grabs different HTML based on whether user is on a Mobile device) then sends that HTML back. But this is visibly slow, it shows a blank white page(redirect HTML page) then shows the python script page.
I know that its not the python script thats slow because if I just go straight to the python script(no redirect from the HTML page) then it loads very fast & with no white screen.
So for example; someone accesses http://mywebsite.com/contactUs.html which contains only the following HTML:
<HTML> <HEAD><META HTTP-EQUIV=Refresh CONTENT="0; url=cgi-bin/loadWebPage.py?webpage=50002"> </HEAD> </HTML>
<!-- This redirects to my python script that grabs the contact us HTML & prints it out(shows the webpage HTML) -->
Are there other ways a HTML file can redirect to a python script that will be faster?
Maybe I can use HTTP messages? Would the following text/code work in a HTML file?:
Status: 301 Moved"
Location:/cgi-bin/loadWebPage.py?webpage=50002
Would my last resort be AJAX or javascript to get the fastest result?
<html>
<head>
<script type="text/javascript">
<!--
window.location = 'http://mywebsite.com/cgi-bin/loadWebpage.py?webPage=50001';
-->
</script>
</head>
<body>
</body>
</html>
Place a file called .htaccess in the same directory as your HTML file. If the file is called "http://www.example.com/foo/bar.html" then .htaccess would contain:
Redirect permanent /foo/bar.html http://www.example.com/script.py
Note that the file that gets redirected does not have http://www.example.com, while the file you redirect it to needs the full URL.
If it's your own server, it's a little faster to disable .htaccess files, while instead putting the Redirect command in your httpd.conf file.
Don Quixote is correct about the .htaccess, I would just like to point out that
http://progtuts.info/198/the-anatomy-of-a-htaccess-file-hints-and-tips/
Will provide some examples and a whole lot of stuff on how to edit your htaccess files etc.
Redirect will definitely work.