Can I have something like this?
<script src="path-not-found.js">
//if file path is incorrect, then do scripting here
//for eg.
console.log('path not found');
</script>
No. You can't.
If the src attribute is available then script's contents are ignored.
That means, even if the src path is incorrect it will ignore it's contents because it just checks for src attribute and if it is there, the contents inside script tag would be ignored.
You need to use two separate <script> tag and do coding there:
first one with src for external file, and the second one without src, but with the code,
which will be executed after that file.
Related
Say I have 2 html files, index.html, and example.html and they both use script.js. If I were to use a statement like document.createElement("p"); in the script, how would I specify which html file I want to make the paragraph in?
One way to do this is to play with classes/IDs. The JavaScript file will work on whichever DOM is loaded, whether it's a DOM based on your first HTML or the second.
If you were to do this, you could--in theory--have a specific ID on one HTML file and another ID on the other. Your JS file can append the paragraph to the node with that ID, but only if the ID is actually on the DOM.
This is far from ideal though.
If you don't want the element to be created in every HTML file in which the JS file is included, the code should be invoked from the HTML file as appropriate. For example, you would add a <script> block in the HTML file that calls createMyElement, and createMyElement would be a function in the shared JS file.
Where do you intend on injecting the paragraph element? You could give each section a different id and do something along the lines of :
function InjectHtmlElement(bodyId, element, modifyBodyCallBack)
{
let body = ducement.getElementById(bodyId);
if(body == null)
{
return
}
modifyBodyCallBack(body, element);
}
<body id="first"></body>
<body id="second"></body>
This isn't ideal but it'll work.
by appending the node element to an element in the desired file.
var p = document.createElement("p");
document.body.appendChild(p);
to learn more about appendChild
My question is about making src in html script tag dynamic. Now, I have something like this at the bottom of the html :
<script src="https://blabla.com/assets/jxx.js"></script>
In my angular js file, I've a method to return the url prefix dynamically.
$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl($scope.pathPrefix + src);
};
And what I want to do is transform the src part to this:
<script type="text/javascript" src="{{trustSrc('/assets/jxx.js')}}"></script>
The prefix of the url changes depending on the environment. So I need to change it dynamically.
This method works if I put the script tag in the html's head portion. But mine should be outside of the head and at the bottom of the html.
What do you recommend to do this?
I'm not sure but it can be happening because of your controller's scope.
As you are using trustSrcfunction with $scopein your controller, make sure that in HTML file you are using <script></script> in controller's scope.
I tried like this
<script type="text/javascript" src="myfile.js"?+Date.now()></script>
In browser it is showing as it is.
I want to add some timestamp to each js files.
i.e.,
<script type="text/javascript" src="myfile.js"?+5671836294></script>
Thanks in advance.
You can't randomly stick JavaScript anywhere you like in HTML.
When you are in the middle of an HTML start tag you can either:
End the tag with >
Write an attribute
JavaScript does not belong there.
If you want to generate an HTML attribute value dynamically when the element is created, then you must create the entire element with JavaScript.
e.g.
<script>
var s = document.createElement("script");
s.src = "myfile.js"?+Date.now();
document.head.appendChild(s);
</script>
… but you'd probably be better of solving this problem by properly configuring your HTTP headers for the script instead.
Refresh the page or rewrite the script tag and append it to the bottom of the body.
But once a page is loaded, it is loaded. You have to redeclare to overwrite.
I'm learning JavaScript along with HTML and CSS. I wrote up JavaScript file, Primes.js, that contains a few prime-finding related functions for testing.
To test out using external .js files, I wrote up the following HTML file:
...
<body>
<script src="Primes.js">
console.log("Loaded...");
var n = 13;
alert(n + " is prime?: " + isPrime(n));
console.log("Ending...");
</script>
</body>
...
But it never executed the statements within the script block.
After looking around, I found this answer, and changed the body to:
...
<body>
<script src="Primes.js"></script>
<script>
console.log("Loaded...");
var n = 13;
alert(n + " is prime?: " + isPrime(n));
console.log("Ending...");
</script>
</body>
...
And magically, it worked as expected. It seems odd requiring an empty script tag to import a file.
Why require that the script tag importing the .js file be empty? Are/were there consequences if scripts were sources in the same tag they were used?
As written in w3c the content inside the script is supposed to use for documentation of the script when src attribute is present.
If a script element's src attribute is specified, then the contents of the script element, if any, must be such that the value of the text IDL attribute, which is derived from the element's contents, matches the documentation production in the following ABNF, the character set for which is Unicode.
Normally, if you were not importing script from another file, you would type the script between the script tags. But since you are importing by declaring a src, the script in the file you are importing is treated as if it were inserted between the (empty) script tags by your browser.
The src attribute designates that the script should be imported. The rendering engine will ignore anything placed between the script tags when it sees an src attribute.
Placing text between script tags without the src attribute tells the rendering engine to runs it as inline script.
So do your import, then add your inline scripting between a new set of script tags.
I'm working on a script that requires I get a variable so we goto the right location on the site.
I want to do something like:
<script type="text/javascript" src="dir/script.js?x=103"></script>
But how would I get that?
Assuming you know the filename of the script within the script itself, search all <script> tags for the one that contains the relevant filename in its src attribute. Then split it on ? and read the value.