According to the instructions that I am following these codes below should be able to embed a button that would perform a certain function.
<script>
document.write('<scriptsrc="sourcefile/filename.js">/script>')
</script>
The problem is that the above code displays /script> instead of displaying the button that the js file should display once run. Now when I try to edit it this way
<script>
document.write('<scriptsrc="sourcefile/filename.js"></script>')
</script>
') is displayed which clearly means that the first </script> closes the first <script> tag which should close the second one instead.
sorry cause I find it hard to explain it further.
Looks like you just want to include a javascript file into the current html page.
As described in http://javascript.info/tutorial/document-write
That's convenient, but a bad way, because loading a script may block the rest of page from rendering.
Using DOM is a preferred way, other than the example posted on that page, below is how twitter does it.
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","twitter-wjs");
</script>
Related
There is a site with wall of topics. Anyone can write anything. But anyone can write JS script and this script will be executed with loading this site.
Something like document.body.innerHTML = "";.
I wrote also script which found every script in <div> with topics and rewrite its to empty string, but it does not work.
If I tested this script on the site (in console) with topics (before executed), it found scripts and rewrite its, but after post my script to this website, it does not work. Scripts will be executed after all.
Can I fix it before help from IT tech?
One solution is to add the user content as a text node. The content will show up exactly as the user typed it. Though if you're trying to include formatting (bold, italic, etc.), this won't work.
const userContent = "<myScript>alert('here')</myScript>"
const userContentNode = document.createTextNode(userContent)
document.body.appendChild(userContentNode)
<body>
</body>
I had to use <myScript> instead of <script> because it looks like Stackoverflow does some kind of anti-XSS stuff for snippets.
I have a simple Javascript function that can be placed anywhere within HTML document. So I put it right below the closing , for example:
<html>
<body>
Some text.
<script>
document.getElementsByTagName('body')[0].innerHTML='hello';
</script>
</body>
</html>
My question is - would it make sense (from page load speed point of view) to load this script via the addEventListener("load") function instead? Ie. if I use this code below - which would be preferred? I understand that when Javascript is on the bottom of the page, it won't 'block' page rendering anyway, so using the addEventListener may only slow the execution down?
<html>
<body>
Some text.
<script>
window.addEventListener("load",function()
{document.getElementsByTagName('body')[0].innerHTML='hello';},
false);
</script>
</body>
</html>
Scripts should generally not be placed directly in the HTML like that, because they block further HTML parsing until they're executed. While it's not a problem if you have only one script, what if you have two, or three, or more, and some of them might take more than a handful of ms to parse?
Still, assuming that blocking isn't an issue, there's no real difference on way or the other, from the UX point of view.
Scripts, being information about how to interact with the content, but aren't actually content themselves, belong in the <head> IMO. If you don't like wrapping everything in a load listener, you can use the defer attribute to automatically run the script once the whole HTML has been parsed: <script src="..." defer>.
I'm using a low-code development platform called WaveMaker right now, and it gives you the option to customize the "markup" of the page (HTML, but you can't really edit <head>; the whole thing is kind of weird), the Javascript of the page, particularly with events like onpageload, etc., the style of the page (CSS), and the page's variables (JSON). I'm trying to embed Formstack forms, but every time the Markup section encounters a <script> tag, it deletes everything after the end of the tag. This is what the markup page looks like. I contacted support and they seemed to indicate that this was on purpose. Is there any way to make HTML run script included in-line without saying <script>? PS: I would be able to embed using iFrames, but for some reason the iFrames aren't working on the iPhone test program, even though they're working on the simulator.
What you can do is put it inside an HTML event attribute.
<body onload="/*your JS here*/">
</body>
If that does not work, try attaching onload to another HTML element or try one of the other event handlers (though I believe that they should have taken this into account as well)
How about this :
<body onload="javascript:(function(){
// you can place your code here it should run
alert('ok')
})()">
</body>
In Avatao's Senior Web Security Career Path, there is a hacking task, where you need to insert malicious javascript code - but the <script> is tag filtered (other tags aren't). Aenadon's answer gived me one solution:
<body onload="your JS here"> </body>
After submitting that, I checked the official solution, and I found that:
<img src="x" onerror=alert('xss')>
I am a total beginner in Javascript but not in OOP or HTML. I have started the Beginning Javascript book and have run into trouble with the second example. The following code should display p1 in my browser(Chrome) and then and alert box saying "first". However I do not understand why it is happening the other way around --- alert appears before p1.
<html>
<body>
<p>p1</p>
<script type="text/javascript">
alert("first");
</script>
</body>
</html>
EDIT: As an additional solution to problem of manipulating HTML elements with cross-browser compatability, I think jQuery would be an essential next step for web development after learning Javascript.
Please go through the link below to understand the load and execution order of the script.
load and execute order of scripts
The html is being rendered but as the alert is not triggered by any javascript event, it fires as soon as the dom is loaded. You do not have any bug and the behavior of your browser is ok.
How to first load/render HTML/CSS and then Javascript? on a page of website/web-app?
So page loading should not seems slow because of javascript. I read about defer and async but not much clear on this topic. Is to keep javascript at bottom enough?
I want to load html/css first because the javascript i added is for further interactions.
For example I have a buttton which do something using javascript. I want to related javascript file only if user click/press that button otherwise not.
I don't want to preload the JavaScript because it's not necessary it will be used or not until it's required
Depends on what you are talking about. If you are talking about javascript in the page itself put it at the bottom of the page. If you are referring to loading external libraries you can do so dynamically with javascript.
<script type="text/javascript">
var hed = document.getElementsByTagName('HEAD').item(0);
var scrpt = document.createElement("script");
scrpt.type = "text/javascript";
scrpt.src = "scriptsource.js";
hed.appendChild(scrpt);
</script>
More info on this can be found here: http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html
EDIT
You could place your JS inside of the onload event Javascript that executes after page load
you can also use this Jquery code to make the HTML on your page load first. This will make sure that the HTML is in place for the javascript to load on it.
$(document).ready(function() {
// your code here
});
Simply move your <script> tags to the bottom of your page, just before the closing </body> tag