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.
Related
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 am trying to avoid header, sidebar info repeating of my html page template.
So, I was thinking to user innerHTML to replace the contents on the fly. However, I do not want to put entire target html on the same page under innerHTML as it will be nightmare to debug or maintain later.
So, is there a way to specify the another page link in the innerHtml and have contents separate?
just as an example
<script type="text/javascript">
function replacePage(page){
var ele = document.getElementById('page-wrapper'); ele.innerHTML = "<div>hey vik</div>";
}
</script>
I'm looking if i can specify the innerHTML value as some .html file name and move the <div>hey vik</div> there.
ok guys i finally used jquery to do this. What I did was instead of loaded content part, i actually moved the static part into a .html file and then loaded it via jquery as
$(function() {
$("#includedContent").load("navbar.html");
};
the place where i need to rander it i added as below
<div id="includedContent"></div>
You can use document.documentElement to select the root element of the document and the store it in a variable:
let content = document.documentElement;
And then use innerHTML to change the page content:
content.innerHTML = "<body><h1>text</h1><body>";
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.
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.