How to call external javascript function from jslib plugin Unity webgl - javascript

I'm working on a webgl project now and I'm trying to call javascript function in index.html from plugin.jslib
I did google some methods and seems they're not working.
Is there a proper and simple way to do this?
below codes are the ones that i tried.
index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>%UNITY_WEB_NAME%</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.javascript"></script>
<script src="%UNITY_WEBGL_LOADER_URL%"></script>
<script type="text/javascript">
window.CheckLoad = function(){ window.alert('It is working!!'); };
</script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress});
</script>
</head>
<body>
...
</body>
</html>
plugin.jslib
mergeInto(LibraryManager.library {
Loaded: function()
{
window.CheckLoad();
},
});
Unity C# script
public class blablabla : MonoBehaviour
{
[DllImport("__Internal")]
private static extern void Loaded();
public static void IsLoaded()
{
#if !UNITY_EDITOR && UNITY_WEBGL
Loaded();
#endif
}
void Start()
{
IsLoaded();
}
}

Well.. I was stupid.
turned out it was my mistake and the way to do these stuffs are quite easy.
For those who might have same question, check below codes.
index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>%UNITY_WEB_NAME%</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.javascript"></script>
<script src="%UNITY_WEBGL_LOADER_URL%"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress});
function CheckLoad(){
window.alert("WORKING~!");
}
</script>
</head>
<body>
...
</body>
</html>
plugin.jslib
var plugin = {
Loaded: function()
{
CheckLoad();
}
};
mergeInto(LibraryManager.library, plugin);

Related

Tensorflow coco-ssd could not load

I'm having a problem saying that my cocossd cant load. Do you know whats the issue?
This is my source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow-models/coco-ssd"></script>
<img id="img" src="https://www.cdc.gov/importation/images/cat.jpg?_=18560"/>
<script>
const img = document.getElementById('img');
cocoSsd.load().then(model => {
model.detect(img).then(predictions => {
console.log('Predictions: ', predictions);
});
});
</script>
</body>
</html>

Passing event from Javascript to dart method in browser

This is my html
<html>
<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">
<meta name="scaffolded-by" content="https://github.com/dart-lang/sdk">
<title>quickstart</title>
<link rel="stylesheet" href="styles.css">
<script defer src="allEvents.js"></script>
<script defer src="main.dart.js"></script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
</html>
allEvents.js file:
function myFunction() {
console.log("from event");
var event = new CustomEvent("test", { "detail": "Example of an event" });
window.document.dispatchEvent(event);
}
Dart main method:
import 'dart:html' as html;
void main() {
print("from main");
html.window.onMessage.listen((html.MessageEvent event) {
print("hello dart");
});
}
I am not able to get test event in my dart hence no console log, what is wrong with my code
I figured out the solution:
import 'dart:html' as html;
void main() {
print("from main");
html.CustomEvent someEvent;
html.window.document.addEventListener(
'test',
(event) =>
{someEvent = event as html.CustomEvent, print(someEvent.detail)});
}

Can you add if statements in case a src item doesn't appear with a return status of 404

I'm trying to use two script hosts in case one doesn't show but my catch statement doesn't seem to be catching status 404 errors when I purposefully mess up the url. Here's the 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">
<script src="https://cdn.jsdelivr.net/npm/p5#1.0.0/lib/p5.js"></script>
<script onerror="error()" ></script>
<script src="blockman.js"></script>
<script src="https://craigapphostl.w3spaces.com/scripts.js"></script>
<title>Document</title>
<button onclick="f()">Test</button>
</head>
<body>
</body>
<script>
function error(){
//added l's on the end to both script host links
alert("some thing hs went wrong trying back up host")
}
try{
var t=document.createElement("script")
t.setAttribute("src","https://vdkhiyrhibxzmpiophft.w3spaces.com/scripts.js")
document.body.appendChild(t);
}
catch(e){
alert(e)
}
</script>
</html>
This type of error cannot be catched with try...catch. Instead, listen on the error event.
<!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">
<script src="https://cdn.jsdelivr.net/npm/p5#1.0.0/lib/p5.js"></script>
<script onerror="error()"></script>
<script src="blockman.js"></script>
<script src="https://craigapphostl.w3spaces.com/scripts.js"></script>
<title>Document</title>
<button onclick="f()">Test</button>
</head>
<body>
</body>
<script>
function error() {
//added l's on the end to both script host links
alert("some thing hs went wrong trying back up host")
}
var t = document.createElement("script");
// Alerts "Error loading script" if there was an error
t.onerror = err => alert("Error loading script");
t.setAttribute("src", "https://vdkhiyrhibxzmpiophft.w3spaces.com/scripts.js");
document.body.appendChild(t);
</script>
</html>

JS function in index.html executed only one time in Angular

I created a small js script which allows me to get pop-up from console message when something will be printed there:
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<title>Frontend</title>
<base href="/">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function() {
var exLog = console.log;
console.log = function(msg) {
exLog.apply(this, arguments);
alert(msg);
}
})()
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
But function is only executed one time, how to make this every time when something in console occurs?

running embedded javascript - a small test file

I've updated the code to reflect input.
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- <script type="text/javascript" src="../archelib.js"></script> -->
<title>Test - Bookmark List</title>
<style>
</style>
</head>
<body>
<span id="f0e"></span>
<script type="text/javascript">
var arr1=['','a','b','c']
document.write(check_empty(arr1,'f0e','fail'));
function check_empty(text,id,res)
{
for(var d=0;d<text.length;d++)
{
if(text[d].value=='')
{
o2(id,res);
return 0;
}
}
return 1;
}
function o2(a,b)
{
return document.getElementById(a).innerHTML=b;
}
</script>
</body>
</html>
Use type array for the input argument.
change
if(text[d].value=='')
to
if(text[d].value!='')

Categories