I am parsing some data from some website. The problem is that the data stops refreshing if browser tab for this page is not opened. I guess they use Page Visibility API.
Is there any way how to manually change page visibility status through console? So basically I want the page to act like my browser tab is active and not minimized.
Visibility api probably listens for events. When events trigger the page become visible/invisibile. You can create a synthetic event and thus trick the api. Depending on which events api uses you can try something like this:
e = document.createEvent("HTMLEvents");
e.initEvent("focus", false, true);
window.dispatchEvent(e)
If focus doesn't work, try to simulate events from wiki.
Related
I've been refactoring some javascript.
Previously, I had an HTML element open to Fullscreen when the user clicked on another element.
Now clicking the latter element initiates a server-side verification, instead.
Once the server-side verification check passes, the page reloads with extra data confirming the user is verified.
N.B. When the page reloads, it does so with a non-negligible amount of extra markup, styles, scripts and vectors. The reason I am re-factoring in the first place is to avoid the need to download all these extra assets (and keep them in the background, on standby) unless and until the user authenticates themselves
The first thing I discovered is that I cannot have the page reload and then have the HTML element immediately open to Fullscreen, because - and this seems entirely reasonable from a UX perspective, Firefox reports:
Request for fullscreen was denied because Element.requestFullscreen() was not called from inside a short running user-generated event handler.
Essentially, unless the user pro-actively interacts with the page, the Fullscreen API will not run.
(In this scenario, the user pro-actively interacted with the page before reload, which is not the same thing.)
So, I thought about it and then added:
document.body.addEventListener('mousemove', () => myElement.requestFullscreen(), {once: true});
Nope. The Fullscreen API still doesn't activate.
To check that I wasn't making an elementary error somewhere else, I tried:
document.body.addEventListener('click', () => myElement.requestFullscreen(), {once: true});
Which does work.
So: some user-interactions will successfully fire the Fullscreen API and others won't.
I have searched through the WHAT-WG HTML Spec but I cannot find a list of events which represent explicit and pro-active user-interactions on a webpage.
Does such a list exist?
Which other events apart from click will successfully activate the Fullscreen API?
Which JS events apart from click will successfully activate the Fullscreen API?
A small number of events will successfully activate the Fullscreen API.
Almost all of these events either imply a user-click or directly reference one:
change
click
contextmenu
dblclick
mouseup
pointerup
reset
submit
touchend
Further to the list of click-based events above, the Fullscreen API may also be activated via:
ScreenOrientation.onchange
Source:
https://www.aworkinprogress.dev/request-fullscreen
I am trying to add a listener in the background.js file of a chrome extension.
I want this listener to ideally be filtered only for url's matching, for example, netflix.com/watch/
First, I tried chrome.webNavigation.onCompleted.addListener (link), supplying an appropriate filter for the desired netflix URL. However, I've observed that this listener doesn't fire if the URL is navigated to via the browser's forward or backwards buttons. Also, it doesn't seem like the listener fires if the navigation originates from clicking a link on a webpage from the same domain (ie: clicking on a Netflix video while browsing or searching (taking you from netflix.com/browse to the targeted netflix.com/watch URL)).
I then tried chrome.tabs.onUpdated (link). This event fires with the backward/forward buttons, and also fires when navigating from a page of the same domain, but, it doesn't fire when refreshing the same page (since the tab doesn't change in this case). Preferably I would like to handle the refresh case as well.
I could use both listeners to cover each listener's omissions, but there are cases where both will fire at the same time, which isn't desirable.
Is there an event I can listen for that will cover all the situations I described?
chrome.tabs.onUpdated is actually fired when refreshing a tab so your code is incorrect. I guess it looks for changeInfo.url which is not provided on refresh.
Look at status as well and use url or pendingUrl from the tab parameter:
chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
if (info.url || info.status === 'loading') {
const url = info.url || tab.pendingUrl || tab.url;
console.log(url); // prints in the *background* console
}
});
For webNavigation with SPA (Single-Page Application) sites like netflix/youtube you need to listen to more events: onHistoryStateUpdated, onReferenceFragmentUpdated.
I'm building a web app using Google Apps Script, looking to replicate a multi-page site, and struggling to get the history changes to do what I want.
I have links set up with event listeners that use google.script.history.push() like this:
document.getElementById('navPage1').addEventListener('click', function() {
google.script.history.push({timestamp:new Date().getTime(),page:'page1'}, {page:'page1'})
});
When I click on this link, I see the URL update accordingly with the parameters (i.e. to https://script.google.com/a/XXX/macros/s/XXX/dev?page=page1).
In my HTML file I then want to use google.script.history.setChangeHistory() to detect these changes and load content accordingly. However, the event doesn't seem to be triggering at all. I currently have it set up just to log on history change, and I'm not seeing anything at all:
google.script.history.setChangeHandler(function(e) {
console.log('History Change Triggered');
});
Have I misunderstood how these should be used?
As written in the documentation,
Calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by performing a browser action, such as clicking on the back button (or calling history.back() in JavaScript), when navigating between two history entries for the same document.
Related Answer:
Sample web app
I have an HTML page that includes only a script tag, I don't control the script and I can't change it (so I can't fire my custom event for example).
The script ends with a redirect (using window.location).
Is there a way to add a new script to the page that will listen to the page events and "catch" the redirect (actually it's better for me to catch the new loaded document)?
Something like:
window.addEventListener('redirected', function() {
// do staff
});
(I know there is no "redirected" event, it's just for the example).
It's very important to make it clear that the redirect isn't caused by an anchor click or back/forward button click, so I can't use events like click or popstate.
You might want to look at the onpagehide event or the onunload event, both of which occur when the user navigates away from the page.
However, if you wish to interfere or prevent the redirection itself, onbeforeunload is what you want.
Just take a look at :
unload function w3school or mozilla developper network
beacon function for sending a final XMLHttpRequest
I'd like to track when a certain web-page is (or is not) in the foreground.
I've already experimented with the Page Visibility API, and I can use it to find out if my page is the currently active tab of its window. But I also need to know when my page's window is not in the foreground (despite being the active one of that window).
Is this something I can detect using javascript?
I use focus and blur events for this, you can do it cross-browser on $(window) with JQuery. Your needs don't appear to require the Page Visibility API, since you only care about if the tab (and window) has actual focus.
You can use hasFocus event, when it is in foreground (active or not) send to ajax call to server. Here is more info.