My webpage is including a .js file whose functionality I have to change/replace/expand.
I have the new JS all written out and included in my webpage, but I can't get it to overwrite the original script or prevent the original script from executing.
Assume I am unable to remove the original <script> element from the page, but I am able to include my new script before the original script.
EDIT: Here's how it's laid out:
<script src="my-new-script.js"></script>
<!-- Some HTML -->
<!-- I want to replace the functionality of the below script with
"my-new-script.js" and/or prevent my-old-script.js from executing -->
<script src="my-old-script.js"></script>
The reason:
my-old-script.js is being loaded by a WordPress theme, and for my purposes I cannot change the theme or alter PHP files of the theme, so I cannot prevent my-old-script.js from being loaded. But, I can include my-new-script.js via Widgets
I looked at some of the answers given here, but they didn't seem to apply to my scenario
So I could not remove the script because it's functions were already saved in the window scope, but I could re-assign the function
<!doctype html>
<html>
<head>
<title>Test</title>
<script>
window.addEventListener("load", function() {
// document.querySelectorAll("script")[1].remove()
window.myFunc = () => {
console.log("my first func")
}
})
</script>
<script>
function myFunc() {
console.log("my second func")
}
</script>
</head>
<body>
<button type="button" onclick="myFunc()">Click</button>
</body>
</html>
Related
Why it is necessary to first include an external js file and call any functiont later on with new script tags ?
I am testing with the code:
test.html
<html>
<head>
</head>
<body>
<script src=test.js>test();</script>
</body>
</html>
test.js
function test(){
alert(1);
}
It does not show an alert popup.
But when I include test.js separately either in body or head with the code:
test.html
<html>
<head>
</head>
<body>
<script src=test.js></script>
<script>test();</script>
</body>
</html>
It does show a pop-up indeed. Does it have anything to do with the HTML parser? I am not even getting a ReferenceError displayed in the browser console so test has a reference but it is not executing.
Code in the global namespace must be loaded in the order such that executed code must first be defined.
For example, if a.js had...
var a = function() {
alert('a');
}
...and b.js had...
a()
...then you wouldn't want to include b.js before a.js, or a() won't be available.
For above,
<script src=test.js></script>
<script>test();</script>
again it is the same way: First include file, then run its contents.
this happens because when you specify a src attribute you told the browser not to look for javascript inside this tag but instead from an external one
I have a simple HTML page which calls a JavaScript function:
<!DOCTYPE html>
<html>
<script type="text/javascript" src="css/myscript.js"></script>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body onload="javascript:hello()">
</body>
</html>
This is my hello() function:
<script>
function hello() {
alert("load new content");
document.open();
document.write("<h1>Changed content!</h1>");
document.close();
}
</script>
When pasting the JavaScript block into the page directly, it works. However it's not able to find hello() if the JavaScript is contained within a dedicated file.
Using the Developer tools I can see that the JavaScript file is loaded successfully.
If you have those script tags in your js file, get rid of them.
2 issues, during parsing of your script, document is already open. If you open again, everything will be deleted so get rid of it(write is already a call to open). Second, make sure you do not add the script after the load event, so that function hello is really defined. Here I am adding it right within body (or you can use defer if you want.) Here is the fiddle
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body onload="hello();">
</body>
function hello() {
alert("load new content");
//document.open();
document.write("<h1>Changed content!</h1>");
document.close();
}
The contents of myscript.js should just be:
function hello() {
alert("load new content");
document.open();
document.write("<h1>Changed content!</h1>");
document.close();
}
You would include the <script> tag only if your JavaScript were inside your HTML file; the <script> is what tells the browser, "Hey, we're not interpreting HTML anymore. This is JavaScript."
Also, as Colin pointed out in the comments, myscript.js probably doesn't belong in your css folder. A common name for the folder that contains all your website's JavaScript files is js.
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>
I am trying to get to grips with Knockout and so I have created the following html file...
<html>
<head>
<script type='text/javascript' src='http://knockoutjs.com/downloads/knockout-3.2.0.js'></script>
<script type='text/javascript' src='jsfile.js'></script>
</head>
<h1>Welcome<h1>
<button data-bind="click: speak">Say it</button>
<script>
alert('Binding Started');
function indexViewModel() {
this.speak = function() {
alert('Working!!');
};
}
ko.applyBindings(new indexViewModel());
alert('Binding Done');
</script>
</html>
When I load the page all is well in the land of milk and honey. I get an alert that says the binding is starting.... Then I get another alert saying that its done and when I click the button... Yip you guessed it I get an alert stating that its working.
The problem I am having is when I try to separate the java-script code out into an external file it does not apply the bindings.
So my html file will look like this......
<html>
<head>
<script type='text/javascript' src='http://knockoutjs.com/downloads/knockout-3.2.0.js'></script>
<script type='text/javascript' src='jsfile.js'></script>
</head>
<h1>Welcome<h1>
<button data-bind="click: speak">Say it</button>
</html>
And my file "jsfile.js" looks like this....
alert('Binding Started');
function indexViewModel() {
this.speak = function() {
alert('Working asstastic');
};
}
ko.applyBindings(new indexViewModel());
alert('Binding Done');
When I now load the html page I get an alert for the binding starting and then ... Nothing...... :(
If I remove the line for the ko.applyBindings(.. then it gives me the second alert that the binding is done. however obviously the button does noting.
What am I doing wrong It seems like its not seeing the knockout functions in the .js file but I have hit a brick wall..
Please help..
The 'head' html tags will get loaded before the 'body' tags...
Your applying knockout bindings in your 'head' tags.
( in your custom .js file after including knockout )
These bindings / Javascript code is loaded / executed / happening before the body has been loaded;
Thus its / knockout is trying to bind js data to html body UI content which the browser / window does not yet know about.
p.s. - Put your content in a 'body' after the 'head'. Then include your custom .js file after the 'body,' this way everything is now loaded in order to achieve what you want. Alternatively... Include logic in the .js itself to execute after DOM / window has finished loading.
(Thanks to Jody Geers who pointed me in the right direction)
Ok I Was being an HTML noob..
No Body<>
Added them and then did the
<script type='text/javascript' src='jsfile.js'></script>
Works fine now..
Please put your js file after the Body .if you keep the Knock out js file in head then will not the UI with Model.As UIs are not found in the js file.
I came accross this html multiple file upload tutorial: http://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/
I'm new to web programming enough to not being able to understand how to make a code from the two sections of the 'complete code' in this tutorial, which basically are:
A. Some html code:
<h3>Choose file(s)</h3>
<p>
<input id="files-upload" type="file" multiple>
</p>
<p id="drop-area">
<span class="drop-instructions">or drag and drop files here</span>
<span class="drop-over">Drop files here!</span>
</p>
<ul id="file-list">
<li class="no-items">(no files uploaded yet)</li>
</ul>
B. And some javascript:
(function () {
var filesUpload = document.getElementById("files-upload"),
dropArea = document.getElementById("drop-area"),
fileList = document.getElementById("file-list");
function uploadFile (file) {
[etc]
I recognize the code, but I don't understand where a part of code beginning with (function () is supposed to go into my code.
So my question is: how should the javascript part be placed in my code.
[Edit]
Thanks for your complementary answers!
Either just before the </body> tag, between a <script type="text/javascript"></script> tag like this:
<body>
<!-- other stuff -->
<script type="text/javascript">
(function () {
// this is your function's core
})();
</script>
</body>
Or within the <head></head> tag, also between a <script type="text/javascript"></script>, but you have (probably) to wait until the DOM correctly loaded. For example, using jQuery:
<head>
<!-- other stuff -->
<script type="text/javascript">
$(function() {
(function () {
// this is your function's core
})();
});
</script>
</head>
Or even within an external JavaScript file, where you'll also have (probably) to wait until the DOM correctly loaded. For example, once again using jQuery:
file myScripts.js
$(function() {
(function () {
// this is your function's core
})();
});
file myDocument.html
<head>
<!-- other stuff -->
<script type="text/javascript" src="/path/to/myScripts.js"></script>
</head>
Javascript is placed inside onClick, onMouseOver, etc. attributes, as well as inside <script type="text/javascript"> tags.
They can be anywhere inside the <head> or <body> tags (place it after the elements you are accessing, so that they load).
w3 Schools has a Javascript reference to get you started.
Create a file with .js extension so yourFile.js.
Put your java-script code in it...
At the end of HTML file place this inside:
<script src="yourFile.js"></script>
Make sure your js is in the same directory as is your html...
Just put the javascript inside <script></script> tags after your upload form.
The post you linked to has a complete working demo of the code it describes which can be found here:
http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html
A good way to experiment with this kind of code snippet is to paste the required section into a tool like JSFiddle
Since the code includes getElementById but nothing like window.onload or any other deferring tactic, it MUST be placed AFTER the form you want it to affect. To be on the safe side, you can place it in a <script> tag immediately before </body>.