I am trying to code an auto clicker that can open a new tab on the click of an HTML button and start clicking. When clicked, JS should open a new tab and begin clicking. However, it does not seem to work. I have figured out that the JS will not run on a new tab, but I can't figure out how to fix it. Code sample below:
function updateButton() {
window.open("https://clickthatbutton.com", '_blank');
document.getElementById("submit").click();
}
Documentation says window.open returns object representing created window. So you can store it in variable and access its document:
function updateButton() {
const w = window.open("https://clickthatbutton.com", '_blank');
w.document.getElementById("submit").click();
}
Related
window.open("http://google.com", '_blank');
var childWindow = "http://google.com";
childWindow.location.href = "http://google.com";
I have an eventAddListener that loads http://google.com on a new tab with a button press, but right after it opens the new tab of google.com, I want it to REFRESH again. NOT my base page but the NEW tab page, by itself. The code I showed is just one of the examples out of 5 pages worth of google search which don't work.
UPDATE:
var win = window.open('google.com', 'New Window'); setTimeout(function () { var win = window.open('google.com', 'New Window'); },3000);
This is the best i could come up with. It opens new tab and "Reloads" the new tab rather than refresh it.
What I want is for example, you click on new tab, you paste a link then press enter, which EXECUTES the link. I basically want a javascript function which EXECUTES the link.
You can't do this.
In order to trigger a reload in the new tab/window you need to run JS in that tab/window.
The same origin policy prevents this.
If you had control over the new page then you could have an event listener running in it and post a message asking that listener to trigger a refresh.
Obviously you can't do that with Google's page.
This question, however, reads like an XY problem. If the goal is to display fresh (and not old, cached, out of date) information and the target page is not a third party one then you shouldn't be using JS to hack your way around caching. Instead set better caching rules on the target page in the first place.
I worked on something similar in the past few weeks and the code below worked for me.
index.html
<button onclick="openTab()">New Tab</button>
<script>
function openTab(){
//this opens a new tab while creating a variable name for that tab
var newTab = window.open("https://google.com","_blank");
//this refreshes that new tab
newTab.location.reload();
}
</script>
Just to prove that this works on the new tab I used the code
<script>
function openTab(){
//this opens a new tab while creating a variable name for that tab
var newTab = window.open("https://google.com","_blank");
//this will alert in the new tab
newTab.alert("New Tab");
//before the following reload code takes effect
//this refreshes that new tab
newTab.location.reload();
}
</script>
Hopefully that's what you are looking for.
From my understanding you want the new tab to refresh once opened with JavaScript instead of the current tab where you run the JavaScript code from.
That's not directly possible. The JavaScript code will only run for the tab it was executed in. The newly opened tab does not know that JavaScript code should be running. The current tab cannot pass over instructions for the new tab to execute.
However, you can select the newly opened tab manually first and then execute Javascript code to refresh the page. But that probably defeats the purpose of what you're trying to do.
I am having some difficulty getting puppeteer to switch its focus to the newly opened window.
The following is what my program is trying to do:
I am trying to use puppeteer to interact with Google Tag Manager preview window but I can't get it to interact with the newly opened window after clicking the submit button.
My puppeteer code is doing the following (please see screenshots below for more details):
go to https://tagassistant.google.com/#!#source=TAG_MANAGER&id=GTM-XXXXX>m_auth=kALKj04OP-SpPs2dMA70Tw>m_preview=env-562&cb=428326580326923
fill in the hostname to preview e.g. https://www.theage.com.au
click Start button
click on a menu item on the newly opened window (https://www.theage.com.au)
Puppeteer successfully perform up to step 3, however it failed at step 4 because (my first theory of the cause) its focus is still on the current window (if you do it manually on the browser, after clicking the start button, another window of the test site e.g. www.loreal.com.au will be opened).
My second theory of the cause: I also suspect it does not successfully click on the Start button because when I tried to take screenshot of puppeteer action, I can see the start button is grayed out even though the test hostname has been filled so I had to overcome that by telling it to manipulate the DOM attribute of the button to remove the "disabled" to make the button clickable. However, I'm not exactly sure if it successfully clicks through or not.
Could someone show me how to switch puppeteer focus to the newly opened window?
Thank you.
enter image description here
You haven't shown any code, so it's hard to pinpoint where the problem is. But in general, you might want to wait for popup event:
const waitForWindow = new Promise(resolve => page.on('popup', resolve));
await page.click('.my-link');
const newPage = await waitForWindow;
// now I can interact with the new page
const linksInnerTexts = await newPage.$$eval('a', links => links.map(l => l.innerText));
This is a working example if your link has target="_blank" attribute, which opens a new page in a new tab. It also works if your link looks somthing like target="popup" onclick="window.open('../html-link.htm','name','width=600,height=400'), which opens a page in a new window.
Thanks guys,
I have managed to get it working using the targetcreated event.
browser.on('targetcreated', async (target) => { //This block intercepts all new events
if (target.type() === 'page') { // if it tab/page
//const page = await target.page(); // declare it
const page = await target.page(); // declare it
const url = page.url(); // example, look at her url
console.log('***** ' + url);
//.....
}
});
I have html page SomePage with onload event:
<body onload="someEvent()">
I attached to the SomePage js file with someEvent function:
function someEvent()
{
someFunction();
}
When I open SomePage, the someEvent function is launching in first tab. But it not launch when I open SomePage in new tab. How relaunch js function in every new opened tab or window of the same page?
Update:
When I run somePage in Visual Studio witn JavaScript debugging mode and put breakpoint in someEvent function, Debugger breaking it only in first opened tab, when I open second tab, Debugger do not break the point. Therefore, I decided, that my function not refreshed in second tab. After your answers I realized that it's not JavaScript problem and my previous example work correct only without breaking point in new opened tab. Thank you for your help.
It should work in every tab as long as long as you are loading the same page.
You can test by making an alert call in the onLoad callback function.
<body onload="someEvent()">
<script>
function someEvent()
{
alert('hi');
}
</script>
We may need more info on this. If you are just going to SomePage on a separate tab then anything that happened in the first tab should happen in the second. If that isn't what you are doing then the next tab is being opened by the first and that is where we need more info.
If I need to do something on load I usually set the following up in my javascript file and link it to my html page through a <script src="/path/to/file">
window.addEventListener("load", () => {
runFunctionAfterLoaf();
});
Try using
window.onload = function() {
someFunction();
};
I want to have a link which when clicked preforms two actions:
redirects the current tab of the browser to url A.
opens a new tab directing the browser to url B
How can I do this? Is there HTML for this? Should I use javascript?
You would need to use javascript to achieve this, something along the lines of this:
$('#foo').click(function(e) {
e.preventDefault(); // stop the normal link behaviour so you can open a new window
window.open('http://foo.com/new-page'); // open new tab
window.location.assign($(this).prop('href')); // go to new page in current tab
});
Without jQuery
link // add onclick event
<script>
function f(){
document.location='/a.html'; // open in same tab
window.open('/b.html','_blank'); // open new tab
}
</script>
I'm using PhantomJS to retrieve the source code of a website after some AJAX manipulations of the DOM. Then using jQuery, I'm simulating a click on a button element (which has it's link hidden in an obscure JavaScript script). This button's onClick effect is to open a new window.
What I'd like to do is retrieve the source code of this new window.
What I cannot do is use the window.open("url") method in JS because I cannot retrieve the url of the new window since it's obfuscated in a script.
Some workaround I've been looking at but haven't succeeded to implement:
Return the new window in any way with the click() function.
Switch the focus to the new window in JS.
Retrieve the url of the button's onClick whitout having to parse the JS script.
Here's what I've got at the moment:
var page = require("webpage").create();
page.open("http://www.example.com", function() {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
var page = page.evaluate(function() {
$("#myButton").click(function() {
// ???
});
});
phantom.exit();
});
});
I'm open to other frameworks/technologies if there is a solution!