Appended to html page script and CSS don't work - javascript

I am trying to append some CSS and JS to my static HTML file. CSS and JS files are stored in the same folder. It sounds stupid, but I need to do that. So, CSS and JS have been appended but they are not applying to a HTML file because background should be red.
The path that I created is correct because if I do inspect element on Chrome Devtools and click to appended link it opens what I need. So, there are no errors, scrip appends what I need, but I see no result.
My HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
</head>
<body>
hello world
<script>
const href = window.location.pathname;
const chunkIndex = href.lastIndexOf('/');
const path = href.slice(0, chunkIndex + 1);
function appendScripts() {
const script = document.createElement("script");
script.src = path + "scripts.js"; // use this for linked script
document.body.appendChild(script);
}
function appendCSS() {
link=document.createElement('link');
link.href= path + 'styles.css';
link.rel='rel';
document.getElementsByTagName('head')[0].appendChild(link);
}
document.addEventListener("DOMContentLoaded", function(event) {
appendCSS();
appendScripts();
});
</script>
</body>
</html>
My CSS file:
body {
background-color: red;
}

You need to fix the following line
link.rel='rel';
to
link.rel='stylesheet';

Related

Automating Printing in JavaScript

I have a large number of links I want to print. The links are in local HTML files, so I am able to add scripts to them. I attempted a few things, but I did not get to the end. The best I have so-far achieved is to open the links I want to print in separate tabs, and the Windows.print() function does not work. Could someone help me to what I might be missing here, or point me to how I might get to my goal. Please see the code below:
<!doctype html>
<html>
<head>
<title>Print</title>
<script>
function pickLinks() {
const anchors = document.getElementsByTagName("a");
for (const a of anchors) {
const url = a.href;
const urlBase = "https://www.huffpost.com/entry/";
if (url.startsWith(urlBase)) {
console.log(getQid(url));
openInNewTab(url);
}
}
}
function getQid(url) {
const res = url.split("-");
return res[res.length - 1];
}
function openInNewTab(url) {
const win = window.open(url, '_blank');
win.print();
//win.focus();
}
</script>
</head>
<body>
<h1>Print</h1>
<button onclick="pickLinks()">PRINT</button>
Link
Link
Link
Link
</body>
</html>
Ideally I would like the print to be a PDF with a filename that reflects the URL, such as getQid(url) in the code above.
Many thanks in advance!

How load files added dinamically before call other js file that needs one of that files

First of all, give thanks for reading my question and try to help me and apologize for my English.
I have the following problem...
I'm adding js file and css file dinamically, but sometimes appears an error because load first a static js file before that downlod both files added dinamically.
How can solve that problem?
Until download both files added dynamically, do not load the js file (mapfunctions.js)
My api js file, call a function where add dinamically js file and css file as you can see.
This is my index.html code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Map Generator</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
// this file add dinamically a js file and a css file
<script src="./js/api/api.js"></script>
// this file needs js file added dinamically, and if is not downloaded crash
<script src="./js/option2/mapfunctions.js"></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:50%; height:50%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
customMap.addMap("5b4f12233cfb101f4c2d0537", "map");
});
</script>
</body>
</html>
Error that shows sometimes is:
Error: ReferenceError: mapboxgl is not defined at Object.createMap
This is my api.js file:
let mapboxJsUrl = 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js';
let mapboxCssUrl = 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css';
(function(window, document) {
var includeJSFiles = function(url) {
var apiJs = document.getElementsByTagName("script")[0];
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", url);
var css = includeCss(mapboxCssUrl);
if (apiJs !== undefined) {
head.insertBefore(script, apiJs);
} else {
head.insertBefore(script, head.firstChild);
}
head.insertBefore(css, script);
};
var includeCss = function(url) {
var css = document.createElement("link");
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", url);
return css;
};
includeJSFiles(mapboxJsUrl);
}(window, document));
In this case, your safest bet may be to use the load event on the window object. According to MDN, load is only fired when all resources and dependencies have loaded so that may make it a better fit for your situation.
I'm not familiar with mapbox, however after a little research I found that the api your trying to use will create a mapboxgl object in your window context.
Seeing as customMap is not defined anywhere, I instead checked for the existence of mapboxgl on window to verify that the Mapbox API was dynamically loading into your sample. I made the following adjustments to your code to achieve dynamically loaded mapbox scripts:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Map Generator</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
// this file add dinamically a js file and a css file
<script src="./js/api/api.js"></script>
// this file needs js file added dinamically, and if is not downloaded crash
<script src="./js/option2/mapfunctions.js"></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:50%; height:50%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
/* UPDATE
Add event listener to window object, and register handler on the load event
*/
window.addEventListener('load', function(e) {
customMap.addMap("5b4f12233cfb101f4c2d0537", "map");
});
</script>
</body>
</html>
Also, in your api.js script, you should make the following adjustments to faciliate this:
(function(window, document) {
var includeJSFiles = function(url) {
//var apiJs = document.getElementsByTagName("script")[0];
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", url);
// UPDATE
// Keep this simple, and insert the script as head's first node
head.insertBefore(script, head.firstChild);
var css = includeCss(mapboxCssUrl);
head.insertBefore(css, script);
};
var includeCss = function(url) {
var css = document.createElement("link");
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", url);
return css;
};
includeJSFiles(mapboxJsUrl);
}(window, document));
Hope this helps you!

Can't load HTML into HTA file when click by link inside of the HTML

I have one HTA file, one JS file is enqueued to the HTA file and HTML files with contents are loaded into the HTA file.
For example this is my_hta_file.hta
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=9.0" />
</head>
<body></body>
</html>
<script type="text/javascript" src="my_js_file.js"></script>
and this is my_js_file.js
function getFileContent(filePath) {
var fileStream = new ActiveXObject('ADODB.Stream');
fileStream.Type = 2;
fileStream.Charset = 'utf-8';
fileStream.Open();
fileStream.loadFromFile(filePath);
var fileContent = fileStream.ReadText();
fileStream.Close();
return fileContent;
}
// initial loading of home page
document.body.innerHTML = getFileContent('index.html');
var pageLinks = document.querySelectorAll('a');
for(i = 0; i < pageLinks.length; i++) {
var linkHref = pageLinks[i].getAttribute('href');
pageLinks[i].setAttribute('href','#!'+linkHref);
// I add this leading prefix to prevent following by the link when click by it
pageLinks[i].onclick = function() {
var page = this.getAttribute('href').substring(3);
if(page == '') {
var page = 'index';
}
// load HTML of the page by link path when click by the link
document.body.innerHTML = getFileContent(page+'.html');
}
}
and my HTML files with contents are:
index.html
Home
Second
Third
<div>Home page content</div>
second.html
Home
Second
Third
<div>Second page content</div>
third.html
Home
Second
Third
<div>Third page content</div>
When I click by a link, I need to load all the HTML content from the HTML file by the link path including the very links I click by.
If I open my HTA file and click the link "Second", I get the second page links and content successfully.
But after that if I click the link "Third", I get the error
Cannot find file 'file:///D:/third' ...
How to resolve the problem?
UPDATE 1
If I move my script to the bottom of the HTA body and add a div for loading HTML for example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=9.0" />
</head>
<body>
<div id="body"></div>
<script type="text/javascript" src="my_js_file.js"></script>
</body>
</html>
and in my JS file load HTML into div i.e.
document.getElementById('body').innerHTML = ...
instead of
document.body.innerHTML = ...
the problem still remains
As said in the comments, all the links with attached event listeners are replaced by new elements when innerHTML is changed. These new links don't have the listeners which the old elements had.
The snippet below shows how you can use a function to reinit the listeners. The snippet assumes a content wrapper element is used (as you already seem to use it). I've also simplified the code a bit, and used more modern JS (since IE9 mode is used in the OP).
function getFileContent (filePath) {
// As it currently is
}
// Handles clicks on the links
function newContent (e) { // e contains information of the current event
var path = e.target.href || 'index',
body = document.getElementById('body');
e.preventDefault(); // Prevents the default action of the clicked link
body.innerHTML = getFileContent(path + '.html');
init(); // Initialize the new content
return;
}
// Initializes the page
function init() {
var links = document.querySelectorAll('a'),
i, ei;
for (i = 0, ei = links.length; i < ei; i++) {
links[i].addEventListener('click', newContent);
}
return;
}
// Initialize the first page
init();

Need to place whole HTML5 code inside div or iframe

I have a complete HTML5 page in a JSON object, I have to show it to my page inside a div or iframe. Following is sample code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
window._reviewWidget = {
onReady: function () {
var block1 = {
voyagerId:"xxxxxxx",
container: "container",
flavour:"small"
};
_reviewWidget.loadReview(block1);
}
};
(function (W,i,D,G,E,T)
{
W[G] = W[G] || {};
T = i.getElementsByTagName(D)[0];
E =i.createElement(D);
E.async = 1;
E.src ='/js/reviewWidget.js';
T.parentNode.insertBefore(E, T);
})(window, document,'script','_reviewWidget');
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
When I am trying to put the code in div or iframe getting just container div, header part and body, HTML tag missing. I know we can't put such tags in div so I tried an iframe as well. But same issue either can see whole code as text or just container div.
Iframe code i am using (html_code JS variable with above HTML code)
Type-1
$('#HtmlFrame').contents().find('body').html(html_code);
Type-2
var iframe = document.createElement('iframe');
var ctnr = document.getElementById('Ewidget');
ctnr.appendChild(iframe);
iframe.contentWindow.document.open('text/htmlreplace');
iframe.contentWindow.document.write(html_code);
iframe.contentWindow.document.close();
Thanks.

"getElementsByTagName(...)[0]" is undefined?

I have the following code, which basically toggles through a bunch of images.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var num = 1;
img = document.getElementsByTagName("img")[0];
hbutton = document.getElementsByTagName("h1")[0];
hbutton.onclick = function() {
num += 1;
img.src = num + ".jpg";
}
</script>
</head>
<body>
<h1>Press Here!</h1>
<img src = "1.jpg"></img>
</body>
</html>
For some reason, when I run it, nothing happens, because of the following error as displayed by my Firebug console.
hbutton is undefined
---
hbutton.onclick = function() {
When I run just the JS after the page has loaded however, it works perfectly fine!!! Why is this?
Your code is executing before the h1 tag is defined. You must run it in an onload handler or put it just before /body
JavaScript is interpreted top-to-bottom. So at the place where your <script> executes, no h1 tags are known yet.
Try putting the <script>-Tag to the bottom of your page. Otherwise, if you need the script at the beginning of the page, an onLoad-Handler might help:
<script type="text/javascript">
function onLoadHandler() {
// your original javascript code here...
}
</script>
<body onload="onloadHandler()">
<!-- HTML Code here-->
When you put it in the header, your h1 is not loaded yet. hbutton becomes undefined, not an object. Then when you try to set .onclick, it breaks because you cant set properties of something undefined. When you put the code in the body, your h1 is already loaded, so the code works as you expected it to.
You can fix this by leaving your code at the top, but only calling it after an onload event.
The head gets executed before the dom is loaded. Put it on the button of the page or put an onload function in the body tag.
It cannot find document.getElementsByTagName("img") when the Document isnt ready yet, because it is simply not there yet.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function onDocumentReady(){
var num = 1;
img = document.getElementsByTagName("img")[0];
hbutton = document.getElementsByTagName("h1")[0];
hbutton.onclick = function() {
num += 1;
img.src = num + ".jpg";
}
}
</script>
</head>
<body onload="onDocumentReady()">
<h1>Press Here!</h1>
<img src = "1.jpg"></img>
</body>
</html>
or simply do this:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Press Here!</h1>
<img src = "1.jpg"></img>
<script type="text/javascript">
var num = 1;
img = document.getElementsByTagName("img")[0];
hbutton = document.getElementsByTagName("h1")[0];
hbutton.onclick = function() {
num += 1;
img.src = num + ".jpg";
}
</script>
</body>
</html>
The problem is that the script is being executed immediately it is encountered during page load.
Since it's at the top of the page, in the header, this means that it is executed before the page has loaded the <h1> element (or any of the rest of the body).
Therefore, when it asks for getElementsByTagName('h1'), there aren't any matching elements at that moment in time.
You need to either:
* move the code to the end of the script.
* or wrap it in a function, and trigger the function to execute when the page has finished loading -- ie use the onload method.

Categories