Say I have the following HTML source:
<html>
<head>
<script src="myscript.js"></script>
<meta charset="utf-8">
<script>/*other script*/</script>
<link rel="stylesheet" ...>
</head>
<body>
<div>...</div>
</body>
</html>
What does myscript.js code look like to prevent adding DOM elements as if source code was originally?
<html>
<head>
<script src="myscript.js"></script>
</head>
<body>
</body>
</html>
I already tried overriding javascript DOM manipulation methods such as .append, .prepend, .appendChild, .inserBefore, etc, for all nodes. Still, the browser adds <meta>, <script>, <link>, <div>, and so on. It seems javascript overrides only affects javascript created nodes... which makes sense IMO.
The question is: is there a way to prevent adding DOM items which are part of the download HTML source?
You're looking for Window.stop:
The window.stop() stops further resource loading in the current browsing context, equivalent to the stop button in the browser.
Because of how scripts are executed, this method cannot interrupt its parent document's loading, but it will stop its images, new windows, and other still-loading objects.
Here's an example:
<div>Div #1</div>
<p>Paragraph #1</p>
<div>Div #2</div>
<script>
window.stop();
</script>
<p>Paragraph #2</p><!-- This element is not rendered -->
Related
It should be easy,
but as easy as it should be I can't solve the problem.
If I'm typing the following HTML and JS code into an online editor,
everything works fine but if I'm typing this into my (offline) editor it won't work.
Here's the online code:
http://jsbin.com/kenurunahu/1/edit?html,js,output)
I bet it has something to do with the loading order and how the files are linked.
Thats how my (lokal) HTML-file looks like (where the files are linked):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
<script src="Script.js"></script>
</head>
<body>
<p id="demo">
something
</p>
</body>
</html>
Many Thanks for Help!
[Update]
Firefox and Chrome display the JS file. Sometimes I get an error message that says 'innerHTML is null', but if I write the same code into the console everything works fine.
you have the error when the js script is loaded before the html dom is fully loaded by the browser. A simple solution for your testing is to place the script include at the end of your html page, like this :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
</head>
<body>
<p id="demo">
something
</p>
<script src="Script.js"></script>
</body>
</html>
A better solution is to run your script only when the dom is fully loaded. For example with the body onload event :
<body onload="yourFunc()">
Or event better by using only js code, for example with jquery ready function or by writing a simple custom handler that should work on all major browsers :
document.addEventListener("DOMContentLoaded", function(event) {
//call your func here
});
Hope that helps.
A few guesses:
Capitalization is important. If the file is named script.js do not link to Script.js
Is your js file in the same folder as the index.html document? Because that is what you are saying.
Normally, we arrange our file structure something like this:
public_html
- css
- js
- img
- inc
If your styles/scripts are stored in sub-folders, such as js and css, then you must amend your references to:
<link rel="stylesheet" content="css/Index.css">
<script src="js/Script.js"></script>
As a good practice, your scripts should be placed at the closing of body tag. External scripts are blocking and hence it would make sense we do not put them at the top. Also, when your script placed at the top runs, your DOM may not be ready, which means any element your script is trying to access may not be present in DOM at all which results in your error.
Hence, all your scripts should be at the closing of body tag. That way when the script loads and runs, you can be assured that the DOM is ready.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
</head>
<body>
<p id="demo">
something
</p>
<script src="Script.js"></script>
</body>
</html>
Here is a snippet of code that uses a script to populate the contents of an iframe:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
$('iframe').contents().find('body').html('<script>console.log($("div"))<\/script>');
});
</script>
</head>
<body>
<div>Test</div>
<iframe />
</body>
</html>
When executed we see that the iframe has access to the parent's DOM and we see the div being selected by the jQuery selector. The iframe does not have jQuery included but it can access the jQuery object of the parent.
However if we write the same thing via an iframe src inclusion, the behavior is different:
test.html:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<div>Test</div>
<iframe src="another.html">
</body>
</html>
another.html:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
console.log($('div'));
});
</script>
</head>
<body>
</body>
</html>
We now see that the page does not list any divs. Further, if we don't include the jQuery js in the child page, it would throw an error.
Note that both pages are in the same domain, so we don't have same-origin policy issues.
My questions are:
Why is the behavior different for the 2 - a. manipulating the iframe DOM from the parent and b. including the iframe content via a src?
Is there a way to make the parent have access to the child and NOT vice-versa?
So the first bit of code gives 1 and the second bit of code gives 0?
That seems correct.
In the first example $ is bound to the parent frame. In the second example, since you have a new instance of jQuery it's bound to the iframe.
In:
$(document).ready(function() {
$('iframe').contents().find('body').html('<script>console.log($("div"))<\/script>');
});
jQuery's html function will do an eval on the script-part of the inserted HTML. That eval will run in the scope of the parent so it uses the parent instance of $.
If you just moved the script to the iframe it will fail because it doesn't have access to $.
When i keep my javascript/jquery external, my code doesn't work. but when i combine them in my html file everything is fine.
any suggestions as to why this is?
here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type ="text/javascript" src="jquery.js"></script>
<script type ="text/javascript" src="program.js"></script>
</head>
<body>
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
</body>
</html>
with external javascript
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
$("p").click(function () {
$(this).slideUp();
});
VERSUS
<!DOCTYPE html>
<html>
<head>
<script type ="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
<script>
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
$("p").click(function () {
$(this).slideUp();
});
</script>
</body>
</html>
I guess you execute the click event before the DOM finishes loading. Wrap your code inside the dom ready event and it should work, Assuming your path to the external javascript file is correct.
$(function(){
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
$("p").click(function () {
$(this).slideUp();
});
});
Always use firebug (console) to see what is wrong with the script, if you run into any script errors.
Your javascript is executed before there are elements on the page. You can get around this by using $(document).ready(function(){...}); or moving your external javascript files to the bottom.
Wrap your js code in external file in
$(document).ready(function(){
//your code goes here
});
Right now you are including external js file in header and it is executed. At this point there is no elements so $('#clickme') and $("p") are empty set. In the second example you run this code after rendering html with that elements.
The reason that there is a difference, is that in the external file your code is executing before the browser has fully parsed the DOM so you are attempting to programatically access elements of the page which the browser is not yet aware of. This is exactly what most people have already said, but let me elaborate a bit further...
Whilst a lot of people have mentioned using jQuery's document ready handler, I would like to point out that a workable solution is simply to move your script tags to the bottom of the page.
Not only will this solve your problem in itself, but it will also improve page load times because of how browsers treat scripts. When the browser encounters a script it stops everything else it is doing (known as a "blocking" operation), and parses and executes the script. This causes the page to just appear to stall from a user's perspective, meaning a bad user experience. Thus, because the scripts are parsed and executed only as they are encountered, by moving your scripts to the bottom you allow the browser to fully render the page so that the JavaScript does not block rendering.
Though rather than just moving scripts to the bottom of the page, I'd also follow what the others recommended and wrap the whole code in the document ready handler just to be extra safe that your code will always be executed at the correct time.
Also, in the debate of inline or external, external scripts are generally preferred as they are easier to maintain and the browser can cache them independently of the page (providing the correct HTTP headers are present).
To sum up here's some example code:
<html>
<head></head>
<body>
<!-- all your markup here -->
<!-- script at bottom, markup already rendered by this point -->
<script type="text/javascript" src="jquery.js"></script>
<!-- inline or external, still wrap in document ready handler -->
<!-- though external is better because the browser can cache it independently of the page -->
<script type="text/javascript">
//wrap in document ready to be extra safe
$(function() { /*code here*/ });
</script>
</html>
I am not clear why its not working the javascript code when I add it to the header section as follows.
We can place a javascript code within the body as follows
<html>
<head>
<title> Simple Test </title>
</head>
<body>
<div id="mydiv"> This is the div content </div>
<script type="text/javascript" >
document.getElementById("mydiv").innerHTML=Date();
</script>
</body>
</html>
But when I place the same JavaScript code in the header section it doesn't work.
<html>
<head>
<title> Simple Test </title>
<script type="text/javascript" >
document.getElementById("mydiv").innerHTML=Date();
</script>
</head>
Can Someone please explain the issue. I know I can Write a JavaScript function in header and call it in an event. But can't we Use in this way. If Can't why.
<html>
<head>
<title> Simple Test </title>
<script type="text/javascript" >
window.onload= function (){document.getElementById("mydiv").innerHTML=Date();}
</script>
</head>
I think above code will help you to solve your problem. You can try this one.
because when the page is loaded, by the time the browser gets to that <script> element, the #mydiv element has not yet been created.
either use an "onload" event, or put your scripts at the bottom of the page.
It's because the page is being rendered in the order it's read. Therefore when the script in the header is evaluated the rest of the page hasn't been rendered yet (ie the myDiv element hasn't been created).
When you create an event handler in the head that works fine - the handler is set up before the rest of the page is loaded but the event can't happen until the element exists.
When you put it in the <head>, it runs before the <body> exists.
this is because of the page rendering order.you can access elements before it has been created. if you can, try to put all JavaScript code end of the page(before closing body tag). it will save your page load time. if you cannot put it in the bottom, put the code inside onload event.
Ok, I made 2 posts about this but somehow I can't get it into my little mind.
So I concluded that if we have something like this:
<script type="text/javascript" src="somefile.js"></script>
<script type="text/javascript">
func1();
</script>
and func1() is defined in somefile.js, it is guaranteed to run when browser reaches that inline .
However, what if I have a big page (not taking into account images etc, just html) that takes a few seconds to load and for DOM to become ready (as I understand the DOM becomes ready when the whole html code has been loaded and parsed) and I want some code to be executed and work on parts of the page that have been loaded while the rest of the big page is still loading?
For example something like:
<div id="div1">Some div where content will be inserted by the inline javascript below</div>
<script type="text/javascript"> notifyPartLoaded("div1"); </script>
^^ Does something like this exist?
I'm not certain what your question is, but a simple way to ensure DOM ready is to place your JavaScript at the bottom of the HTML, just in side the closing </body> tag.
<!doctype html>
<html>
<head>
<title>some title</title>
<!-- this script could go toward the bottom too, but it must be before -->
<!-- your script if your script relies on it -->
<script type="text/javascript" src="somefile.js"></script>
</head>
<body>
<div id="div1">Some div where content will be inserted by the inline javascript below</div>
<!-- your HTML -->
<!-- your HTML -->
<!-- your HTML -->
<!-- Place your script last -->
<!-- ...though it would be better to have it in a separate file -->
<script type="text/javascript"> notifyPartLoaded("div1"); </script>
</body>
</html>
Because your code is after all the other elements, they will exist for manipulation when your code finally loads and runs.