I'm getting this same error everytime I try to run my JS file on Node. I just got started with this whole thing so I'm probably overlooking some very obvious detail. This is what my HTML head section looks like:
<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">
<link rel="stylesheet" href="rooks.css">
<title>Rooks</title>
<script src="https://d3js.org/d3.v7.min.js" charset="utf-8"></script>
<script src="rooks.js"></script>
<script src="plotly-2.12.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
Related
I want to use EditorJS in my project. So I have created an HTML file after reading the documentation. Here is the file called index.html:
<!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>Home</title>
</head>
<body>
<div id="editorjs"></div>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<script>
import EditorJS from '#editorjs/editorjs'
const editor = new EditorJS('editorjs')
</script>
</body>
</html>
After opening the file into the browser, EditorJS is not showing up and this message is printed in the console- Uncaught SyntaxError: Cannot use import statement outside a module.
How to fix this problem?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<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>Home</title>
</head>
<body>
<div id="editorjs"></div>
<script>
const editor = new EditorJS({
autofocus: true
});
</script>
</body>
</html>
When you add a script tag in your HTML file, you don't need to import the library again you can just start using it!
The script isn't a type module, use:
<script type="module">
The errors appear at the console after i open this code on live server on vscode, im learning Vue.js and the code itself opens the file but i dont know how to fix those errors.
Ive reasearched somethings about the errors but couldnt fix them.`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./vuejs"></script>
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<p>teste</p>
<script>
const vm = new Vue();
console.log(vm)
</script>
</body>
</html>`
I'm using angular and angular-route. The index.html looks like this:
<!DOCTYPE html>
<html lang="en" ng-app="Showcase">
<head>
<meta charset="UTF-8">
<title>UCSD Showcase</title>
<base href="/showcase/">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="routes.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="js/initGlobalHelpers.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="#########################################">
<meta name="keywords" content="###############################################">
<meta property="og:url" content="#">
<meta property="og:site_name" content="CSES OSS">
<meta property="og:image" content="############################################################################################">
<meta property="og:description" content="#">
<meta property="og:type" content="website">
<meta name="twitter:site_name" content="CSS OSS">
<meta name="twitter:site" content="################">
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="#">
<meta name="twitter:image" content="#">
<meta name="image" content="#">
<link rel="stylesheet" media="all" href="./styles/style.css">
</head>
<body>
<ng-view></ng-view>
</body>
</html>
And then for my home page when I'm using
<h1>This is the home page</h1>
<script src="home.html"></script>
I get the a warning
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. jquery.min.js:4
and an error
SyntaxError: Unexpected token < angular.js:13550
However when I replace that script that by the content of the script which basically ends up looking like:
<h1>This is the home page</h1>
<script>
console.log('Hi!');
</script>
Then it works.
Why is this happening and how can I fix it?
Use ngInclude instead of html script tag
<div ng-include="'home.html'"></div>
See ngInclude docs here
How do I uncheck this box from within the code base? My Highchart won't render and it's because of this tab.
The <meta http-equiv="X-UA-Compatible" content="IE=edge"> isn't working and I've removed all of the header data except the js and css imports from the iframe.\
Main Page Header
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
iframe header
<link rel="stylesheet" href="/public/site/css/graphs.css" type="text/css"/>
<link REL="stylesheet" href="/public/site/css/bootstrap/css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="/public/site/js/highcharts.js"></script>
<script type="text/javascript" src="/public/site/js/drilldown.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">...code...</script>
It should work if you put <meta http-equiv="X-UA-Compatible" content="IE=edge"> in the main page instead of in the iframe, if that's possible. IE can't use a different document mode between the main page and a frame or iframe.
I have a website which import some js and css files on the head tag, but when I open the website by chrome,The entire page layout is completely wrong and looks like js and css files is valid. Who can help me? Thanks.
some problem page's code as follow,every js and css files in my code are available
you can try some url
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--禁用移动设备缩放 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> -->
<script src="http://xmumap-code.stor.sinaapp.com/js/jquery-1.11.2.min.js"></script>
<script src="http://xmumap-code.stor.sinaapp.com/js/jquery.mobile-1.4.5.min.js"></script>
<script src="http://xmumap-code.stor.sinaapp.com/js/swiper.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://xmumap-code.stor.sinaapp.com/css/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="http://xmumap-code.stor.sinaapp.com/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://xmumap-code.stor.sinaapp.com/css/swiper.min.css">
</head>
Thanks again!