Tried for several times to get below Javscript to execute on page load. Currently it works only on click of "Start" button.
How could this be made excited on load of the page?
<script type="text/javascript">
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName];
}
function start() {
var active = document.getElementById("buttonstart").value == "stop";
getFlashMovie("test").setProperty("src", !active ? document.getElementById('url2').value: null);
document.getElementById("start").value = active ? "buttonstart" : "buttonstop";
}
</script>
the html
<input id="url2" type="text" value="rtmp://localhost/?streammovie=test"/>
The getFlashMovie("test").setProperty is a function to pass variable to the SWF file.
On page load I want it to get executed rather than on button click.
To have your function execute on page load have such code:
window.onload = function() {
start();
};
what you could do is:
<body onload="start();">
if you consider using jQuery at all then you could wrap your code within:
$(document).ready(function(){
//the code
});
the code would execute when the page has been fully loaded, but i do not advise adding the jquery library just so you can use this feature.
Try this:
<script type="text/javascript">
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName];
}
function start() {
var active = document.getElementById("buttonstart").value == "stop";
getFlashMovie("test").setProperty("src", !active ? document.getElementById('url2').value: null);
document.getElementById("start").value = active ? "buttonstart" : "buttonstop";
}
start(); //added this
</script>
Just make sure the DOM has been loaded before you attempt to access any elements.
Try to run your start() function at the end of the HTML like this;
</body>
<script type="text/javascript">
start();
</script>
</html>
Use:
(function($){
$(function(){
// my code comes here
});
})(jQuery)
Use window.onload event to fire your code on load.
window.onload = function(){
//your code to execute
}
Related
I'm trying to get this to work:
I've got string variable in a file called test.js. Depending on some values the file is created by a php script and it says something like: var test = 'up' or: var test = 'down'.
Now, I would like display a certain image on my website depending on the value of var test. So in my html code I add this to the header:
<script type="text/javascript" src="test.js"></script>
Then in the body I write:
<script type="text/javascript">
function Test(){
if (test == 'up'){
document.getElementById("test").src = '/img/arrows/arrow_up.png';
}
else if (test == 'down'){
document.getElementById("test").src = '/img/arrows/arrow_down.png';
}
else {
document.getElementById("test").src = '/img/arrows/arrow_neutral.png';
}
}
</script>
And I add in the image with:
<img id="test" src="" class="test">
However, nothing is displayed on the page. Can someone help me out?
You have to call Test() somewhere, the code below executes it, when the page is fully loaded, so the other .js file has executed(test has been set) and the <img> is on the page.
var test = 'down';
function Test() {
if (test == 'up') {
document.getElementById("test").src = '/img/arrows/arrow_up.png';
} else if (test == 'down') {
document.getElementById("test").src = '/img/arrows/arrow_down.png';
} else {
document.getElementById("test").src = '/img/arrows/arrow_neutral.png';
}
}
window.onload = function() {
Test()
};
<img id="test" src="" class="test">
First of all, try to put manually a src to see if the src is correct :
<img id="test" src="/img/arrows/arrow_up.png" class="test">
If it works, you should call your Test() function somewhere :
window.onload = function() {
Test();
};
To make simplier, you can use JQuery (not obligatory) :
You should add jquery reference to your html page (depending on your scripts folder, the link can change) :
<script src="~/Scripts/jquery-3.2.1.js"></script>
And you can change your Test() methode on this :
function Test(){
debugger;
if (test == 'up'){
$("#test").attr("src", '/img/arrows/arrow_up.png');
}
else if (test == 'down'){
$("#test").attr("src", '/img/arrows/arrow_down.png');
}
else {
$("#test").attr("src", '/img/arrows/arrow_neutral.png');
}
}
Finally, to check if your test parameter is correct, you can put a debugger in order to debug your code in any browser.
If you open the developper tools of your browser, (by pressing on F12 on the browser) you can debug your code. The code will hit the debugger keyword.
The following piece of code autosaves a page but it also times it out by loging out and taking the user to a time out page. How can i chnage it so that it only does the auto save part but not the time out?
<script language='javascript'>
function Save() {
var hdnSessionTimeOut = document.getElementById('fast22_MainCtn_fast44');
hdnSessionTimeOut.value = 'SessionTimeOut';
__doPostBack('Fast22$MainCtn$btnSave', '');
}
function Redirect() {
window.location = "SessionTimeout.aspx"
}
window.onload = function () {
if ('True' == 'True') setTimeout(Save, 30000);
else setTimeout(Redirect, 30000);
}
</script>
I tried reducing it to the following but and I think it worked but it changed the doc to view mode instead of edit mode. and you have to click edit again. Also when it in edit mode, the counter still works and it gives and error. Is there a way to have it auto save and then go back again to edit mode?
<script language='javascript'>
function Save() {
__doPostBack('ctl00$MainContentPlaceHolder$btnSave', '');
}
window.onload = function () {
if ('True' == 'True') setTimeout(Save, 10000);
else setTimeout(Save, 25000);
}
</script>
This question already has answers here:
Using an HTML button to call a JavaScript function
(8 answers)
Closed 8 years ago.
I am trying to create a button that if I press on it my javascript file gets called.
The java script file has many functions so I wasn't sure how to call the functions.
This is how I call the javascript file in my html document.
<script src="sketch2.js">
</script>
Thank you
<script src="sketch2.js">
</script>
this is how you include a javascript file in html. to call all the functions in it, make a function which would call all those functions and call this function on button click.
Then add an inline script containing a Javascript function to call the functions
<script>
function newfunction(){
fun1();
fun2();
...
}
</script>
Then in the HTML you need
<button onclick="newfunction()">click here</button>
Do it like below:
<a href='linkhref.html' id='mylink'>click me</a>
<script type="text/javascript">
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "Public/Scripts/filename.js.";
document.getElementsByTagName("head")[0].appendChild(script);
return false;
}
</script>
Create a Button and bind your javascript function to the onclick event. Like this:
<button onclick="functionCall()">
Do Something
</button>
But you cant just call the whole script file. Ask yourself this question: how should the browser know, which method to call.
In my litte example, it worked:
<html>
<head>
<script>
function functionCall(){
alert('hi');
}
</script>
</head>
<body>
<button onclick="functionCall()">Do Something</button>
</body>
</html>
HTML like this:
<button id="myButton">Click me</button>
Save this in your Javascript file, include the script at the bottom of the html page:
(function () {
document.getElementById("myButton").onclick(function () {
// do whatever it is you want to do after the button's been clicked
});
}());
It shall work regardless of what JS Library you happen to be using (if any)
This can all be simply handled in require.js, but here is a very simple implementation.
<div id="btn">Click to load</div>
var btn = document.getElementById('btn');
var loaded = false;
btn.addEventListener('click', function(e) {
if(loaded) return;
loaded = true;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'sketch2.js';
var first = document.getElementsByTagName('script')[0];
first.parentNode.insertBefore(script, first);
if(window.addEventListener) {
script.addEventListener('load', function(e) {
// now you can access the functions inside the JS file
});
} else {
script.onreadystatechange = function() {
if(this.readyState === "loaded" || this.readyState === "complete") {
// access the functions in the JS file
script.onreadystatechange = null;
}
};
}
});
$(" the id or class of the button ").click(function(e) {
var url = "(your url)sketch2.js";
$.getScript( url, function() {
//function or something..
});
This is you are looking for:
<div class="whatever" onclick="yourfunction()" >Your Button</div>
I'd like to run this javascript function only for one time (first page load). Is it possible? Thank you
<div id="pag">
<script type="text/javascript">
var framekiller = true;
window.onbeforeunload = function () {
if (framekiller) {
return "Click on stay on this page";
}
};
</script>
<iframe scr="http://www.example.com/page-with-javascript-framebuster.html"></iframe>
</div>
You should use global variables in javascript.
<script type="text/javascript">
window.framekiller = true;
window.onbeforeunload = function () {
if (window.framekiller) {
return "Click on stay on this page";
}
};
</script>
<iframe scr="http://www.example.com/page-with-javascript-framebuster.html"></iframe>
And put somewhere else, another javascript snipper, who turn this variable into false, and do other things.. eg opens a new link?
To turn it back to false, use:
window.framekiller = false;
I wrote a script to hide and show a loader for my asp.net web application. The script works great when placed inline. I tried to extract the script to an external file and received the following error:
Error: The value of the property 'Pausing' is null or undefined, not a Function object
I tried to look up the error, but I was unable to find a solution to the problem. I am new to asp.net so it may be that I'm not sure how to search for the right question.
My inline code that works is:
<script type="text/javascript">
function Pausing() {
window.setTimeout(ShowLoader, 1);
}
function ShowLoader() {
if ((typeof Page_IsValid === 'undefined') ||
(Page_IsValid != null && Page_IsValid)) {
var i = document.getElementById("loader");
var img = document.getElementById("img");
i.style.display = "block";
setTimeout("document.images['img'].src=document.images['img'].src", 10);
Endpausing();
}
}
function HideLoader() {
var i = document.getElementById("loader");
i.style.display = "none";
}
function Endpausing() {
window.setTimeout(HideLoader, 4000);
}
</script>
The event call is attached to an asp:button control below:
<asp:Button ID="btnGetReport" runat="server" OnClick="btnGetReport_Click" OnClientClick="Pausing();" />
I removed the inline script and replaced with this...
<script type="text/javascript" src="../../Scripts/Loader.js"></script>
Added script to external file:
window.onload = initAll;
function initAll() {
function Pausing() {
window.setTimeout(ShowLoader, 1);
}
function ShowLoader() {
if ((typeof Page_IsValid === 'undefined') || // asp page has no validator
(Page_IsValid != null && Page_IsValid)) {
var i = document.getElementById("loader");
var img = document.getElementById("img");
i.style.display = "block";
setTimeout("document.images['img'].src=document.images['img'].src", 10);
Endpausing();
}
}
function HideLoader() {
var i = document.getElementById("loader");
i.style.display = "none";
}
function Endpausing() {
window.setTimeout(HideLoader, 4000);
}
}
Then I receive the previously mentioned error.
Any help would be greatly appreciated!
Always use ResolveUrl to call your script files like this
Lets assume your script is in Script folder of your root path with a file Name as MyScriptFile.js
<script type="text/javascript" src="<%= ResolveUrl ("~/Scripts/MyScriptFile.js") %>"></script>
EDIT : you can use ResolveUrl or ResolveClientUrl based on your needs
ResolveUrl creates the URL relative to the root where as
ResolveClientUrl creates the URL relative to the current page.
Based on your question : How to use an external javascript file in asp.net
<script type="text/javascript" src="http://www.xyz.com/test.js"></script>