<script type="text/javascript ">
<body onLoad="timeTracker._recordStartTime();">
<body onunload ="timeTracker._recordEndTime(); timeTracker._track(pageTracker);"
</script>
I am trying to use this code to record the time interval between load and unload of a page.
Unfortunately, it does not work. Why?
You may only specify one <body> tag. Also, it's not possible in HTML to specify plain HTML tags inside script tags.
Either add the handler through JavaScript, or merge the attributes in one <body>-tag. JavaScript is case-sensitive, so you should use window.unload (lowercase) instead of window.onLoad.
Use:
<script>
window.onload = function() {
timeTracker._recordStartTime();
};
window.onunload = function() {
timeTracker._recordEndTime();
timeTracker._track(pageTracker);
};
</script>
OR (without <script> tags):
<body onLoad="timeTracker._recordStartTime();" onunload ="timeTracker._recordEndTime(); timeTracker._track(pageTracker);">
Related
I was told to add a tag being generated in Joomla. I just need to add the onload=... between the body tags. Is there a way to add the onload=... by itself or must it be part of the tag? Thanks!
If I understand the question correctly, and you need to trigger some JavaScript to run after the document is ready without editing the body tag itself, you could add it as follows:
<script>
jQuery(document).ready(function() {
// Your code
}
</script>
Notice the lack of "$". In Joomla, avoid using $ to reference jQuery to prevent conflicts with other JS tools.
If I've completely missed the mark, please clarify in a comment.
You can bind the event handler with JavaScript.
<script>
addEventListener('load', yourFunction);
function yourFunction(event) {
// ...
}
</script>
If you add a <script> tag to the header of the page, you can then add an event listener for the page load. Or a better option is to prevent render blocking code and add the <script> tag to the bottom of the page and have it run right away, since the page is already loaded.
Render Blocking Method
<html>
<head>
<script>
window.addEventListener('load',pageLoaded,false);
function pageLoaded(e) { console.log('Loaded'); }
</script>
</head>
<body>
</body>
</html>
Non Render Blocking
<html>
<head>
</head>
<body>
<!-- All The Body Content -->
<script>
(function() {
console.log('Loaded');
})();
</script>
</body>
</html>
i want to execute two function as soon as my page load , i have used onload in body tag and windows.onload in script but both are not working.
here is my code
<html>
<head>
<title>(Type a title for your page here)</title>
<script type="text/javascript">
function my_code(){
alert(" Alert inside my_code function");
var text_val = document.getElementById("t2");
text_val.select();
}
window.onload=my_code();
</script>
</head>
<body >
<form name=form1 method=post action=''>
<input type=text name=t1 value=plus2net id="t2">
</form>
</body>
</html>
Substitution or addition to code both are accepted , give some link where i get more information.
thanks in advance
Changing this :
window.onload=my_code();
To this should do it:
window.onload=my_code;
The reason why: my_code() causes the function to be executed. Without () you are passing the function as a reference to the onload event on the window. The onload event when fired will execute the function.
Even better is using the event setter addEventListener. When other code (like jQuery or other libraries) use the window.onload, using addEventListener wouldn't cause the onload event to be overwritten.
window.addEventListener("load", my_code, false); //you need to omit the "on" when assigning with this method.
This is the preferred way.
My webpage has the following code:
<html>
<head>
<title>This is test Page</title>
<script language="javascript" type="text/javascript">
document.getElementById("msg1").innerHTML = document.URL.toString();
</script>
</head>
<body>
<div class="sss">
<p id="msg1"></p>
</div>
</body>
</html>
As you now at the time the script executes the div doesn't exist but I want to put my JavaScript code only In the <head> tag and I won't put it in middle of HTML code.
But this code only works when I put the <script> tag after the <div> tag.
I use VS2010 and firefox 19.0.1
Is there anyway to put code in <head> tag?
Your script relies on the DOM being ready, so you need to execute that function call only after the DOM is ready.
<script language="javascript" type="text/javascript">
window.onload = function() {
document.getElementById("msg1").innerHTML = document.URL.toString();
}
</script>
The various tags in your HTML page are loaded and processed in the order in which they appear on the page. Your <script> tag is executed immediately when it is parsed in the <head>. This is before the <body> and the elements inside the <body> are parsed. So, the script tries to reference an element that is not defined at the time it is executed.
Michael Geary is right, in order to execute your code, I'd use jQuery library (a de-facto standard in JS development) and utilize the DOM ready event. This will ensure the code in the handler will execute once DOM is fully loaded.
<script>
$(function(){
$('#msg1').html(document.URL.toString());
});
</script>
I recommend to to use addEventListener like this:
<script language="javascript" type="text/javascript">
document.addEventListener("DOMContentLoaded",() => {
document.getElementById("msg1").innerHTML = document.URL.toString();
});
</script>
Your script uses dom element and must run after the dom loaded.
Wrap your code in a function and call it after dom loaded
function myfunc(){
//code here
}
window.onload = myfunc();
i use that tag to alert me when a tag has been shows up
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.getElementsByTagName('iframe')[0].onload = function() {
alert('loaded');
}
</script>
<iframe></iframe>
</body>
</html>
strange , since this code working :
<html>
<head>
</head>
<body>
<iframe></iframe>
<script type="text/javascript">
document.getElementsByTagName('iframe')[0].onload = function() {
alert('loaded');
}
</script>
</body>
</html>
why the Js need to under the tag to work?
what's the problem here?
Because the code in a script tag is executed immediately. And in the first example the iframe doesn't exist at that time. But what you can do is to wrap you code into an onload (for the main page) event. E.g.:
window.onload = function() {
//your code
}
Then it doesn't matter where the code is placed.
Iframe tag does not exist at the moment you are trying to access it.
You may check that by simply alerting array length, like
alert(document.getElementsByTagName('iframe'));
Have you thought about executing your javascript after the page is loaded? You may use some frameworks like jQuery to facilitate crossbrowser issues. Or just put all your javascript code to the very bottom of body.
I have this code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('a.one').click(function(event){
event.preventDefault();
});
});
function test(event){
event.preventDefault();
}
</script>
<style type="text/css">
a.test { font-weight: bold; }
body { font-family:sans-serif; background-color:#AAAAAA;}
</style>
</head>
<body>
<a class="one" href="http://jquery.com/">jQuery</a>
<br/>
<a class="two" href="http://stackoverflow.com/" onclick='test(event)'>stack overflow</a>
</body>
</html>
The test-function does not work as it stands now, since a regular javascript event doesn't support the jQuery event preventDefault-function. Is there some way to wrap a regular javascript event in a jQuery event so that I can use e.g. preventDefault?
Try this:
function test(e) {
$.Event(e).preventDefault();
}
Event object
I've found the best way to wrap a native event in a jQuery event is with fix:
event = $.event.fix(event);
Please note, this function is not part of the public API (although it really should be).
I think it may be the fact that you're passing event in with onclick='test(event)'. I think onclick='test' is enough. I could be wrong though.
Yes (see Darin's answer). You could also work around IE's lack of preventDefault instead (which is essentially what jQuery is doing):
if ('preventDefault' in event)
e.preventDefault();
else
e.returnValue= false;
When you just want to execute the javascript - and not redirect - when clicking the href use "return false" in your click function. For example:
$(function(){
$('a.one').click(function(event){
var condition = confirm('Do you want to redirect to ...?');
return condition == true;
});
});
If you never want the link to redirect use 'javascript:void(0);' as href attribute, all browsers will still render it as a link instead of an anchor (some IE version do this).