Opening a webpage and automatically calling an OnClick function - javascript

We have a small group of guys who play the game below. We take these games and stream them on Twitch so we can watch them as a group live. We have gotten down the process of automatically opening the URL and streaming the games. However, to get the plays to show there is an OnClick function that we have to manually remote in each time and click. Is there a way we can open this webpage and simulate the click so they are turned on? If you click the link below, you'll see a yellow button called Plays. If you click it you'll see what we want to be able to turn on without manually having to do it.
http://glb2.warriorgeneral.com/game/replay/171542

This depends a lot on how you're automating the page opening.
Normally, you can simply call .click() on an element in JS. But since you want to click something on a page you don't control, it gets complicated.
If you're simply opening a new tab/window via Javascript, you won't be normally able to do this because of cross-domain JS protections. You can disable them which is not recommended--if you go this path, you'll want to load the page in an iframe and execute a callback on it: see this answer. The callback you'll want will look something like:
function(){ window.frames[0].document.getElementById('toggle_plays').click(); }
Knowing how you're doing the automation would help significantly on how to solve the problem within your limits.

Related

Javascript Profiling with Chrome Devtools

I am trying to profile some javascript code on this url by setting an event listener breakpoint on mouse click.
When you click on any flight on the results page, it opens a new tab with another link and the logic to build that link must be using javascript, since there is no network traffic going on when the click is done.
The problem is when doing a profiling it shows some js functions called but none of them related to the new tab opened. Maybe it is related to some other event? Any other ways to profile this use case?
Basically the goal would be to understand how that new tab link is generated and get it without the need to actually click it, using data that must be already present somewhere on the code beforehand.
Any insights would be appreciated!

How can I delay a new tab from loading with a userscript?

I use a userscript to modify the client-side code of a website. This code is adding an anchor tag to the page. Its target is _blank. The thing is that if I click this link too frequently, the site errors. A simple refresh on the new tab fixes the problem.
When I click on the link and it instantly opens a new tab. But I don't want that new tab to render until I visit it, or with some sort of time delay. Is there a way of achieving this?
I am using Firefox, so Firefox-only solutions are fine. I found this, but I don't see a way of using it to prevent the tab from rendering in the first place. When I Google for this, I see results about add-ons that can solve the problem. But, the links to them always 404. Ideally, the solution would only affect the tabs created by this script instead of the way all tabs work, but if the only way to do it is to affect the way all tabs work, I'd accept that as a solution.
The Tampermonkey documentation says there is a GM_openInTab function. It has a parameter called loadInBackground, but it only decides if the new tab is focused when you click the link.
If there is a way of making this new tab render some HTML of my choosing, I think that would be a neat solution. i.e., I'd write some HTML that, on focus, goes to the actual website's page. If this is an option, I'd need to know how to open a tab to HTML of my choosing in grease monkey.
(Just realization of idea you told in your question yourself)
You can place simple page that waits for focus and then redirects to what you pass in URL parameter somewhere and open in background tabs. Like:
load-url-from-search-on-focus.html?http://example.com:
<!doctype html>
<body
onload="document.title=u=location.search.slice(1)"
onfocus="u?document.location.replace(u):document.write('?search missing')">
Try it.
(data:uri could have been used instead of hosted page, if there weren't those pesky security precautions blocking rendering of top-level datauri navigations :|)

Triggering multiple individual JavaScript functions via URL without a page refresh

I'm building a simple webapp using NFC(near field communication), which involved certain tags being programmed with the URL of my website + a hash that will trigger a specific JavaScript function.
For example, "www.website.com/index.html#hide/one" will hide the element labeled "one" on the webpage. Simple enough, right? I thought it would be.
I've since learned that when you tap an NFC tag, it opens the URL in a new webpage/tab. I think this could be averted if my webpage checked to see if there are any other open pages and closes them, though.
If there's a better way to do this(trigger JavaScript functions on a webpage via a URL to that webpage), please let me know. It's important to note that there are 8 tags(elements) in total, and they all have to be triggered for the game/app to end, which requires it all to be done on the same page, preferably without refreshes(although I could probably rig something up using localstorage so it could be refreshed).
Thanks in advance, I'm just not sure how I would proceed here.
-Mitchyl
EDIT - I should mention that I already am using backbone.js for my routing needs. It's perfect for my situation at the moment,
What you need is a hash tag routing libary. http://projects.jga.me/routie/
This will run when your app page loads and read the hash, diverting the logic of your code to do something based on the hash tag, thus you make your items remove on the page in your code logic. No need for lots of pages.
But!
If the url launcher on the device launches new windows each time an item is detected, that is a problem since you can't close those windows, other than from the window itself.
Solution
The app has a main window for the game, each item is stored in local storage, You can use the local storage event system to detect if another page changes an item, and update the UI in real-time.
addEvent(window, 'storage', function (event) {
if (event.key == 'item1') {
item1.innerHTML = event.newValue;
}
});
When NFC launches a new window, display user feedback that states they have completed a task of the game then close it using a timeout.
Below that window will be the main page window with the update displayed.
Done properly it will work brilliantly. You can also add a nice x close button on the pop windows as tasks are completed.

How to trigger a click event of a button with javascript on an arbitrary site

I need to navigate through a particular website, frequently, to get at some sub-page that is several layers beyond the front page and it is taking too much time to click and scroll and click and scroll to get at the desired final screen where I enter the search string. So, I would like to automate the process by making Javascript trigger the right button events to get me to the distant page where I can enter the search string manually.
So, I know how the code needed to trigger the event,
document.getElementById('x').click();
but how can I implement this inside my browser, since this is not my own website?
If this is going thru different pages, then probably a Web UI automation tool would be the best (like Selenium - http://www.seleniumhq.org).
as #elcarns says, if you need to inject code into another's website, you could do so opening the console (view --> developers --> javascript console in Chrome).
Another, more complex way to do it when you have to traverse several pages is by developing a plugin.
javascript:document.getElementById('x').click(); in the url bar. You can probably make a bookmarklet for it as well.

Using AJAX for page items while still allowing them to be opened in a new tab/window

I'm looking at using AJAX to allow some content within part of a page to be reloaded without reloading the entire web page (eg things like overview, reviews, specifications, etc pages about a single item).
The problem is however I still want to allow users to open these items in a new tab or window (using the normal systems for their web browser such as right clicking the link and picking "Open Link in New Tab) rather than just left clicking the link).
Is it at all possible to do this, or is it just generally best practice to reload the entire page in cases like this?
It's very much doable. You simply need to provide an href and an onclick in your links.
The href will activate if the user has no JS, or if the user decides to open the link in a special way (new tab, etc.)
The onclick will activate on "normal" clicks of the link. You can then cancel the default action (by returning false or using your JS lib of choice's way to do it) and do your ajax stuff.
It is possible, in fact its even possible to set up a timer to update portions of pages periodically. If you are using jquery it'd be something like this:
setInterval(function() {
$('#your-div').load('your-server-side-request.php');
}, 3000);
of course you could simply bind to a link, and on refresh use .load().
OR you could even just do this with normal javascript and use my script above as pseudocode essentially.

Categories