Make same <head> available to all pages - javascript

My web app routes amongst several html pages. Instead of uniquely defining the head for each file i.e. typing:
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/css/interface.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/6873aa3c17.js" crossorigin="anonymous"></script>
...
</head>
everytime, can I load all of these scripts programmatically across all the HTML files? (JQuery and Vanilla acceptable)
One method I tried was creating a include.js which would be a loaded script in each head with the following contents:
[
'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',
'https://kit.fontawesome.com/6873aa3c17.js'
].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
document.head.appendChild(script);
});
(And probably a similar solution for links) but this did not work
Thanks in advance

If your website is a static HTML site without server-side logic, I'd recommend using parcel with posthtml-include
https://github.com/parcel-bundler/parcel
https://github.com/posthtml/posthtml-include
https://github.com/parcel-bundler/parcel/issues/915#issuecomment-369489539
You will be able to include html files like that:
<!doctype html>
<html>
<body>
<include src="title.html"></include>
</body>
</html>

Related

Can I add attributes to the script tags that are created on build?

I made a build of my app and this generated the app script file.
For our client we need to put the defer attribute on the scripts.
Is there an option to add this attribute before building so it generated the script file with the attribute on build?
Maybe a setting in the config/index.js, like adding a ./ before the path of the assets.
Index file after build:
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>capsule-grid</title>
<link href=./static/css/app.b61a863ffc65a9cdc414d3295eff7eb5.css
rel=stylesheet>
</head>
<body>
<div id=capsule-grid></div>
<script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script>
<script type=text/javascript src=./static/js/vendor.a73abbfdb077dea7910a.js></script>
<script type=text/javascript src=./static/js/app.2a7cef142bfc9b3954a5.js></script>
</body>
</html>
I want to add the attribute to the app script file, but before the build.
Thanks!
var script = document.createElement("script");
script.src = "myjs.js";
script.setAttribute("defer", "true");
Something like this is how you can apply attributes via javascript. See this answer for more info.

How to get the HTML as text using Anglesharp after the javascript has done loading the page?

I am trying to use AngleSharp to crawl a webpage on my localhost. The page is generated using Angular js dynamically. I am using AngleSharp to get the page. Also using AngleSharp Scripting library to run Javascript. Below is my code for POC purpose. I am unable to figure out where can I find the HTML of the page after Javascript rendering is complete.
t.Result.Source.Text gives me the page source of the webpage. Where can I find the Source after javascript has finished rendering? I am even unable to figure out if the javascript ran or not !
static void Main(string[] args)
{
Task<IDocument> t = StartCrawl();
t.Wait();
string textContent = t.Result.Source.Text;
Console.ReadKey();
}
private static async Task<IDocument> StartCrawl()
{
var config = Configuration.Default
.WithDefaultLoader()
.WithCss()
.WithJavaScript();
var context = BrowsingContext.New(config);
var document = await context.OpenAsync("http://localhost:8000/#!/phones");
return document;
}
The view source of the url gives me this. How can I run all the javascripts on the page after page load. I can see 16 scripts in the document.Scripts property.
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="app.animations.css" />
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="app.animations.js"></script>
<script src="core/core.module.js"></script>
<script src="core/checkmark/checkmark.filter.js"></script>
<script src="core/phone/phone.module.js"></script>
<script src="core/phone/phone.service.js"></script>
<script src="phone-list/phone-list.module.js"></script>
<script src="phone-list/phone-list.component.js"></script>
<script src="phone-detail/phone-detail.module.js"></script>
<script src="phone-detail/phone-detail.component.js"></script>
</head>
<body>
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
</body>
</html>
In AngleSharp (like in a browser) there is no notion of source after JS did something. You can look at the originally transferred source, but I guess that's not what you want.
If you want to see the string serialization of the DOM at a particular time (e.g., after some DOM manipulation by a JS script) then just do:
var currentSource = document.ToHtml(); // current serialization of the DOM
Note that this will represent your DOM in HTML (text) form.
What you did gives you the original source code:
var textContent = t.Result.Source.Text; // will always contain the original source

Javascript files not loading for page

I have a fairly simple HTML file:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>deploy.rb</title>
<script src="test.js" type="text/javascript"></script>
<script src="OtherScript.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
body
</body>
</html>
test.js looks like this:
window.onload = function () { alert("It's loaded!") }
Can someone tell me why I don't get an alert when the page loads? (and why none of the functions in OtherScript.js are executing)
The full contents of the html file can be found here, if it helps.
I'm an idiot. OtherScript.js also used window.onload. I consolidated both scripts into the same file, and now it works file.
you might check the directory structure. The code looks fine to me, so if I had to guess the .js files are not being found correctly. If they're in the same directory as the HTML file you might try appending ./ to the beginning of the filename.

Can a libgdx web application work along with web components technology?

I'm working with libgdx 1.9.2 and gwt 2.6.1.
After the GWT-compilation of my java app, I get a JS script (html.nocache.js) that I can include in my html page, and visualisate in a web browser (inside a div, here it's "embed-html"). That part is working nicely.
Here's the code:
<!doctype html>
<html>
<head>
<title>my-gdx-game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="html/html.nocache.js"></script>
</head>
<body>
<div id="embed-html"></div>
</body>
</html>
My next goal is to use web components, and more precisely custom elements, to have a simple tag <my-app></my-app> in any web page to get my application.
my index.html:
<!doctype html>
<html>
<head>
<title>my-gdx-game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="webcomponents.js/webcomponents.js"></script>
<link rel="import" href="component.html">
</head>
<body>
<my-app></my-app>
</body>
</html>
my component.html:
<template id="template">
<div id="embed-html"></div>
<link href="styles.css" rel="stylesheet" type="text/css">
</template>
<script>
var helloDoc = document._currentScript.ownerDocument;
var myApp = document.registerElement('my-app', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var root = this.createShadowRoot();
var template = helloDoc.querySelector('#template');
var clone = document.importNode(template.content, true);
root.appendChild(clone);
}
}
})
});
</script>
<script type="text/javascript" src="html/html.nocache.js"></script>
But the JS script generated by GWT-compilation has some document.write(...) inside; so all that is included is my empty div, my style sheet correctly loaded, and warnings: "Warning: A call to document.write() from an asynchronously-loaded external script was ignored". Since it is generated, I don't think I can avoid using these document.write().
If I put the <script type="text/javascript" src="html/html.nocache.js"></script> in the head of index.html (where it was before I tried using webcomponents), the app is not added inside the div, as it should, but under (the div and style sheet are included as expected).
And if I put the script inside the template, nothing happens.
So I am wondering if there is a way to have a GWT application working with web components, or if I should search for another way to easily include my application into external websites.
(If you wonder the reasons why I want to do so, it's because I want clients to be able to add my app easily on their own website, with only an import and a tag, the same way I could import a YouTube video or a Google map.)

How to load AngularJS in a div

I have a main page with this structure.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>..:: Test Application ::..</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="../css/main.css" />
<script src="../js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script>
function loadOption(idopt){
if(idopt==1){
var curl = '../view/otherpage.php'
}
$("#mainContainer").load(curl);
}
</script>
<body onLoad=loadOption(<?php echo idopt;?>)>
<div id="mainContainer"></div>
</body>
</html>
otherpage.php
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js"></script>
</head>
<body>
{{1+1}}
</body>
</html>
But, when i load the main page... the AngularJS doesn't run. What could be wrong?
That's because you're loading otherpage.php after the DOMContentLoaded event has finished.
In other words, you're filling in the space inside the mainContainer div with otherpage.php content after the event DOMContentLoaded. And that is where Angular's Automatic Initialization takes place.
So in order to get it to work, you'll have to manually bootstrap Angular.
Here's Angular's documentation about it:
http://docs.angularjs.org/guide/bootstrap
Other options are available and are much better, such as referencing your Angular related files (angular, your controllers, services, directives and what not) at the main page.
Depending on the browser, pulling the script element in otherpage.php out of the head element and into the body element, should correct this.
We can't see all your code, but it may be better to just load Angular.js in the head of the main page. You could do this using your own a script package manager control flow to avoid this type of failure for other dependencies. That would be good style...
make a common includes page and add angular.js file to it and include it in the header so that it is available through out the site or use it in the main page

Categories