Hello I have some JavaScript code to fill some table of page1 and auto click its submit button, then it jump to another page2.
What I want is to execute some other codes after page2 is fully loaded. I know methods like window.onload and jQuery.ready but i don't know how to set this method to page2. For example if i write window.onload then the window reference to the current page.
Can anyone help?
You could achieve it the following way.
example :
Add unique identification classes to each of the page body.
page 1
<body class='page1'></body>
page 2
<body class='page2'></body>
JavaScript
in your javascript file, use the following to run the code.
if($('body').hasClass('page1')){
//run page 1 code
}else{ // You can add a second if just to check if it's page 2
//run page 2 code
}
Then import the file to both pages at the bottom of the body tag. the script will run as needed.
Update
To get the current browser url just use window.location.href to get the url. The url is a unique page identifier so just update the condition to the following.
if(window.location.href == 'page1-url'){
//run page 1 code
}else{ // You can add a second if just to check if it's page 2
//run page 2 code
}
I would prefer using the window.location.pathname since it would just return the page path without the host, but the above will work too.
You can use $( document ).ready() if page 2 is a new document.
If "page 2" is at a scroll point in the same document, you can use an if statement with the scroll point using .scroll(). Add your script in the head of your new document or a link to a new js file.
Related
I would like to open a particular webpage and then click on a button to open another page from that page. Now I can see how to write Javascript to find a button on page and click on it, what I dont quite understand how I can do that from the 1st page.
i.e on Page 1 can open Page 2, but how do I in one go from page 1 get it to click on a button on page 2 once page 2 is loaded because until Page 2 is loaded the button is not available, and if I just go to Page 2 my Javascript will not be running because that was on Page 1 ?
What I am trying to do is a poweruser feature that makes it easier to do a particular repetitive task, I am the sys adminstator for page 1 but not page 2.
This is example of the page Im trying to do this for
https://acoustid.org/track/61c9656b-6838-4660-8113-86f7f90fd549
You need to login to Acoustid to actually see the Disable buttons
Open new browser window with js (modal or tab)
var newWindow = window.open("http://www.....com");
Add onload handler for new window and insert script (optionally)
newWindow.addEventListener("DOMContentLoaded", Func);
function Func()
{
var script = newWindow.document.createElement("script");
script.text = "alert('hello');";
newWindow.document.body.appendChild(script);
}
Insert js code straightforwardly if you don't need to handle load
Func();
I am trying to use this
<script>
$(document).ready( function() {
var data = 'testing'
$("#about").on("click", function() {
$("#main-content").load("/about.html");
});
});
</script>
When I click the "About" button, it loads the HTML page "about.html" into the div called "main-content". But I have 2 issues
When it loads, it loads the "about.html" page into the whole page rather than just inside the "main-content" div
When I load the "about.html" I want to be able to access the JavaScript variable "var data" from the main page
Are these both possible?
Unless about.html is HTML and inline CSS only,
ifrmae is for this purpose.
<iframe src="about.html" />
First issue: the about.html page should actually be loaded only inside the main-content div. Maybe the css makes the about page fill everything. Maybe there's another javascript in the code causing this issue. The browser inspector should help debugging it.
Second issue: One possible way is to write the variable content into the html then fetching it later. The jQuery data does that creating/reading data attributes on html tags:
// javascript in current page
var foo = 'testing';
$("#main-content").data('myvar', foo);
// javascript in about.html
var bar = $("#main-content").data('myvar'); // equals 'testing'
I'd like to be able to call a jquery function once window.location has completed loading a URL. Is this possible? I can't seem to find anything online about this.
for instance:
if(parseInt(msg.status)==1) {
window.location=msg.txt;
alert("This URL has finished loading")
}
Thanks,
-Paul
You can either use window.onload of the destination page (if you have access to modify the code of that page), or you can use window.onunload to have the alert be launched when unloading the current page. You cannot execute code on the current page after the new page has been loaded.
Yes.
This page demonstrates onload/onunload behavior.
<html>
<head>
<script>
window.doUnload = function(){
alert("Here!");
}
window.doLoad = function(){
window.location="http://www.google.com";
}
</script>
</head>
<body onload="doLoad();" onunload="doUnload();"></body>
</html>
After a user logs in for the first time I need to load my index page to initialize everything but then need to forward them to another page for profile completion.
use window.location to redirect the user to your index, adding a query parameter (something like window.location=index.php?firstLogin=true ) and on your index redirect (using javascipt http 300, header() or whatever you are using) to the profile page after it ends loading if the parameter is set
Iframe
One (ugly) method you could use is to instead of using window.location, clearing the body, adding an iframe with the relevant path and listening to its onload function.
After that you can run code inside the iframe as long as it's not cross-site scripting.
I use this method to perform small automated scripts, that can't really on third-party plugins.
Ajax
Another method might be using ajax to load the page/body content. Then replacing your body with the newly loaded body and start executing the next functions.
I have a pageLoad js function in master page,
and another one inside content page.
Does the first one (in master page) prevent the second one (in content page) from firing ?
It's the other way round. The one on the Content Page will be fired first. To know if one is messing with the other, simply debug it on Firebug or even on Visual Studio.
You can use the jQuery syntax to chain functions to run on page load in both Master and Child pages like this:
$().ready(function() {
// Do stuff
}
Contents will be execute in the order that the appear on the page, from top to bottom.
You could force items to be run in a specific order with a construct like this in your MasterPage:
<script>
$().ready(function() {
// Do MasterPage stuff
if (onChildPageLoad) onChildPageLoad();
});
</script>
and in the child page place a script block like this:
<script>
var onChildPageLoad = function() {
// Do childpage stuff
}
</script>
I want to link my page with another page on condition.
Suppose I have 3 HTML pages, namely 1.html, 2.html and 3.html. What I want is that if 1.html is loaded then load page 2.html; If 1.html is not loaded then load 3.html.
please help.
I can't follow your explanation about pages 1, 2 and 3, but in a general sense you can have a hyperlink go to different URLs depending on some condition(s) by handling its "onclick" event to cancel the default navigation and do it from JavaScript instead:
My link
<script>
function doClick() {
if (someCondition || someOtherCondition)
window.location.href = "firstURLhere";
else
window.location.href = "alternativeURLhere";
}
</script>
The URL specified in the anchor's href attribute will be used if JavaScript is disabled. Otherwise, the doClick() function is called to decide which URL to navigate to. Of course the function can be as simple or complicated as you need.
The onclick needs to return false; to cancel the default behaviour of a click on the anchor because (obviously) the default is to navigate to the URL in the href attribute.
I am not fully sure what you want to achieve.
I think you want to show hyperlink on a page only if some other pages are opened earlier.
If this is the case, you can create cookies on window.load of page 1, and check if that cookie is set on windolow.onload event of page 2.
If cookie is set, create a dynamic hyperlink on page 2 to redirect to page 3. If cookie is not set, do not create a link.
You may also show / hide hyperlink (instead of dynamically creating) depeding on whether cookie is set or not. This is an easy and crossbrowser way if you are not using jQuery.
Refer: http://www.w3schools.com/js/js_cookies.asp
It should be something along the lines of:
If you add the script at the bottom of the page, the javascript will search for all the <a> tags and compare them to the current url. If theres a match it will set its style to invisible.
<script>
linkNodes = document.getElementsByTagName("a");
for(i = 0; i < linkNodes.length; i++){
if(linkNodes[i].getAttribute("href") == document.url){
linkNodes[i].style.visibility= "hidden";
}
}
</script>
This way if you are in 1.html, 2.html and 3.html are displayed but not 1.html itself. the same happens for 2.html which would show only 1.html and 3.html... etc.