Understanding javascript autoexec function triggers - javascript

Given an external javascript file with autoexec function syntax:
// external-script.js
(function() {
console.log('external script called');
}());
With the following <script> tag, the external script doesn't execute:
<body>
// ...
<script src="external-script.js" type="text/javascript" />
</body>
But if I add an empty <script> block, as shown below, then the external script executes automatically.
<body>
// ...
<script src="external-script.js" type="text/javascript" />
<script>
// empty
</script>
</body>
Why does the addition of the empty <script> block trigger the autoexecute?

"self-closing" script tags using /> are not valid HTML syntax. Instead, you must always use <script></script>.
<script src="external-script.js" type="text/javascript"></script>
What is happening in your second example is that you are creating a single script tag with <script>//empty as its contents but this gets ignored since it will run the code from the src attribute.
In fact, HTML parsers just ignore all the / inside open-tags. Instead, some tags are always considered to be void elements with no contents (so <img> doesnt need a matching </img>.
For more info see Are (non-void) self-closing tags valid in HTML5?. Keep in mind that HTML5 is basically just a standard that documented the zany behavior that HTML parsers had already been doing all along.

Related

Why can't I execute JavaScript function inside the <script> tag that defines the .js source?

I am defining the source of a .js file and attempting to call a function from that file in the same tag, as follows:
<script type="text/javascript" src="jsFunctionTest.js">
testMethodCall();
</script>
The .js file just contains:
function testMethodCall(){
window.alert("Hello there");
}
This doesn't work, I don't see the alert.
However, if I change the tag to two tags, as below, then it works:
<script type="text/javascript" src="jsFunctionTest.js"></script>
<script type="text/javascript">
testMethodCall();
</script>
This seems pretty messy. Is there any reason the first one doesn't work?
script elements can have a src attribute or content, but not both. If they have both, the content is ignored (the content is considered "script documentation," not code).
You cannot register an external file and use the content in it, both at a time inside <script> tags. Only either one is allowed.

Can an inserted <script> tag be run multiple times without using eval in JavaScript?

I have to use a plugin which bundles js files inside html files (gadgets). For one use case I need to drop and re-instantiate a gadget to run updated code.
So say I have foo.html:
<html>
<head>
<script src="foo.js"></script>
</head>
<body>...</body>
</html>
and foo.js which is the file being injected into my actual document's head:
alert("hello");
Problem is I can only cachebust the html file dynamically and declare my gadget as foo.html?x=123, but the JS file I'm after will still be foo.js so the browser will not re-run it.
Question:
Once a <script> tag is inserted into the document and run, is there any way to run it again without using a module-loader or eval?
Thanks!
You could wrap your code in your <script> tags in a function then call your function. This will allow you to call your code to be called multiple times. Like this:
<script>
function loaded(){
// JavaScript here
}
loaded();
</script>
</body>

How to call an external function internally in javascript? [duplicate]

This question already has answers here:
javascript <script> tag - code execution before src download
(4 answers)
Closed 8 years ago.
I am relatively new to JavaScript so this might be somewhat trivial. However I can't seem to find the answer to this question.
Say I have a JavaScript file (bar.js) with a function in it called foo(). I want to call this function (foo) inside a script tag. I would like it to work like so.
<script type="text/javascript" src="bar.js">
foo();
</script>
I am not able to get this to work. I have ran the JavaScript console with my browser and what it seems to be doing is...nothing. No syntax errors or anything.
I can run a function similarly with a button click...using the script tag above and this.
<button type="button" onclick="foo();">Click Me</button>
I could do it this way, but in the actual circumstance I need to pass parameters into the function that is being called on the button click. I can't get those recognized either. I'm sure that something to do with scope.
The way I tried this was like so...
<script type="text/javascript" src="bar.js">
var a = "blah";
var b = "blab";
</script>
.... (some more html)
<button type="button" onclick="foo(a,b);">Click me </button>
Here I get that a is undefined. Which leads me to think that it is a scope problem. The script tag is in the head section and the button is in the body section. Can you put script tags outside of the head and body tags to make global data?
Thanks for the help in advance.
I have never used jsfiddle before and was having trouble getting it to work so I'll just post and example code here.
<html>
<head>
<script type="text/javascript" src="bar.js">
</script>
<!--From what yall say I should have another script
tag here for anything else. Say some variable?-->
<script type="text/javascript">
var a = "hello";
var b = "text";
</script>
</head>
<body>
<!--This should work now?-->
<button type="button" onclick="foo(b,a)">
Click me
</button>
</body>
</html>
bar.js contents:
function foo(id,string){
document.getElementById(id).innerHTML = string;
}
I got this to work.
Thanks everyone.
You need to first include the javascript containing the function:
<script type="text/javascript" src="bar.js"></script>
and then call it in another script tag:
<script type="text/javascript">
foo();
</script>
In your example you seem to have mixed 2 notions into a single script tag which is invalid: include an external javascript file and in the body of the script tag write your code.
According to the specification:
The script may be defined within the contents of the SCRIPT element or
in an external file. If the src attribute is not set, user agents must
interpret the contents of the element as the script. If the src has a
URI value, user agents must ignore the element's contents and retrieve
the script via the URI.
So basically you should avoid such situations and have separate script tags for including external files and for writing inline js.

How to detect whether a plugin or script has already been loaded without using eval() or requireJS?

I'm working on a plugin that allows to inject 3rd party code into a page (either as iframe or directly into the DOM).
My problem is "direct injections", because I need to make sure, I don't add any <scripts> additional times, if they are needed in my main page and in a page I'm loading and injecting.
For example (and I can't use requireJS), my page.html looks like this:
<html>
<head>
<script type="text/js" src="jquery.js"></script> // exports window.$
<script type="text/js" src="foo.js"></script> // exports window.foo
</head>
<body>
<!-- things that make foo load anotherPage.html and append its content here -->
</body>
</html>
with anotherPage.html
<html>
<head>
<script type="text/js" src="foo.js"></script> // exports window.foo
</head>
<body>
<!-- stuff that also runs on FOO -->
</body>
</html>
Page loading is done via Ajax and when I'm processing the data returned by my request for anotherPage.html I end up with a list of all elements after doing this:
cleanedString = ajaxResponseData
.replace(priv.removeJSComments, "")
.replace(priv.removeHTMLComments,"")
.replace(priv.removeLineBreaks, "")
.replace(priv.removeWhiteSpace, " ")
.replace(priv.removeWhiteSpaceBetweenElements, "><");
// this will return a list with head and body elements
// e.g. [meta, title, link, p, div, script.foo]
content = $.parseHTML(cleanedString, true);
// insert into DOM
someTarget.append(content);
This is where I'm stuck trying to detect whether a script I'm about to append to the document is already there.
I cannot go by the src, because the filename may differ and a script may be hosted on a different domain (with Access-Control-Allow-Origin correctly set). I also don't know, what and if the script I'm about to append returns a global I already have defined and I can't/don't want to use eval() to find out.
Question:
Is there any way to identify whether a plugin or script that may return a global is already "on" a page, when I only have the "non-appended" <script> element available?
Thanks!
here is an example of my self-enclosed module pattern, i call it a "Sentinel":
(function wait(){
if(!self.$){
if(!wait.waitingJQ){
wait.waitingJQ=true;
addScriptTag(JQUERY_URL);
}
return setTimeout(wait, 44);
}
doStuffThatNeedsJquery();
}());
The sentinel pattern work from anywhere (internal or external), doesn't care about script loading order, and works with ANY script loading library. you can list additional depends below the jQuery fork in the same manner, just put your greedy code at the bottom of the sentinel wrapper function.

Using <script> inside a jQuery-template

I'm using jQuery-templates for the first time, and I need my template to include some javascript, so it it run when the template is rendered.
I need at timestamp for the current time...
Writing
<script type="text/javascript"></script>
in a template, renders it to fail.
Is this simply not possible?
the following was blatantly copied from my answer to another question
When the HTML parser finds <script> it will start parsing the contents until it finds </script> which is present in:
document.write("<script src='links7.js?'+Math.random()+></script>
As such, you'll need to change the source so that it's not parsed as the end of a script element:
document.write("<script src='links7.js?'+Math.random()+></scri" + "pt>");
Ideally, you'd have HTML escaped all your inline JavaScript code, which would also mitigate this issue:
document.write("<script src='links7.js?'+Math.random()+></script&
For your particular case (which is different enough for me to not mark as a dupe), make sure that your content between your script tags is HTML escaped, or correctly placed between <![CDATA[ ]]> tags.
<script type="text/javascript"></script>
-or-
/* <![CDATA[ */
<script type="text/javascript"></script>
/* ]]> */
That all being said, you should be calling the necessary JS during the rendering process, and not injecting a script element into the DOM unnecessarily.

Categories