Loading and rendering the contents of the window before displaying alert - javascript

I'm new to Electron (just like to English :).
I'm trying to output a simple alert after loading and rendering the contents of the main window.
index.html:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Test</title>
</head>
<body>
...
Here's some content and images. A lot of them.
...
<script src="alert.js"></script>
</body>
</html>
alert.js:
//Simple alert with some system information
alert("!##$%^&*");
But an alert appears before the contents of the window are drawn. Defer and async don't help (i.e. <script defer async src="alert.js"></script>). What am I doing wrong? It seems to me that this is a very simple and stupid question, but I can not find an answer.
UPD:
The only way I found for now is to use setTimeout:
setTimeout(function(){
alert("!##$%^&*");
}, 300);

Since your code is at the bottom of the page you can us an IIFE (Immediately Invoking Function Expression):
(function() {
alert("!##$%^&*");
}());
You can also use a setTimeout:
(function() {
setTimeout(function () {
alert("!##$%^&*");
} , 2000)
}());

Related

Global method not being called unless I have a window.setTimeout of 1000 ms around the call

I have an index.html file and in it I have a script tag that's receiving a callback from google maps. If I remove the timeout, I get this error.
Uncaught TypeError TypeError: window.globalMethod is not a function
My 'globalMethod' is located in a directive being used on the page and I would assume maybe the directive's constructor isn't loaded, but I'm running the google maps script after <app-root></app-root> so you would think it would find window.globalMethod()?
I tried it with 100, but that doesn't seem to be long enough and still receive the error.
Here is index.html
<!doctype html>
<html lang="en">
<head>
// left out other head tags for brevity
<script>
function initPlaces() {
// won't run if I remove window.setTimeout
window.setTimeout(() => {
window.globalMethod();
}, 1000);
}
</script>
</head>
<body>
<app-root></app-root>
<script src="https://maps.googleapis.com/maps/api/js?key=secret-key&libraries=places&callback=initPlaces" type="text/javascript"></script>
</body>
</html>

How to set redirect to links provided by JS function

I'm having an issue where I'm trying to set a page's redirect destination to a URL from a JS function.
I've tried calling the function by using <meta http-equiv="refresh" in the header, but I either have the syntax wrong or <meta> simply doesn't allow for calling functions. I'm honestly not sure.
<head>
<script src="extFile.js"></script>
<meta http-equiv="refresh" content="1; go2();" id="levP" name="levP">
<title>SO Question</title>
</head>
go2() is a function from extFile.js which contains an if/then statement that provides different URLs depending on time of day. I'd like to have index.html redirect users via function go2() either by a method in the header or in the body.
If this should be handled in the body then I'd appreciate any feedback as to how that should look.
Like this? this code will redirect your page after 5 seconds
<head>
<script src="extFile.js"></script>
<script>
setTimeout(function (){
window.location = "https://stackoverflow.com/questions/57717282/how-to-set-redirect-to-links-provided-by-js-function";
}, 5000);
</script>
<title>SO Question</title>
</head>
if you want a to call a function do this:
<head>
<script src="extFile.js"></script>
<script>
var check = function(){
window.location = "https://stackoverflow.com/questions/57717282/how-to-set-redirect-to-links-provided-by-js-function";
}
check();
</script>
<title>SO Question</title>
</head>

Calling javascript script from html

I have a simple javascript file like so:
$(document).ready(function () {
alert("my controller");
});
I have an HTML file like so:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="/js/generateLineupController.js"></script>
</body>
</html>
for the love of all things holy why in the world would the alert not show? I get a 200 on GET for the javascript file, so it's loading.
Several problems here.
You're trying to load the script twice for some reason. Don't do that. Load it in <head>, or at the end of <body>, but not both.
You're trying to use jQuery syntax ($(...)), but you haven't loaded the jQuery library. You'll need that.
The $(document).ready(...) indicates that you are trying to use jQuery, but you aren't loading jQuery in your page. Check your console log; you will see the errors there.
Also, there's no need to load the script twice with two <script> tags; just load it once.

JavaScript Not Sending Info To WebSocket When Page is Loaded

I am having trouble sending information of a session cookie when loading a page.
Here is how the function executes
<body onload="example();">
Here is the function it self
function example() {
websocket.send("<?php print($_SESSION['example']) ?>")
}
I've tried this way as well, but still does not work.
function example() {
websocket.send("Test")
}
I also tried calling this function when a button is clicked and it does work.
I was thinking maybe the connection to the websocket is not fast enough and the example(); function is called before the connection is established. Please let me know how I can make this work.
This a complete example of how to connect to a WebSocket from the onload document event:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>WebSocket Sample</title>
<script type="text/javascript">
function example()
{
// open websocket
var socket = new WebSocket('ws://localhost:80');
socket.onopen = function() {
console.log("onopen!");
// Web Socket is connected. send an initial random message.
socket.send("Hello!");
};
}
</script>
</head>
<body onload="example();">
<h1>Title</h1>
</body>
</html>
I found out that the connection stablish after the execution of the function so what I simply did was setTimeout, even duh its not a good practice, it will be enough for the project am doing. Here is short version of my solution.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script language="javascript" type="text/javascript">
function example() {
function sendUser() {
setTimeout(
function() {
websocket.send("Wroked!")
}, 1000);
}
}
</script>
</HEAD>
<BODY onload="example();">
</BODY>
</HTML>

css not being applied to document.write text

I'm writing text to a page using document.write for a Chrome extension, but the associated custom CSS isn't applied:
<!DOCTYPE html>
<html>
<head>
<title>TITLE GOES HERE</title>
<link rel="stylesheet" href="css/popup.css" type="text/css" />
</head>
<body>
<script type="text/javascript">
...
function showFolder(folder) {
console.debug('FOLDER: '+folder.title);
document.write('<p>'+folder.title+'<br></p>');
}
</script>
</body>
</html>
The CSS is simple, just for debugging:
p {
color: red;
}
I can get it to work if I put the stylesheet link inside the function showFolder, but that can't be the proper way to do it. I'm learning jscript/CSS on the fly, so the answer is probably something remedial. Is the problem in the jscript, the CSS or both?
Use innerHTML.
<div id="towrite"></div>
then you can write in it like this:
div=document.getElementById('towrite');
div.innerHTML = '<p>'+folder.title+'<br></p>';
If you run your document.write() before the page finishes loading (perhaps calling your showFolder call directly from a script on the page), then the text will be written into the document as you might expect.
However, if you call document.write after the page loads, as in an event handler, you will be writing an entirely new page. This is usually not what you want.
Instead, follow Zoltan's advice and set the innerHTML property of an empty div.
I'm not javascript expert... I mainly use jQuery.. but try this, kind of makes sense:
<!DOCTYPE html>
TITLE GOES HERE
<script type="text/javascript">
...
function showFolder(folder) {
console.debug('FOLDER: '+folder.title);
document.write('<p>'+folder.title+'<br></p>');
}
</script>
<link rel="stylesheet" href="css/popup.css" type="text/css" />
EDIT:
So the above didn't work, but I just thought about another solution. When are you actually calling the function? Try to put it in <body onLoad="functionnamehere()">
No idea if that works, but give it a try.

Categories