I am using asp dotnet core for the backend.
This is how asp renders the page (notice how everything with meta etc seems correct, and my tests confirm this):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Website</title>
<base href="/" />
<link rel="stylesheet" href="/dist/vendor.css?v=nmP2oJlipQWfe1Q9dKUoaAj31lKk6_m4owNSV9fEeqA" />
</head>
<body>
<!-- test from _Layout.cshtml to see if it is its fault -->
àéíôüàéíôüàéíôüàéíôüàéíôü
<!-- it renders it correctly, so it looks like it's Vue.js's fault -->
<div id='app-root'>Loading...</div>
<script src="/dist/vendor.js?v=sZcVpAmM0vrf6nyPyorxXMMIanK-hAW1RhcF2ymtHfk"></script>
<script src="/dist/main.js?v=qjoWhD1Og3eISp302v-McamzVAlCEXm_3gssJzkUnKE"></script>
</body>
</html>
Now in app.vue.html, if I use this template:
<template>
<div>
àéíôüàéíôüàéíôüàéíôüàéíôü
</div>
</template>
<style scoped src="./app.css"></style>
<script src="./app.ts"></script>
The website shows this:
àéíôüàéíôüàéíôüàéíôüàéíôü
�������������������������
<= the first line comes from _Layout.cshtml, while the second line comes from app.vue.html
The Vue version I am using is 2.5.16
This should all just work. You have the utf-8 meta tag in your document. There is certainly no problem with Vue's handling of utf-8. Check your source files (app.vue.html), and your bundle. Open them in vs-code for example and you should see utf-8 on the right of the bottom status bar. Check the character encoding in the HTTP headers of everything, particularly the bundle. A .js bundle sent with bad HTTP encoding header would seem the most likely culprit.
Related
So I have a full featured (Routing etc) Vue 3 app that I need to embed on random page somewhere, but I don't want to use an iframe for various reasons so I'm looking to achieve this using Shadow DOM and Custom Element.
The way I thought it would work:
✅ Build the Vue App
✅ Publish the dist folder
✅ Create a Custom Element
✅ Create Shadow DOM in the constructor
✅ Load dist/index.html
❌ Vue App renders in Shadow DOM
... except it doesn't. Everything technically works but the Vue app doesn't render at all.
What am I missing?
My attempt: https://stackblitz.com/edit/javascript-7trm5i?devtoolsheight=33&file=index.html
Edited to add:
Same result even if I deploy the app to a service like Vercel and use it as src.
This is not a right way to do it. You are using fetch to get the HTML page. The HTML page has following script and style tags:
<!DOCTYPE html>
<html lang="en" data-theme="bumblebee">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Cart</title>
<script type="module" crossorigin src="/assets/index.0f5a3d92.js"></script>
<link rel="modulepreload" href="/assets/vendor.ab0eb239.js">
<link rel="stylesheet" href="/assets/index.8fd7686d.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
Look at this script: <script type="module" crossorigin src="/assets/index.0f5a3d92.js">.
When this tag is added via innerHTML, the browser will try to find the index.0f5a3d92.js file using the domain from which you are serving the main page. It is not asking the domain from where you are getting this HTML. Ideally, it should be this:
https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/index.0f5a3d92.js
But it is making call to this:
https://stackblitz.com/assets/index.0f5a3d92.js
You will have to rewrite the src attribute before you add it to HTML.
On a side note, this is an anti-pattern on what you are trying to do. Web component is not a real substitute for iFrame. Plus, a page should have only one top level head tag. You are introducing multiple head and body tags here. Browser will silently handle it but it is still anti-pattern.
The right way to do this is to bundle your Vue application with custom element definition. Then upload this bundled script to some CDN. From there, add it as a script on the page and the element should render when browser encounters the custom element.
You can not have multiple html, body, head tags in single document, so the html parser ignores the html, head and body tags of the Vue app.
Before:
<!DOCTYPE html>
<html lang="en" data-theme="bumblebee">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Cart</title>
<script type="module" crossorigin src="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/index.0f5a3d92.js"></script>
<link rel="modulepreload" href="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/vendor.ab0eb239.js">
<link rel="stylesheet" href="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/index.8fd7686d.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
After parsing:
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Cart</title>
<script type="module" crossorigin src="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/index.0f5a3d92.js"></script>
<link rel="modulepreload" href="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/vendor.ab0eb239.js">
<link rel="stylesheet" href="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/index.8fd7686d.css">
<div id="app"></div>
So ultimately the html structure changes from the original one which Vue Virtual DOM can not work with.
So I don't think you can use Shadow DOM like an iframe.
Basic html page. Just starting and downloading packages. Checking if my Semantic UI setup is properly installed, but when I open up my index.html page and check the console I get 'GET file:///semantic/dist/semantic.min.css net::ERR_FILE_NOT_FOUND', along with 'GET file:///semantic/dist/semantic.min.js net::ERR_FILE_NOT_FOUND'. Which is strange!
These are my script tags within my head tag inside my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 boilerplate – all you really need…</title>
<!-- You MUST include jQuery before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="/semantic/dist/semantic.min.css"
/>
<script src="/semantic/dist/semantic.min.js"></script>
</head>
<body id="home">
<h1>HTML5 boilerplate</h1>
</body>
</html>
I can click on the relative paths in both tags and it will take me to the actual file in my editor.
My current folder structure is:
Semantic
dist
semantic.min.css
semantic.min.js
index.html
What gives?
Try ./semantic/dist/semantic.min.css
I have a Spring boot app with a Thymeleaf template, that is supposed to load a css file and a javascript file.
The CSS file loads, but the Javascript file doesnt, it does not even try to get it from the server. There is no HTTP request for the Javascript, but the requests for the CSS are visible.
Where is my mistake?
I already tried putting the link for the javascript in the header next to the css but that made no difference.
My folder structure is as follows:
resources
-- static
---- bootstrap
------ css
---- js
Here the HTML:
<html xmlns:th="https://thymeleaf.org" lang="en" style="height: 100%;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Title</title>
<link rel="stylesheet" type="text/css" th:href="#{/bootstrap/css/bootstrap_custom.css}" />
</head>
<body class="d-flex flex-column h-100">
<script th:href="#{/js/main.js}" type="text/javascript"></script>
</body>
</html>
There is no error message, the tag for the javascript is simply ignored.
Your script end tag is incomplete. It should be:
<script th:src="#{/js/main.js}" type="text/javascript"></script>
The tag should read
<script th:src[...]>
instead of
<script th:href[...]>
I am playing around with Laravel last version, trying to import and use JS files on the front-end. I have them stored in my folder 'public/js/'.
I have this Blade template you can see below, pizza.blade.php. If you inspect the page source, you can clearly see the JS files are existing, since their links, which are regularly working, are "http://localhost:8000/storage/...".
Nevertheless, they are not working inside the document and, inspecting the network tab, I can see they are not imported.
The image, pizza.png, located in 'public/storage' is displaying correctly.
What am i doing wrong?
Also, is there a better practice to use JS files, such as mix or npm? Thanks in advance.
<!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="{{asset('/js/jquery-3.3.1.js')}}"</script>
<script>src="{{ asset('/js/test.js') }}"</script>
<title>Document</title>
</head>
<body>
<h1 class="ciao">PIZZA LOGO</h1>
<div>
<img src="http://localhost:8000/storage/pizza.png" alt="">
</div>
</body>
<script>
$(document).ready(function () {
$(".ciao").css('display', 'none');
});
</script>
</html>
You have this error
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
this is just script with single javascript variable and string inside. You need this:
<script src="{{asset('/js/jquery-3.3.1.js')}}"></script>
this is html script tag with src attribute.
I am having trouble linking a javascript file to a dynamic website i made through php. My file structure is simply just:
index.php, css folder (which is working correctly), jscript folder (does
not work) and a pages folder (has all my pages)
My pages are simple just
header.php, registrationContent.php and footer.php
My index just includes all 3 php and it works perfectly fine. My problem is no matter what I do, whether inline, or soft coded javascripting it does not work. I am certain my syntax in the javascript is fine, its just the linking.
My header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Safe Drive Website</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/regStyle.css" rel="stylesheet" type="text/css" />
<script src="jscript/javascripts.js" type="text/javascript"></script>
</head>
<body>
<div class="topBar" id="topBar"><input type="Submit" value="Contact Us" class="topNavButton"/></div>
<div id="bannerText"><h1 class="mainHeader">SafeDrive</h1><h2 class="subHeader">Developer's Tool</h2></div>
I close the tags in the footer.php
Javascript files are included directly in your html page.
use the following line in your html page:
<html>
<head>
<script type="text/javascript" src="path/to/your/javascript/file.js"></script>
</head>
...
This is probably uncommon, but I thought of answering my own question because I found a solution, so that anyone else having the same problem could try mine.
Basically, it was loaded, the only problem was that the javascript functions weren't loaded and so to do that, i had to add:
window.onload = myJscriptFunction();
on any tag (body, footer etc. refer to w3schools for that information)
I do hope this helps anyone facing the same problem ^_^