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
Related
I'm trying to use two script hosts in case one doesn't show but my catch statement doesn't seem to be catching status 404 errors when I purposefully mess up the url. Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/p5#1.0.0/lib/p5.js"></script>
<script onerror="error()" ></script>
<script src="blockman.js"></script>
<script src="https://craigapphostl.w3spaces.com/scripts.js"></script>
<title>Document</title>
<button onclick="f()">Test</button>
</head>
<body>
</body>
<script>
function error(){
//added l's on the end to both script host links
alert("some thing hs went wrong trying back up host")
}
try{
var t=document.createElement("script")
t.setAttribute("src","https://vdkhiyrhibxzmpiophft.w3spaces.com/scripts.js")
document.body.appendChild(t);
}
catch(e){
alert(e)
}
</script>
</html>
This type of error cannot be catched with try...catch. Instead, listen on the error event.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/p5#1.0.0/lib/p5.js"></script>
<script onerror="error()"></script>
<script src="blockman.js"></script>
<script src="https://craigapphostl.w3spaces.com/scripts.js"></script>
<title>Document</title>
<button onclick="f()">Test</button>
</head>
<body>
</body>
<script>
function error() {
//added l's on the end to both script host links
alert("some thing hs went wrong trying back up host")
}
var t = document.createElement("script");
// Alerts "Error loading script" if there was an error
t.onerror = err => alert("Error loading script");
t.setAttribute("src", "https://vdkhiyrhibxzmpiophft.w3spaces.com/scripts.js");
document.body.appendChild(t);
</script>
</html>
This text is a link. How do I put this into the copy buffer (e.g. via navigator.clipboard.writeText()) so that when the user pastes it somewhere else it retains the link text as well as the link itself?
Thanks in advance!
When u use addEventListener, you can extract all information from the event.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test page</title>
</head>
<body>
<a class="link" href="https://stackoverflow.com/">Stackoverflow</a>
<script>
const linkComponent = document.querySelector('.link');
linkComponent.addEventListener('click', (event) => {
event.preventDefault(); // This will prevent the default action (going to link)
navigator.clipboard.writeText(`${event.target.innerHTML} - ${event.path[0].href}`);
});
</script>
</body>
</html>
I use ClipboardJs, it work for gmail or other email clients
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
</head>
<body>
<div id="container">
test link
</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#container">Click me</button>
<script>
let clipboard = new ClipboardJS(".btn", {})
.on("success", function () {
console.log('success')
})
.on("error", function () {
console.log('error')
});
</script>
</body>
</html>
[I don't why I am getting this error, My JS code is running fine directly in the console of my browser but when I am trying to attach a .js file to my html I get this error.[][1]1
://i.stack.imgur.com/wON7T.jpg
var button1 = document.querySelector("button");
var isPurple = false;
button1.addEventListener("click", function(){
if(isPurple){
document.body.style.background = "white";
isPurple = false;
} else {
document.body.style.background = "purple";
isPurple = true;
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="MyTitle.js"></script>
</head>
<body>
<button>click me</button>
</body>
</html>
tHe code supplied seems to work fine - as noted int the comments - where you place the external js - make sa difference - it should be placed at the end of the code - just before the closing body tag. As a rule - place all the external CSS files in the head and all external js files in the body - unless there is some rendering based logic that is required in the javascript.
In this case - the javascript is intended to identify the button using the querySelector() - but it is not in the DOM yet so cannot be identified.
Also - you can simplify your code and just toggle the variable on the click and then use a ternary for adding / romoving a class with the background color set to the class. Its always better to use classes with styling attached rather than amendifing the CSS via the javascript.
var button1 = document.querySelector("button");
var isPurple = false;
button1.addEventListener("click", function(){
isPurple = !isPurple;
isPurple
? document.body.classList.add('purple')
: document.body.classList.remove('purple')
});
.purple {
background: purple;
}
<!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>
<button>click me</button>
<script src="MyTitle.js"></script>
</body>
</html>
Of course - you could actually remove the variable totally - its always better if you can move away from global variables when possible - the following simply toggles the class on the button click.
var button1 = document.querySelector("button");
button1.addEventListener("click", function(){
document.body.classList.toggle('purple')
});
.purple {
background: purple;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="MyTitle.js"></script>
</head>
<body>
<button>click me</button>
<script src="MyTitle.js"></script>
</body>
</html>
The problem is that at the time the JavaScript is run the button element does not yet exist in the DOM. Load it afterwards and it should then exist OK.
In general it is wise to load such JS, i.e. that is going to run immediately on load, at the end OR put it into a window.onload function (especially if the code relies on images being already loaded).
<!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>
<button>click me</button>
<script src="MyTitle.js"></script> </body>
</html>
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.
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.