Silly question, but I've been struggling just trying to change an Electron window's name for a while now, so hopefully someone here can just help me with it.
I'm trying to change it from "Electron" to anything else. I can get every other title/name changed to what I want, but no matter what I seem to try, it always says "Electron"... :(
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <!-- Window name isn't this -->
</head>
<body>
<h1>hi</h1>
</body>
</html>
// main.js
const { app, BrowserWindow } = require('electron')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
},
title: 'Foo' // Window name isn't this
})
app.setName('Bar') // Window name isn't this
win.setTitle('ReeeeeBar') // Window name isn't this
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
// package.json
{
"name": "foobar-electron-app", // Window name isn't this
"main": "main.js",
"dependencies": {
"electron": "^9.1.2"
}
}
To be very specific, I'm trying to change this:
Actually, you can change that particular name. But it's hacky and has no sense :).
For MacOSX, go to node_modules/electron/dist/Electron.app/Contents/Info.plist and change value for CFBundleName.
For packaged apps electron/builder will look into productName or name field in package.json - no need for hacks.
As it turns out, you can't change that during development.
When you build (with electron-builder) it will change that to whatever the name field is in package.json.
Related
I tried the Phaser Tutorial. I created the index.html plus a js-file called game.js.
The phaser.min.js file was downloaded too.
Everything is in the same folder.
I connected everything properly and the output works very fine but somehow Phaser doesn't recognise changes in my game.js anymore.
This is my current game.js file:
var config = {
type: Phaser.AUTO,
width: 640,
height: 360,
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload(){
this.load.image('boo', 'assets/pics/boo.png');
}
function create(){
this.add.image(0, 0, 'boo');
}
function update(){
}
My index.html file looks like this:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UFT-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title> My very 1st game </title>
<script type = "text/javascript" src = "phaser.min.js"></script>
<script type = "text/javascript" src = "game.js"></script>
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
</body>
</html>
Including the game.js file works and if I remove it from the head section it doesn't work anymore, as it should be.
If I'm going to change let's say width: 640 to width: 200 for example and I refresh the localhost-page, it doesn't apply the change.
If I inspect the page, the old file with width: 360 is still used, even though it doesn't exist anymore.
It applies changes if I put the code from the game.js file into the body of index.html. It doesn't by including the game.js file.
I use XAMPP including the Apache Webserver.
Any hints what I can try? Anything will be appreciated.
The problem was caching. I refreshed the game with ctrl+F5 and it applied changes.
Adding following code might help too:
<meta http-equiv="Cache-control" content="no-cache">
I'm trying to upload my images with this vue.js. i'm using this plugin for the task. But I need to change the language. In doc it's said we can change it by using props. And I did,
:drag-text='drag_text'
Here is my complete code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-upload-multiple-image</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<div id="car_ad_others"></div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.22/dist/vue.js"></script>
<script type="text/javascript">
var parent = $('#car_ad_others').parent();
parent.html('<div id="car-image-upload"><upload-component></upload-component></div>');
$('#car_ad_others').parent().attr('id', 'car_ad_parent');
Vue.component('upload-component', {
props: ['dragText'],
data: function () {
return {
images: '',
uploadImageSuccess: '',
beforeRemove: '',
editImage: '',
dataChange: '',
drag_text: 'ddd'
};
},
template: "<div id='my-strictly-unique-vue-upload-multiple-image' style='display: flex; justify-content: center;'><vue-upload-multiple-image :drag-text='drag_text' #upload-success='uploadImageSuccess' #before-remove='beforeRemove' #edit-image='editImage' #data-change='dataChange' :data-images='images'></vue-upload-multiple-image></div>"
});
new Vue({el: '#car-image-upload'});
</script>
<script src="https://unpkg.com/vue-upload-multiple-image#1.0.2/dist/vue-upload-multiple-image.js"></script>
</body>
</html>
Unfortunately it didn't got translated and I'm getting this error too,
[Vue warn]: Unknown custom element: - did
you register the component correctly? For recursive components, make
sure to provide the "name" option.
Properties are in this link. And I have simplified my code to show the issue easier. So I cant change the structure.
It seems, there's a bug in the library itself. The codepen in the document doesn't seem to respond to props change. About your [Vue warn]: Unknown custom element: warning, somehow this worked for me:
components: {
'vue-upload-multiple-image': () => import('https://unpkg.com/vue-upload-multiple-image#1.0.2/dist/vue-upload-multiple-image.js')
},
and comment <script src="https://unpkg.com/vue-upload-multiple-image#1.0.2/dist/vue-upload-multiple-image.js"></script>
I am still trying to figure out how but it should be something related to local registration components vs global registration of the components. I will improve this answer as I come along with better and concrete explanation
try this
:drag-text="drag_text"
:drag-text = "'your text as string'"
I am trying to get an external .js variable into my index.html however the variable just comes back undefined. It works if the variable is in the HTML file but not when I call it from an outside .js file it just reads undefined ?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/main.css" />
<title>LoginSystem</title>
<script src="../server.js"></script>
</head>
<body>
<div id="display"></div>
<script>
var t = setInterval(function() {
// you can change `random` to any variable you want to be displayed
document.getElementById("display").innerHTML = random;
}, 500);
</script>
</body>
and the javascript file
var random = Math.random();
any help would be greatly appreciated thank you.
I can't explain why you're getting undefined; however, Since you set random in a variable outside of the scope of the function passed into setInterval, it will always display the same random number. You need to set random inside the function passed to setInterval if you want a new random number to show up.
server.js
function getRandomNumber() {
return Math.random();
}
index.html
var t = setInterval(function() {
document.getElementById("display").innerHTML = getRandomNumber();
}, 500);
Demo
https://repl.it/#AnonymousSB/RemarkableBowedNagware
i think you may be looking in the wrong directory for your server.js see this line:
<script src="../server.js"></script>
Make sure the file path is correct, if your index and server.js are in the same fodler it should be:
<script src="./server.js"></script>
I have tested the same code and it works perfectly for me.
Hope this helps.
Youu external javascript file path isn't correct. Replace ../server.js with /server.js
There are two pages in my tomcat server.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="onBtnClick()">jump to child</button>
<script>
const msg = {
name:'index.html',
ifor:'I am your parent!'
};
function onBtnClick() {
const childWindow = window.open('./child.html');
childWindow.msg = msg
}
</script>
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="msg-panel"></div>
<script>
const msgPanel = document.querySelector('#msg-panel');
msgPanel.innerHTML = `<span>${msg.name}</span><br><span>${msg.ifor}</span>`
console.log(window.msg);
</script>
</body>
</html>
I want to pass some message( the msg Object in index.html) from index.html to child.html, by the way above.
When I click the button in index.html to open the child.html, sometimes I can get the msg object in child.html, but sometimes I can't.
make the button type="button"
you set the message after opening. Sometimes the computer will be faster and not pass the message before it is shown. Use a timeout to show the message in the child OR
store the message in sessionStorage before calling window.open OR
have the child read the message from the parent:
const msgPanel = document.querySelector('#msg-panel');
msgPanel.innerHTML = `<span>${opener.msg.name}</span><br><span>${opener.msg.ifor}</span>`
console.log(window.msg);
Because you sometimes get that message and sometimes not try to put code from script from index.html in this:
document.addEventListener("DOMContentLoaded", function(event) {
//your code...
}
I think your html is not loaded and you click the button too fast.
Although this is already solved. Another alternative for sending data to a child would be localstorage. Getting and setting is really easy and IE11 is also supported.
localStorage.setItem('msg', 'something important');
let msg = localStorage.getItem('msg');
With that you would also have the ability to send data back and forth by setting event listeners on the localstorage change event like
window.addEventListener('storage', function(e) {
//do some cool stuff here
}
Just in case you want to have a more complex exchange between parent and child.
Hello I'm new to javascript, and I'm try to write out some code for a test site and I'm having some problems, dow below is my code and I keep getting this error and i can't figure out why.
TypeError: null is not an object (evaluating 'document.getElementById("h3").innerHTML = "<h3>You Are up to date!</h3>"')
This is my second method i tried using. what I'm trying to do it have a have a version list this first one i had was that it would pull a .js file and build a table, but that didn't work so i thought i would try this, but guess what happened? not working
my code that I'm using now is below. if you can help that would be amazing.
thanks, Dakmessier
var current = "1.0";
function get_latest(){
document.getElementById("bob").innerHTML = current;
}
if (local != current){
document.getElementById("Get").innerHTML = "<button>Get the Latest Update!</button>";
} else if (local == current){
document.getElementById("h3").innerHTML = "<h3>You Are up to date!</h3>";
} else {
document.getElementById("h3").innerHTML = "<h3>Sorry, unable to check for update.</h3>";
}
document.getElementById(id) finds an element with a given id value in your HTML. An id value looks like this:
<div id="myHeader">Some Content</div>
And, then you can find that element with:
document.getElementById("myHeader");
ID values must be unique in each document so there should only ever be one element with a given ID.
If an id isn't what you really want, you can find elements other ways, by tag type, by class name, by attribute, etc... using CSS selectors with document.querySelectorAll().
For example, if you wanted to find all <h3> tags, you could do this:
var items = document.querySelectorAll("h3");
Here are some other reasons that document.getElementById(...) might fail to find what you want it to find:
The Javascript code is running before the DOM elements have been parsed and loaded so thus the element is actually not there yet when you're running the code. This is common with code run from the <head> section of the document.
You have an HTML error in how you are specifying the id value in the HTML.
You have an HTML error that causes the browser not to parse your HTML properly.
You have a script error that cause your script to abort before it gets to the part you want to run.
Indeed document.getElementById returns null if it can't find an element with the Id specified.
Also the statement:
if (local != current){
// ..
} else if (local == current){
// ..
} else {
// ..
}
is a bit odd. If local != current is false then local == current must be true. The else if (...) is redundant and the else part will never be run.
hey man the bast thing you should do is the following example, feel free to copy it on your snippet of code:
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed!";
}
<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>
</body>
</html>
I WILL EXPLAIN YOU THIS ANSWER: this is an html + an inline script that makes the inner html work. As far as concerned with your answer it was unclear where your code stopped, anyway test my snippet of code and let me know
I know it's an old question, but I was having the same issue and was trying hard to find the solution for some time.
The problem was that I was executing the script before the page loaded. Thus it wasn't able to find the object that we're trying to catch.
So either use jquery document.ready function or else move your script to the end of the html.
I hope this helps
fix an error of getting the value of a as null
Uncaught TypeError: a is null
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
let a = document.getElementById('i');
document.addEventListener('mouseup',function(){
a.innerHTML='clean';
})
</script>
<body>
<h3 id="i">not clean</h3>
</body>
</html>
this shows as error in console as
Uncaught TypeError: a is null
you can fix it by making your script tag before
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 id="i">not clean</h3>
<script>
let a = document.getElementById('i');
document.addEventListener('mouseup',function(){
a.innerHTML='clean';
})
</script>
</body>
</html>
this might fix!!