In examples like this we have the v-html directive to dynamically render the raw html into the dom. I am in need of a way to insert a raw script before the entire lifecycle begins its magic. This is because I am working with a macro (auth0).
<!doctype html>
<html lang="en" data-n-head="...">
<head>...nuxt generated head...</head>
<script>
// this tag needs to exist as html when building with 'yarn generate'
// ##config## is a macro
let config = JSON.parse(decodeURIComponent(escape(window.atob('##config##'))));
</script>
<body>
... nuxt generated body ...
</body>
In essence, when I run the command yarn generate I would like a specific page (pages/login/index.html) to have this specific tag to exist and not injected during vue's lifecycle. There are alternate solutions like having scripts automatically postprocessing the static page output, but I'm hoping that there is a way to accomplish this without such complications.
My nuxt version is 2.15.8
Related
I have a java script function test1.js. The function loads external scripts on demand and injects it in the head. As part of the vendor documentation we need to load few scripts in the html head and One of the external script is loaded as follows
<script>esmDefine(["https://website1.com/web1-component.js"]);</script>
I want to do the same in java script and inject the above line in the html tag.
I tried the following
let scriptElement = document.createElement('script') scriptElement.textContent = 'esmDefine(["https://website1.com/web1-component.js"])' document.getElementsByTagName('head')[0].appendChild(scriptElement);
Tried
scriptElement.innerText, scriptElement.innerHtml etc but nothing worked as expected.
Result expected will be
<html>
<head>
<script>
esmDefine([
"https://website1.com/web1-component.js",
]);
</script>
...
</head>
Any ideas in this regard is appreciated
I guess you're facing this issue because you're trying to append a script tag in your head tag, that has a function call within it, so as soon as your script tag is injected into the head of your page, the page tries to execute the esmDefine function. But there must be some other external script file that has it defined, as you're saying that you've not defined it anywhere on your own. Then in order for this function to execute, the base declaration for this needs to present there, I mean the page's JavaScript renderer should know how to execute this function and the file that has this functions definition, is an external script file that you linked to your page, but how JavaScript rendering works is, it first parses the page (HTML, CSS, JavaScript (everything that is there on the page)), that you've added as inline to the page, not the external files. Then when everything is done loading then it goes on to fetch the external references and add those later to the CSS Object Model & JavaScript Object Model. But since you're adding this function call as internal to your page, it'll immediately try to execute it and will fail since the definition to this function (the external script file) is not yet loaded. You can try appending this script tag (with your esmDefine) to your page's head inside the window's load event listener. This will be fired only when everything on the page, including the dependent external resources are done loading on to the page. This way you'll not encounter this not defined ReferenceError.
I hope this will help you to move forward.
If you want to import a js script in a script tag I think you could import it or use a src="" if you do not need to interact with the script and know how it behaves.
Maybe try something like:
<html>
<head>
<script>
import esmDefine from 'https://website1.com/web1-component.js'
// esmDefine() ?
</script>
...
or :
<html>
<head>
<script>
import { esmDefine } from 'https://website1.com/web1-component.js'
// esmDefine() ?
</script>
...
or :
<html>
<head>
<script src='https://website1.com/web1-component.js'/>
...
We created a widget as an Angular app, which our customers should be able to easily load and integrate into their own website.
The most straightforward way (which works) to do this is simply to tell them to include the default HTML tags from the index.html on their website:
<base href="/">
<app-root></app-root>
<script src="https://ourdomain.com/widget/runtime.js" type="module"></script><script src="https://ourdomain.com/widget/polyfills.js" type="module"></script><script src="https://ourdomain.com/widget/main.js" type="module"></script>
However, we would like to minimize the above code and provide them a one-liner which includes a JavaScript that loads the code dynamically into the DOM, e.g. <div id="widget"></div><script src="https://ourdomain.com/widget/start.js"></script>. The script would simply consist of:
<script>
document.getElementById('widget').innerHTML = '<base href="/"><app-root></app-root>...';
</script>
The tags are loaded correctly into the DOM but the Angular app i.e. the scripts which are dynamically included into the DOM don't load.
How can this problem be solved? Is there a method in main.js which needs to be called additionally to bootstrap the Angular app?
The Angular app is deployed and hosted on our server, e.g. on https://ourdomain.com/widget. The goal is that anyone can load and plug the app into their own website using the above approach.
It turned out to work just like that:
<script>
document.write('<base href="/"><app-root></app-root>...');
</script>
I have a simple react component. Assume it as the default animated logo when the app is created
I now need to inject this component on top of a webpage using my chrome extension. I know how to inject a html template code along with its css and js through a chrome extension
I tried npm run build to generate static files so as to inject all those through my extension.
But that doesn't work. When the built index.html is injected onto someother page, it doesn't render there. Its just injected as root and nothing inside is rendered
<div id="root"></div>
Is there a solution on how I can get the a pre rendered static html of my react component so that I can use it to inject through my chrome extension
<div id="root">
<img src="a.png">
<h1>Sample text</h1>
.....
</div>
Above is how I want the rendered html of that component needs to be
When the built index.html is injected onto someother page, it doesn't
render there. Its just injected as root and nothing inside is rendered
Did you inject just the index.html file? When you do npm run build there are other files as well that are generated and are needed for the index.html to work. Mainly the chunk.js file and css files.
They need to be in the same directory as the rendered index html file(You might have to replace the relative paths with absolute paths to make it work, if you are not able to put the files in the same directory).
Further reference: https://create-react-app.dev/docs/production-build
I am importing an html document, form.html, from a script located in my index.html file.
form.html is a basically a fragment of HTML and at the bottom of the html is an internal script that attaches the html to the main document:
Afterwards, I reference an external script that is supposed to do some stuff to the HTML in form.html. However, this fails to have an affect in Firefox.
If I inspect the <head> of the main document in Firefox developer tools, I can see the "document fragment" composed and with the correct scripting affect. However, the actual imported HTML that appears in the body is unaffected.
I have tried inlining the script at the bottom of form.html. I also tried using window.onload to attach the external script to the end of the body of the main document as well as trying to use a link tag as per this question.
Not quite sure what else to try. I would like to keep the script modular and contained inside form.html if possible as to only request it when that HTML page is requested.
Thanks,
When using the HTML Imports polyfill, the processing of the imported document is only asynchronous. So you should wait for the HTMLImportsLoaded event or use the HTMLImports.whenReady() method to be sure the content was imported.
<head>
<script src="html-imports.min.js"></script>
<link rel="import" src="from.html">
<body>
//code to be injected
<script>
document.addEventListener( 'HTMLImportsLoaded' , ev => {
//you can safely access the imported code in the body
} )
</script>
today I've a question. Is faster to load a web page designed from static html example:
<html>
<head>
<title>Web page</title>
</head>
<body>
<p>Hi community</p>
</body>
</html>
Or by static Javascript with DOM? Example with document.createElement("...")
Serving the HTML directly would be the faster approach, as your browser only have to render the elements, and not manipulate the dom :)
Populating HTML statistically is much faster than populating through javascript.
The HTML document gets downloaded
The parsing of the HTML document starts
HTML Parsing reaches <script src="jquery.js" ...
jquery.js is downloaded and parsed
HTML parsing reaches <script src="xyz.js" ...
xyz.js is downloaded, parsed and run
HTML parsing reaches <link href="abc.css" ...
abc.css is downloaded and parsed
HTML parsing reaches <style>...</style>
Internal CSS rules are parsed and defined
HTML parsing reaches <script>...</script>
Internal Javascript is parsed and run
HTML Parsing reaches <img src="abc.jpg" ...
xyz.jpg is downloaded and displayed
Parsing of HTML document ends
So, if you have static html loading with javascript will be overhead for page rendering.
It's faster to send a static html, because the client doesn't have to execute js. Sending complete HTML is also better for search engines, even if google can now execute js.
You can still use js to add elements in your DOM once the page is loaded
Like others said, it is always faster to output static HTML rather than generating it dynamically using Javascript/JQuery. However, sometimes the content cannot be served directly and generating the HTML dynamically is the only choice. I have worked on a few applications where this was the case. In general, generate static HTML whenever you can.