I have this javascript code that shows the current status of notification permission:
main.js
var $status = document.getElementById('status');
if ('Notification' in window) {
$status.innerText = Notification.permission;
}
index.html
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
<p>Current permission status is
<b id="status">unavailable</b>
</p>
<script src="/scripts/main.js"></script>
</body>
</html>
If I write the same code in a typescript file I am getting this error:
main.ts
var $status = document.getElementById('status');
if ('Notification' in window) {
$status.innerText = Notification.permission;
}
ERROR - Notification.permission
MESSAGE - Property 'permission' not exists on type
'new(title: string, options?: NotificationOptions): Notification;
prototype: Notification;
requestPermission(callback?: NotificationPermissionCallback):
Promise<string>;'
How to ignore this error?
Try casting Notification to the any type to avoid transpiler errors.
if ('Notification' in window) {
$status.innerText = (Notification as any).permission;
}
The other option is to include the Notification type's definition.
Related
I want to call a function using eel that isn't available before the program runs.
With plain JS it works just fine, I need some workaround or something similar for TS.
Python file
import eel
eel.init('web', allowed_extensions=['.js', '.html'])
#eel.expose
def my_python_function():
print(2)
eel.start('index.html', mode='chrome', cmdline_args=['--kiosk'])
Html
<!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>
<button id="myButton"></button>
<script type="text/javascript" src="/eel.js"></script>
<script type="module" src="js/index.js"></script>
</body>
</html>
Working JS
let button = document.getElementById("myButton");
button.onclick = buttonClicked;
function buttonClicked()
{
console.log("Clicked");
eel.my_python_function();
}
If I am not using TS in it's intended way I'm sorry, I'm a beginner in web dev.
The following code is what i tried in TS but didn't work
let button : HTMLElement | null= document.getElementById('myButton');
button?.addEventListener("click", buttonClicked)
function buttonClicked()
{
console.log("Clicked");
eel.my_python_function(); // Error here
}
I got it working by ignoring the error.
let button : HTMLElement | null= document.getElementById('myButton');
button?.addEventListener("click", buttonClicked)
function buttonClicked()
{
console.log("Clicked");
// #ts-ignore
eel.my_python_function();
}
I'm stuck. I tried many solutions but none of them works.
Trying to implement a module, I get this error message:
Uncaught ReferenceError: exports is not defined
I tried solution from Stack Overflow, but it does not work. Changing anything in tsconfing does not make any difference. I added var exports = {}; into scripts in HTML file and error changes from "exports" to "require" - dead end.
server node:
var fs = require('fs');
const express = require('express');
var path = require('path');
var { request } = require('http');
var app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.listen(3533);
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="testing site">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>simple testin </title>
</head>
<body >
</body>
<script type="text/javascript" src="webscripts/run_scripts.js"></script>
<script type="text/javascript" src="webscripts/library.js"></script>
</html>
library.ts:
export function appearSomeTestingSentence() {
document.write('111111');
};
library.js:
"use strict";
exports.__esModule = true;
exports.appearSomeTestingSentence = void 0;
exports.appearSomeTestingSentence = function () {
document.write('111111');
};
run_scripts.ts:
import {appearSomeTestingSentence} from './library.js';
appearSomeTestingSentence();
run_scripts.js:
"use strict";
exports.__esModule = true;
var library_1 = require("./library");
library_1.appearSomeTestingSentence();
Finally i sort it out. I had to delete *.js files before i compile with tsc and i had to restart tsc after changing something in tsconfig. Problem solved after
changing module to"module" : "ESNext" in tsconfig file.
I'm trying test of Electron app with Spectron.
But I can't test client window javascript global variable.
Here is my simplified code.
Please help me.
Thanks.
index.html
<!DOCTYPE html>
<html lang="ja">
<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">
<title>MY ELECTRON</title>
<script type="text/javascript" src="script.js"></script>
<link href="./style.css" rel="stylesheet">
</head>
<body>
</body>
</html>
script.js
let mode;
function onload_func(){
mode = 'normal';
}
window.onload = onload_func;
spec.js
const Application = require('spectron').Application
const assert = require('assert')
const electronPath = require('electron')
const path = require('path')
let app;
describe('Application launch', function () {
this.timeout(10000)
beforeEach(function () {
app = new Application({
path: electronPath,
args: [path.join(__dirname, '../src')]
})
return app.start()
})
afterEach(function () {
if (app && app.isRunning()) {
return app.stop()
}
})
it('initial mode',function(){
assert.equal(app.client.mode,'normal');
})
})
I'm not sure if it will solve your specific tests, but app.browserWindow should do the trick since as they say:
It provides you access to the current BrowserWindow and contains all
the APIs.
Note that it's an alias to require('electron').remote.getCurrentWindow()
Read more: https://github.com/electron/spectron#browserwindow
I have a basic foo.html in my iOS 10 application. The markup is straight forward:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Hello, World!</p>
<div id="container"></div>
</body>
<script type="text/javascript" src="bar.js"></script>
<script type="text/javascript">
// Bar is defined in bar.js
var bar = new Bar();
</script>
</html>
I load it with the following:
let htmlFile = Bundle.main.path(forResource: "foo", ofType: "html")
let html = try? String(contentsOfFile: htmlFile!, encoding: String.Encoding.utf8)
webView.loadHTMLString(html!, baseURL: nil)
In my iOS app, I'm trying to access the bar variable. After the DOM is loaded as confirmed by by WKNavigationDelegate's method: func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)
I have code like this:
var htmlContent : String {
var s = "console.log(bar)"
return s
}
webView.evaluateJavaScript(htmlContent, completionHandler: { result, error in
if let error = error {
print("error: \(error)")
}
if let result = result {
print("result: \(result)")
}
})
I end up getting an error:
error: Error Domain=WKErrorDomain Code=4 "A JavaScript exception occurred" UserInfo={WKJavaScriptExceptionLineNumber=1, WKJavaScriptExceptionMessage=ReferenceError: Can't find variable: Bar, WKJavaScriptExceptionSourceURL=about:blank, NSLocalizedDescription=A JavaScript exception occurred, WKJavaScriptExceptionColumnNumber=47}
Is what I'm trying to do possible? Do I have to approach the problem a different way? Does evaluateJavaScript have access to the scope of my DOM after it's loaded because as of right now, it seems it does not.
I figured it out - will put the answer here hoping it helps someone else:
The problem was here:
webView.loadHTMLString(html!, baseURL: nil)
I had to ensure baseURL is not nil, the following fixes it:
webView.loadHTMLString(html!, baseURL: Bundle.main.bundleURL)
This is my script.js code:
var app = angular.module('starter', [])
app.provider('RouteHelpers', function () {
this.basepath = function (uri) {
return 'app/views/' + uri;
};
this.$get = function () {
};
});
app.config(function (RouteHelpers) {
console.log('Never gets here');
});
And this is index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='starter'>
</body>
</html>
And I'm getting this error in my browser: https://tinyurl.com/nbareaa
Does someone have an idea what is wrong in this code?
You have created a provider, which means if you try and inject it into your config function you must append Provider to the end of the providers name, for example:
app.config(function(RouteHelpersProvider){
});
You are getting the error because it cannot find the given injector. You can read more here under provider recipe.