javascript ,automatically show the content of the file on the HTML page - javascript

I have a text file (a.txt) in the same folder as my HTML file (index.html), is there any javascript function that automatically on page loading, reads the content of that text file and put it in the designated tag element
I used the following code but it's not working
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Page</title>
<meta name="generator" >
<style type="text/css">
</style>
<script type="text/javascript">
async function getTextFile() {
const fileText = await fetch("a.txt").text();
const tagElement = document.getElementById("about_layer");
tagElement.innerText = fileText;
}
window.onload = getTextFile;
</script>
</head>
<body>
<div id="about_layer">
</div>
</body>
</html>

Related

amp-script Script hash not found. amp-script[script="hello-world"]

I'm trying to use an amp-script but I get this error:
"[amp-script] Script hash not found. amp-script[script="hello-world"].js must have "sha384-BdjJFLYaZaVK-HgidJ2OFtpYsczYQc4N42NgKo7MOkF88iPbpdDWPgf86Y6PyEKO" in meta[name="amp-script-src"]. See https://amp.dev/documentation/components/amp-script/#security-features."
error image
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<meta class="trackPerformanceTag" content="AMP">
<script src="https://cdn.ampproject.org/v0.js" async></script>
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<meta name="amp-script-src" content="sha384-generated-sha">
<title>title</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
</head>
<body>
<amp-script layout="container" script="hello-world" class="amp-script-sample">
<button id="hello2">Click!</button>
</amp-script>
<script id="hello-world" type="text/plain" target="amp-script">
const button = document.getElementById('hello2');
button.addEventListener('click', () => {
const h1 = document.createElement('h1');
h1.textContent = 'Hello World 2!';
document.body.appendChild(h1);
});
</script>
</body>
</html>
You need to copy full hash shown in the error message in dev tools console.
In this case;
sha384-BdjJFLYaZaVK-HgidJ2OFtpYsczYQc4N42NgKo7MOkF88iPbpdDWPgf86Y6PyEKO
and paste it to meta in the header:
<meta name="amp-script-src" content="PUT_THE_SHA_HERE">
Every time you will change something in the script new hash will be generated and you need copy/paste it again.
See the screen with error form the dev tools console

JQuery '$' getting "ReferenceError: $ is not defined" when in my .JS file

My code works when I write the JS in HTML like so:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type = "submit" value = "Save">
<script>
$("#submitButton").on("click", function() {
console.log("result!");
});
</script>
</body>
but when I split it out into it's own .js file, the JS file doesn't recognise the JQuery '$' sign. This is how it currently looks in both HTML and JS (I added the .JS source to the HTML file):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
**<script type="text/javascript" src="addressBook.js"></script>**
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type = "submit" value = "Save">
</body>
and in the addressBook.js file:
$("#submitButton").on("click", function() {
console.log("omg, you clicked me!");
I get the following error logged to the console when i click the button:
$("#submitButton").on("click", function() {
^
ReferenceError: $ is not defined
Any help would be appreciated!
Thanks
Wat selfagency said + put the script tag before the end of the body.
html file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type="submit" value="Save" />
<script type="text/javascript" src="addressBook.js"></script>
</body>
</html>
addressbook.js
$('#submitButton').on('click', function() {
console.log('result!');
});
The reason why the script tag in the head in this case doesn't work is because the button did not yet exist in the DOM when the addressBook script was run. Described in more detail here.
I don't think that you need to add the script before the end of the body.
It works after I created addressBook.js and change the jquery
$('#submitButton').on('click', function() {
console.log("omg, you clicked me!");
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script type="text/javascript" src="addressBook.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type="submit" value="Save" />
</body>
</html>
<script>
$("#submitButton").on("click", function() {
console.log("result!");
</script>
That is not proper syntax. It should be:
<script>
$(document).ready(function () {
$("#submitButton").on("click", function() {
console.log("result!");
});
});
</script>

Change meta tag content dynamically through javascript

I want to change the meta tag content i.e. refresh rate and url dynamically using javascript. Using a button to enable javascript function. Tried 3 alternatives but not working. Please help.
Thanks,Amresh
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag"
content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">
<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
<!--document.querySelector('meta[name="description"]').setAttribute("content","5;URL=http://google.co.in");-->
<!--document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");-->
var m = document.createElement('meta');
m.name = 'description';
m.id = 'mymetatag';
m.content = '5;URL=http://google.co.in';
m.HTTP-EQUIV= 'refresh';
document.head.appendChild(m);
}
</script>
This works for me.
The issue could have been that you tried a first code which did not work and you commented the code with HTML comments <!-- [...] -->instead of Javascript comments: // [...] or /** [...] */.
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag" content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">
<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");
}
</script>
</body>
</html>
I looks like you misuse the functionality of metatags, JS doesn't save the state between requests. And, BTW, you can do reload/redirect using the javascript itself.

On google site, html cannot work with error code 502

I made a Google site for my internal use.
On this site, one page was not suitable for iPhone so I made it in HTML and JavaScript.
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="./isIphone.js"></script>
<title>Check iPhone</title>
<meta charset="utf-8" />
</head>
<body onload="isIphone()"></body>
</html>
and JavaScript code as below:
function isIphone() {
var osVer = "iPhone";
if (navigator.userAgent.indexOf(osVer) > 0) {
var childWindow =
window.open('https://calendar.google.com/calendar/');
}
else {
var childWindow = window.open('https://xxxxxxx/calendar/main');
}
}
Above code worked fine until last week, but from yesterday it does not anymore and produce error code 502.

tinyMCE - Add style to <head> on getContent() method

I'm using timyMCE version 3 { majorVersion : '3', minorVersion : '5.4.1' }. When I put Content in textarea, I got below data.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p> Content </p>
</body>
</html>
What should I do to change it to below output as I call getContent() method?
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="UTF-8">
<style>
/** Specify a font named "MyFont",
and specify the URL where it can be found: */
#font-face {
font-family: "MyFont";
src: url('file:///android_asset/fonts/RSU_Regular.ttf');
}
body { font-family:"MyFont"}
</style>
</head>
<body>
<p> Content </p>
</body>
</html>
Can you help me please?

Categories