Can anyone please help me to understand why I'm not able to append the HTML head to index.htm from an external file(header.htm)?
I'm using the following codes:
Index.htm:
<!DOCTYPE html>
<html lang="en">
<head id="head">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<script>
//window.location.replace('./Components/header.htm');
$.get("./Components/header.htm", function(data) {
//alert(1);
$("head").append(data);
});
</script>
</html>
header.htm:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SAM Store</title>
<link rel="icon" href="./Static/Final-JPEG.jpg">
I'm able to successfully redirect from index.htm to header.htm
Related
hi recently I was working on SPA but for SEO purposes i decided to change my app to a multi-web page app (that they are SPA) and the core.js is identical between all pages and main.js file will drive my core.js and drow somthing in browser
i want my dist folder be like this picture
and my index.html (home page) be like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>mori</title>
</head>
<body>
<h1>this is from main page</h1>
tutorial
<script src="/core.js"></script>
<script src="/main.js"></script>
</body>
</html>
and all other view fllow same pattren
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>tutorial</title>
</head>
<body>
<h1>this is for tutorial page</h1>
main page
<script src="/core.js"></script>
<script src="/tutorial/main.js"></script>
</body>
</html>
The HTML code looks like this with tag and tag.
<!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">
<meta name="google-signin-client_id" content="791276359692-0c2cpgs7dds6ffivpdjlrlhfgr82aao1.apps.googleusercontent.com">
<title>Journal App</title>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="js/index.js"></script>
</body>
</html>
I am using VS Code.
Under the Authorized Javascript Origins, URI's value should not be its IP address but "localhost:(port if any)".
I'm currently trying to optimize my site and load font family asynchronously
At first it was an issue with material icons like in image below
After getting rid of this issue by using webfontloader in index.html I now have this error, which hasn't been as easy to get rid of
To try and solve it I changed the CDN link <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script> to webfont.js to using npm i webfontloader and loading it locally, but the issue is still there. How can I get webfont.js to not be render-blocking?
index.html
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta charset="UTF-8">
<title>My App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/logo.ico">
<script src="../node_modules/webfontloader/src/core/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Material+Icons']
}
});
</script>
</head>
<body>
<app-root>
</app-root>
</body>
</html>
I need to add riot js to my laravel project and not sure I am doing the correct way to integrate riot for laravel project.
I have tried as follows in the blade.php file which is in the laravel views folder.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Laravel</title>
<!-- Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,600"
rel="stylesheet"
type="text/css"
/>
<script src="../js/riotcompiler.js" type="riot/tag"></script>
</head>
<body>
<hello></hello>
<script src="../tags/hello.tag" type="tag"></script>
<script>
riot.mount("hello");
</script>
njk
</body>
</html>
Then when I run the laravel project it will generate an exception saying riot is not defined. But I have already installed riot globally. So how can I fix this issue? Do I need to install riot through composer?
If you move js file to public/js folder you can call it in your blade file with:
<script type="text/javascript" src="{{ URL::asset('js/riotcompiler.js') }}"></script>
The function URL::asset()will produce the necessary url for you.
I believe this will do the trick:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Laravel</title>
<!-- Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,600"
rel="stylesheet"
type="text/css"
/>
<script src="../js/riotcompiler.js" type="riot/tag"></script>
</head>
<body>
<hello></hello>
<script src="../tags/hello.tag" type="tag"></script>
<script>
riot.compile(function() {
// here tags are compiled and riot.mount works synchronously
riot.mount('hello')
})
</script>
</body>
</html>
The issue was not keeping tag files and riotcompiler file inside the public directory and not giving the path in a proper way in laravel. So the workable code is as follows.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Laravel</title>
<!-- Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,600"
rel="stylesheet"
type="text/css"
/>
<script
type="text/javascript"
src="{{ URL::asset('js/riotcompiler.js') }}"
></script>
</head>
<body>
<hello></hello>
<script
src="{{ URL::asset('tags/hello.tag') }}"
type="riot/tag"
></script>
<script>
riot.mount("hello");
</script>
njk
</body>
</html>
Hi I am trying to build the "get started" application from the threejs website. https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene
I made a html like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BIM Demo</title>
<script>"/js/three.min.js"</script>
<script type="module" src="./js/view.js"></script>
</head>
<body>
<h1>BIM DEMO</h1>
</body>
</html>
I specified my view.js as a module since I want to be able to use the import statement to import my typescript files, but when I try to show my application in the browser I get the message THREE not found.
I tried adding it with yarn but it does not work.
This is my structure
Your three.min.js file is wrongly included. Your HTML should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BIM Demo</title>
<script type="text/javascript" src="./js/three.min.js"></script>
<script type="text/javascript" src="./js/view.js"></script>
</head>
<body>
<h1>BIM DEMO</h1>
</body>
</html>