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.)
Related
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>
I am following a tutorial and I am trying to create an svg element using d3. however when I run it and inspect the page on chrome, the svg element isnt showing up in the body. I'm sure that the .html file is referencing the correct js file, but I cant figure out why the element isn't appending
this is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="/text/javascript" src="d3.v3.min.js">
</script>
</head>
<body>
<script type="/text/javascript" src="shapes.js"></script>
</body>
</html>
and this is my js code
var dataArray = [2,13,15];
d3.select("body").append("svg");
It's your type attributes on your script tags:
/text/javascript
is not valid, it's:
<script type="text/javascript" src="shapes.js"></script>
With no leading slash...
I'm playing around with HTML (, JavaScript & CSS) & decided to try to import one HTML from one file into another, the goal is that I can make several modules and just import them into an empty HTML page, so they together create a fully working & content filled HTML page.
I would prefer to use something similar to how scripts or style-sheets are imported:
(ignore the $ signs)
$<script src="file.js"></script>
OR
$<link rel="stylesheet" type="text/css" href="style.css">
The problem is that the $<html>, <head> & <body> tags are inserted again, is there any good way to fix this?
I have tried some methods: $<object> & <embed> &
$<link rel="import" href="file.html">
I don't want to use $<iframe> because I have heard that it's a security problem (yes, it's not relevant right now, but if I'm going to use this method later for real, then it will be important).
I am aware of other similar questions, like this:
Include another HTML file in a HTML file but most of the answers use external frameworks like JQuery or Angular which I don't want to use, I would prefer to use a pure HTML or/and JavaScript solution if possible.
Example code:
File to import:
<p>"The import is working"</p>
Base file to import into:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- Import code here (or in head if it for some reason is required) -->
</body>
</html>
Desired outcome:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>"The import is working"</p>
</body>
</html>
Actual outcome (with $<object> or $<embed>), (at least as the Firefox inspect-element tool shows it):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<embed src="file.html">
#Document <!-- I don't know what this means/function is, can someone explain? -->
<html> <!-- Notice the double: html, head, meta & body -tags -->
<head>
<meta charset="UTF-8">
</head>
<body>
<p>"The import is working"</p>
</body>
</html>
</embed>
</body>
</html>
You can use PHP, by making your file names with a .php extension and use PHP include:
<?php include 'header.php';?>
Read more about it here.
I've been trying to do the same thing for some time and the only solution I've come up with involves some JavaScript. When you import HTML the #document tag means it lives in the shadow DOM which is different than the one rendered (I think, I don't really understand this stuff). In any case, after importing, I ended up having to render the element and append it to the DOM.
<!-- Original HTML file -->
<html>
<head>
<title>Title</title>
</head>
<body>
<p>
Hello from original HTML.
</p>
<link id="importLink" rel="import" href="/path/to/import.html">
</body>
<script src="/path/to/renderImport.js"></script>
</html>
I had the following code in my renderImport.js file:
// renderImport.js
function renderImport() {
let importLink = document.getElementById("importLink");
let importedElement = importLink.import.querySelector('#import');
document.body.appendChild(document.importNode(importedElement, true));
}
renderImport();
And finally, import.html:
<!-- import.html -->
<p id="import">Hello from the imported file</p>
Here it is in Chrome. Though you might have to disable CORS.
Use Angular CDN in Head tag then import html using this code
<body ng-app="">
<ng-include src="'header.html'"></ng-include>
</body>
OR
<body ng-app="">
<header ng-include="'header.html'"></header>
</body>
Use you can change header to footer or content
Description:
I have a main page with header, footer, etc. The content (a div within body) of this page is changing depending on where you click(menu items). The content loaded are different pages within javascript and css files.
Problem: javascript and css files of the pages loaded don't work. I have to include ALL the page in order to make it works.
For example in the next code, javascript included in status.jsp don't work:
$(document).ready(initialize);
function initialize(){
// status.jsp has javascript and css linked
$("#content").load("pages/status.jsp #information");
}
However, this works, but it is not what i want:
$(document).ready(initialize);
function initialize(){
// status.jsp has javascript and css linked
$("#content").load("pages/status.jsp");
}
The result of the last code is a page similar to this:
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<title>MainPage</title>
</head>
<body>
<div id="content>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/styles.css" type="text/css">
<title>Status</title>
<div id=statusBox">
information
</div>
<script type="text/javascript" src="js/status.js"></script>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
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