I'd like to define a Webcomponent in a Javascript-Module and call a method of this component.
The browser raises an Javascript-error: "helloworld" is not a function.
Strange: If I load the Javascript-File "normally" and not as a module, the function is called.
How can I make it run as a Javascript-Module?
This is the JavaScript-Module main.js:
customElements.define('hello-world',
class MyComponent extends HTMLElement {
helloworld() {
console.log("Hello World");
}
});
This is the HTML-Code:
<!DOCTYPE html>
<html>
<head>
<script type="module" src="main.js"></script>
</head>
<body>
<hello-world></hello-world>
<script>
var instance = document.querySelector( 'hello-world' );
instance.helloworld();
</script>
</body>
</html>
Loading Javascript with
<script src="main.js"></script>
works.
Problem is: Modules are alway loaded asyc and are alway executed after the DOM is loaded.
Therefore the Web-Component is not yet defined when it's instanciated in HTML.
This code works, since the inline-module is executed after the extern module.
<!DOCTYPE html>
<html>
<head>
<title>simple demo</title>
<script type="module" src="main.js"></script>
</head>
<body>
<hello-world></hello-world>
<script type="module" >
var instance = document.querySelector('hello-world');
instance.helloworld();
</script>
</body>
</html>
Related
When I have extern javascript file with an export-statement how can I call this in an HTML ?
An import in a <script> tag also doesn't work.
an include over the <head> gives me a "Unexpected token export" error
For example:
my extern js-File
export function myFunction(text) { return text; }
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="myExternFile.js"> </script>
</head>
<body>
<script>
console.log(myFunction("some text"));
</script>
</body>
</html>
According to ECMAScript modules in browsers you can do it with <script type="module">
<script type="module">
import {myFunction} from './myExternalFile.js';
console.log(myFunction("some text"));
</script>
Your function will work without the export. Just make sure to call it between the script tags.
I added my vue.js in the header but it has an error that says element root can't be found, because I have a div with an id of root.
But when I add it on the body everything works fine.
This is my js code.
new Vue({
el: '#root'
});
And this is my html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue#2.1.3/dist/vue.js"></script>
</head>
<body>
<div id="root">
<task-list>
</task-list>
</div>
</body>
</html>
you need to import your vue js library at the bottom part of your body because your #app HTML container needs to be loaded first before it can be analysed by vue js.
<body>
<div id="app">
</div>
<script src="vue.js"></script>
</body>
Hi I didn't see any included js(except for vue package) in your html. But I think the solution is to place your script in footer.
Also if that doesnt work place it inside window.onload
window.onload = function() {
new Vue({
el: '#root'
});
};
you could also use the defer attribute on your script, this will make sure the entire page is loaded before processing the Javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue#2.1.3/dist/vue.js" defer ></script>
<!-- Assuming that you saved your vue code in a seperate file called vue.js -->
<script src="vue.js" defer ></script>
</head>
<body>
<div id="root">
<task-list>
</task-list>
</div>
</body>
</html>
I have one file, that is external from my index.html page, named code.js with this code on it:
function parse() {
if (a === 1)
alert("a equals 1");
}
(function() {
parse();
})();
As I said, that file is called code.js.
Now, I have an index.html file that is in the same folder/directory as the code.js file. Now, this is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="code.js"></script>
<script type="text/javascript">
var a = 1;
</script>
</head>
<body>
<h1>Javascript</h1>
</body>
</html>
So I want to be able for the code.js file to use the variable from my javascript that is in the index.html file. I am doing this because I am going to make my own javascript library, but I need to do learn this first. Any solutions?
Switch the order of your script tags:
<script type="text/javascript">
var a = 1;
</script>
<script src="code.js"></script>
This way, the global variable a will be initialized before the parse method in code.js is called.
To add on to what Robby said, browsers load a page in order from top to bottom, left to right, because that is how they are written (sort of). This means in your supplied code, code.js is loaded and run before you set a=1. As Robby mentioned, you can easily switch the order of your <script> tags and be fine.
This applies to other elements as well, so any other elements will not be accessible before their place in the HTML document. For example, a <div> in the body cannot be referenced by code run in the head, because the body has not been loaded yet. You can circumvent this by adding a <script> tag at the end of your HTML document, to be run after the main document has been loaded, but not necessarily all other external data like images (external scripts should be fine, however). The snippet below is what I have found works best:
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Any script here could be anywhere (embedded/external) and in any order -->
<script>
function ready() {
document.getElementById('a').textContent = 'a = ' + a;
}
</script>
<script type="text/javascript">
var a = 1;
</script>
<!-- <script src="code.js"></script> - load external code here -->
</head>
<body>
<h1>Javascript</h1>
<div id="a">a = ?</div>
<script>ready(); // Runs code after document is initialized</script>
</body>
</html>
In the javascript assets file I have a jstester.js file like this:
function hehe()
{
alert("wedsdsd");
}
document.write("fdygsdfysdgf");
Then in the public index.html file I have this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="/assets/jstester.js">
hehe();
</script>
</body>
</html>
So I thought that is how I can call a method from my Javascript file but looks like it is not working, no message box shows up... So what is the correct way of doing this?
If a <script> has a src then the text content of the element will be ignored.
so you can't do:
<script type="text/javascript" src="assets/jstester.js">
hehe();
</script>
but:
<script type="text/javascript" src="assets/jstester.js"></script>
<script>hehe();</script>
This is what you looking for:
<body>
<script src="/assets/jstester.js"></script>
<script type="text/javascript">hehe();</script>
</body>
I'm having problems with global variables.
Considering that I have the following files: init.html, main.html, init.js, main.js and help.js :
Where, init.html:
<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="init.js" ></script>
<script type="text/javascript" charset="UTF-8" src="main.js" ></script>
<script type="text/javascript" charset="UTF-8" src="help.js" ></script>
</HEAD>
<BODY>
<script>
$(document).ready(function() {
test();
});
</script>
</BODY>
</HTML>
In init.js :
function test(){
alert(window.glob);
}
In main.html :
<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"> </script>
<script type='text/javascript' >
top.glob = "global variable";
</script>
<script type="text/javascript" charset="UTF-8" src="help.js" ></script>
<script type="text/javascript" charset="UTF-8" src="main.js" ></script>
</HEAD>
<BODY>
<div id="divtest"></div>
<form>
<input type="button" value="button" onClick="callTest()" />
</form>
</BODY>
</HTML>
main.js:
function change(p){
window.glob = p;
$('#divtest').html("<iframe id='IFRAMEtest' width='720' height='400' frameborder='0' src='init.html'></iframe>");
}
And in help.js :
function callTest(){
change('param');
}
When I click in button, displays "global variable", but I need to display "param".
In short, I need that a .js file read a global variable in another js file where this variable is fed into a function called by an event of a user.
Thanks.
edit - initialized global variable before importing files. js and using top. Works in IE and firefox, but chrome display "undefined"
Take a look here:
Global variables in Javascript across multiple files
The main thing is, that you may have to declare the global variables
before the actual file, so try inserting this before your inclusion to help.js
so try giving this a shot.
<script type='text/javascript' >
window.glob = "global variable";
</script>
so your code should be:
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js" ></script>
<script type='text/javascript' >
window.glob = "global variable";
</script>
<script type="text/javascript" charset="UTF-8" src="help.js" ></script>
<script type="text/javascript" charset="UTF-8" src="main.js" ></script>
</head>
try that and see if it works.
also, remove your global variable declaration from main.js for this.
There's no global context that spans windows (frames), really. All frames in a "family" have access to a variable called "top" that refers to the topmost window, so you could use that.
top.glob = "global variable";
and in your iframe code:
function test(){
alert(top.glob);
}
edit — Here is a a slightly simplified version of your code, and it works fine for me.
When you are inside a frame and want to get a window variable from the parent window, you must refer to it.
Use top or window.top.