I am trying to get the HTML file to print the output of a javascript file but it doesn't seem to be working - I just end up with a blank page.
My HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="sketch.js"> setup()</script>
</head>
<body>
<div id="fog"></div>
</body>
</html>
My javascript file (sketch.js)
function setup() {
s = "hello";
document.getElementById('fog').innerText = s;
}
Include the script calling setup near the closing body tag,the dom with id fog is not present when setup is called
<head>
<meta charset="UTF-8">
<script src="sketch.js"></script>
</head>
<body>
<div id="fog"></div>
<script>setup()</script>
</body>
Your script tag is synchronous, means that the parser waits and executes the contents of the script BEFORE the html is fully parsed. By the time your script is executed the div is not even there. If you do not want to defer the script or change its location, you can at least use DOMContentLoaded event:
window.addEventListener(
"DOMContentLoaded",
function setup() {
var s = "hello";
document.getElementById('fog').innerText = s;
},
false
);
in your script.
Related
I have small snippet that is inside iframe and generates script html tag and appends it to the window.top.document.head.
Now I want to know how do I check from within potato.js from which iframe it was generated from once it is already loaded?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<iframe>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
(function() {
var s = document.createElement('script');
s.setAttribute('type','text/javascript');
s.setAttribute('src','https://test.com/potato.js');
window.top.document.head.appendChild(s);
})();
</script>
</body>
</html>
</iframe>
</body>
</html>
Edit: I can not change this code inside the iframe
That information isn't stored automatically.
The only way I can think of would be to add an expando-prop to the script with a reference to the current window (i.e. the frame's window)…
s.sourceWindow = window;
… then read that from within potato.js …
const sourceWindow = document.currentScript.sourceWindow;
… and then loop over all the frames (window.frames) looking for a match.
Since you are using window.top and not window.parent you might need to be recursive there.
I have this very simple html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/app.js"></script>
<script src="js/model/dinnerModel.js"></script>
<script src="js/view/exampleView.js"></script>
</body>
</html>
And the javascript files that are included in the bottom are:
app.js:
$(function() {
var model = new DinnerModel();
var exampleView = new ExampleView($("#exampleView"));
});
dinnermodel.js:
var DinnerModel = function(){
// some js stuff
}
exampleView.js:
var ExampleView = function () {
// more js stuff
}
This runs fine for me, and my question is: why? When app.js is included in its script tag, dinnermodel.js and exampleView.js have clearly not been loaded yet, so I should get an error in app.js saying that DinnerModel is not declared, right?
Because $(function() {}) waits until dom is ready and that means the other scripts have loaded before the code inside it gets executed
Great question.
It works because you're waiting for the document to be ready, please refer to this website. https://learn.jquery.com/using-jquery-core/document-ready/
Doing $( document ).ready(function() { or $(function() { is the exact same thing.
By the time the page executes the function inside $() the whole content was loaded and ready to use.
im trying to load HTML page it has it is own data and ajax calls to render a view using html-import, but the issue is when the import happens the view yet not finish rendering, is there is a way to know when the view is finished calling and rendering all its element
(function(){
function createLauncherPanel() {
var div = document.createElement("div");
div.setAttribute("class", "launcher-panel");
div.classList.add("hidden");
div.appendChild(createLauncherLink(div));
document.getElementsByTagName("body")[0].appendChild(div);
return div;
}
function createLauncherLink(container) {
var link = document.createElement("link");
link.setAttribute("rel", "import");
link.setAttribute("href", "path-to-htmlpage-with-data-load -asynchronously-with-json-feed-and-view-to-render");
console.log('container',container);
link.addEventListener('load', function(e) {
// all imports loaded
console.log(e);
console.log('link',link);
console.log(link.import);
// #ele is the element i need to get from the imported page - but sence this element is not rendered yet because of the lateinse of rendering and network calls , this will return null
container.appendChild(link.import.querySelector('#ele'));
});
return link;
}
createLauncherPanel();
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.13/webcomponents-lite.js" type="text/javascript"></script>
</head>
<body>
<h1>Hello, worssld</h1>
<div id="ff"></div>
<script src="sc.js" type="text/javascript"></script>
</body>
</html>
I would suggest you to use the onload event as it will fire when everything has finished loading.
The onload event occurs when an object has been loaded.
onload is most often used within the element to execute a
script once a web page has completely loaded all content (including
images, script files, CSS files, etc.).
I have added a JavaScript file into my existing project and referred that in the HTML file. The file structure is shown as its in the attachment. After I run the program, the output does not display what it is supposed to be.
Is there anything wrong with my file tree (how I am adding file into the project) or I am not referring the script the in the correct way?
Here is how my program looks like:
index:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="newjavascript.js" type="text/javascript"></script>
</head>
<body>
<p id="demo"></p>
</body>
</html>
.JS:
document.getElementById("demo").innerHTML = 7+9;
It seems to be everything is ok with your project structure and refererring to js file inside index.html. However, the demo paragraph does not display what you want because it can be just not loaded in the time when your newjavascript.js is executed. I think you can try to modify it in the following way:
window.onload = function () {
document.getElementById("demo").innerHTML = 7+9;
};
Using onload function of window object you wait until a page (including demo paragraph) is loaded - and after it change its content.
I try to override the window.onload event inside an external javascript, but even when putting some basic console.log line outside the window.load function, the code seems to never execute.
Jumping to code here it is :
for index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Experimentation</title>
<script src="canvasEntry3D.js" type="type/javascript"></script>
</head>
<body>
<canvas id="canvas" height="720" width="1280"></canvas>
</body>
</html>
for canvasEntry3D.js :
console.log("slkdfnsdnflknegs");
window.onload = abcdefg;
function abcdefg() {
console.log("in start");
var canvas = document.getElementById("canvas");
}
To really know if the browser has loaded the correct javascript file, I have already checked the developper console.
And I'm not searching to override two times the window.onlad event, so there's no need to use addEventListeners (and there is also no other javascript code that override the window.onload event)
The only mistake in your code I see is the wrong type attribute within your script tag.
Just change it from
<script src="canvasEntry3D.js" type="type/javascript"></script>
to
<script src="canvasEntry3D.js" type="text/javascript"></script>