I have a button on one html page, but when clicked I want it to activate a different button on a different html page. Is this possible?
-
Only in the some domain and when one of the pages is opened from the other.Mouser– Mouser2017-09-21 18:22:25 +00:00Commented Sep 21, 2017 at 18:22
-
Can a click event fire a click event in a separate browser tab? No. This is by design to prevent malicious behavior (hacking).smilebomb– smilebomb2017-09-21 18:22:42 +00:00Commented Sep 21, 2017 at 18:22
-
Can you put own JavaScript on the second page?iquellis– iquellis2017-09-21 18:31:17 +00:00Commented Sep 21, 2017 at 18:31
Add a comment
|
2 Answers
This is only possible if the first page actually generates the second page (via window.open()). Otherwise, you won't have any way to access the document in the other window.
Here's an example:
var newWin = window.open("other page in my domain");
var otherButton = newWin.document.querySelector("selector to find button");
otherButton.click();
2 Comments
Ebower
This is the case. The first button links to the second page, and I want clicking the first button to also click a button on the second page.
Scott Marcus
@Ebower No, linking to another page is not what I'm saying and will not work. The first page must programmatically cause the second window to be created with the second page inside of it.
This solution will work though, but it requires passing a value from one page to another. It cannot link pages together. If you want that look into websockets.
Page 1
HTML
<button id="activate">Activate other page</button>
JavaScript
document.querySelector("#activate").addEventListener("click", function(){
location.href = "page2.html?button=activate"; //mind the querystring here.
});
Page 2
HTML
<button id="toactivate" disabled>disabled button</button>
JavaScript
var activateButton = location.search.slice(1); //querystring | get rid of the ?
activateButton.split(/&/);
activateButton.forEach(function(value){
var splitted = value.split("=");
if (splitted[0] == "button" && splitted[1] == "activate")
{
document.querySelector("#toactivate").removeAttribute("disabled");
}
});