I wonder how sites like SoundCloud work: you play a song and it keeps playing even if you move to another page without stopping
Any suggestions?
The only way I can think of is to build your app, or at least the parts of it that need to bo continuous, as a single page.
In practice, this means that only one HTML document is loaded. When, say, a link is pressed, the browser action is intercepted and prevented and the browser behaviour is faked by javascript.
Consider a website consisting of pages A and B. Normally, when a link pointing to B is activated, the URL is changed and the browser calls the server, requesting B. In a single-page application, however, this is interrupted by a javascript function, which changes the URL using the History API, and then displays B in a way that doesn't require a new document being synchronously fetched from the server.
There's a couple of ways to do it.
Navigate to a new page
If you do that, a whole new JS execution context is created for the new page, so you can't keep the function running. What you can do however is to "resume" execution in the new page. For this you need to save the state of the old page either on the server or in some client storage that persists between page changes (cookies, localStorage, etc).
Fake navigation
This is the most user friendly way - you turn your website into a web application. You no longer have multiple pages, so when user wants to change what he sees in the browser (like go to a new song), the app simply changes the appropriate area with the desired content. This is a complex topic that should probably be researched in itself, not explained in a SO answer. Go ahead and google "single page application" and you should find plenty of resources for it.
Technically you never change the page when you are using souncloud. You always stay on the same page and only the parts get changed which are actually changing, so you never reload the whole page. That's why they can keep the music playing: They just never remove or change the actual player. If you are wondering why the URL in your browser is changing if you never leave the page: They manipulate your history entries.
If you are interested in creating an application that behaves similar you should checkout frameworks like Ember.js or Angular.js. TodoMVC Gives a nice overview of those frameworks.
Related
I would like to know if it possible to run a JavaScript script continuously in the background of a CefSharp application, having it start upon the application first opening and run until it is closed.
Specifically, I am utilising a JavaScript-based eye tracking library. Upon the application opening, the user needs to calibrate the eye tracking. Once calibrated, this script needs to run in the background sending tracking information to other pieces of JavaScript.
Currently, all JavaScript is loaded and executed on the main frame. So, when the user navigates to new pages using the browser, execution ends and all the JS is re-loaded and re-executed upon the frame loading again. This makes it so that the user is prompted to re-calibrate the eye tracking on each new page load, whenever I need it to be performed only once.
The JavaScript files that are re-loaded need to be re-loaded, as they interact directly with the DOM and so need to access the information of newly loaded pages.
It'd be preferable for these re-loaded JavaScript files to be able to interact directly with the continuously running background code, but it is also possible to establish communication through a WebSocket.
Currently, I am not sure if this is even possible and if it is I do not know how to go about it.
I attempted to spawn a new separate frame that is never re-loaded and running the background JavaScript there - but I did not get very far. The application I am building on does not currently support multiple tabs (there seems to be no UI available for it, etc), hence why I found it difficult to spawn a new frame that the user can interact with briefly.
Apologies for the lack of code snippets - many thanks in advance.
I am trying to code a javascript that runs throughout different web pages. The script should type something into a search bar, click search, click a result, then save each result text into an array. It looks something like:
function returnresults(queries){
arrayofcontent = [];
for each query {
type query in searchbar;
submit search;
result[0].click(); // go to first result
arrayofcontent.push(pagecontent.innertext);
}
return arrayofcontent;
}
The issue is that the script seems to be stopping after the script clicks search, which makes me think that the script is unloading itself when moving to another page, even though I'm typing the script directly into the javascript console in Google Chrome. Does anyone know how to tell Google Chrome to keep running the script even after moving between pages?
Short answer: No.
When you examine what's happening in a browser tab (including working with the console), you are only able to inspect what's loaded in that tab. If you navigate to another page in that tab, everything that was in memory from the last page is thrown out and the new page content is loaded.
What you need is to store the state of the script and then retrieve that state on the other page. Storing state can be done in many different ways (cookies, localStorage, sessionStorage, server-side databases) and you'll need to decide which is right for your architecture and use case.
if you want to inject your script to different web pages you can do that by developing a chrome extension . A extension enables to inject your script depending on your logic
here is the link to get started
https://developer.chrome.com/extensions/getstarted
Twitch has introduced a functionality that, when you've opened a stream page and navigate to a different part of the site, allows the video to keep playing in the bottom left corner without any interruption. This even works when pressing the back button in the browser and only breaks when closing the tab or manually typing in the URL you want to go to (e.g. https://www.twitch.tv/directory/discover).
I've been trying to figure out how this is being done. The video is embedded into a div with the class "js-player-persistent", so I assume it has something to do with a JavaScript and getting data from the session storage, but I'm unsure how much effort this requires specifically.
Twitch is built on EmberJS on the front end making it a Single Page Application (SPA). This allows them to not have to reload the page as you navigate, they simply utilize AJAX to load in the data needed to show the next page in a prescribed window. This is accomplished by the browser's pushState API or the hashbang implementation for browsers that don't utilize pushState.
Looking at their implementation of it, they likely have a hook that looks for navigation changes, before it happens, off the video player and at that time create a DOM element in that corner and put the video in it, then they proceed with changing the main page to wherever you are going.
This is fairly easily done in most SPA front ends like Angular, React, Ember, Vue, etc. and is a major bonus to them.
Twitch is an Ember app, which means it is a Single Page Application. It does not reload the whole page when you navigates between "pages". Regarding the use of the browser's navigation buttons, JavaScript routers take advantage of the browser history API to simulate a normal navigation.
After my original comment got as much popularity as it did, I figured I'd explain my presumption a bit better.
Twitch is a SPA, or Single Page Application. This means that when you go to a new "page" on the Twitch website you aren't actually going to a new webpage, you are loading a new view. Each of these views are basically sections of content that seem like pages but don't reload the entire page. This is commonly used with cross platform mobile apps.
The pros of Twitch doing this is that they communicate with their back-end constantly and the site handles that well with the streams. (They recently switched from a Flash to HTML5 video player.) This as well as having your current stream constantly playing even though you are exploring different sections of the website is a major plus for them.
The cons of all this is that your browser has to do more rendering meaning it is more intensive for your computer. And it is worth mentioning SEO can be harder with SPAs.
Do any of you know how can I share a component between several html pages but load it only once?
I`m trying to share a unit canvas between several pages, but it takes too long to load, so every time I change the page it loads again, causing a very poor user experience. I tried to create the frame once and put it on session to be reused, but it seem to be not the fix for it.
I need to use the same component amongst all the pages without reloading it every time the user changes the browser address.
Thank you.
we had the same problem with adding the communicator to out online app (something like on FB). The best solution is to do a single page application and manage urls by html5 history API, but is only applicable when you start development. You could also try something with iframe e.g. put canvas in main document and the rest (changing part) in iframe, but you will have a problem with urls, so it isn't solution.
Becouse we had working app when we started work on communicator we ended up with everything store in session like you did.
I'm attempting to set up Pinned Site features for my project. The trouble is that I'd like to have the tasks be javascript actions rather than loading a new page. The reason for this is that the site is designed to only ever work in a single window.
I tried adding the following META tag:
<meta name="msapplication-task" content="name=Test Action;
action-uri=javascript:ui('test',8);icon-uri=/img/icons/test.ico" />
However this causes the task to simply not appear. (Using a normal URL makes it show up just fine)
Is there any way to do this? The best I can think of is a hash and check for the hashchange event, but this doesn't work because it gets opened in a new tab of the window...
I'm afraid this is not supported, because action list is designed for launching an application, not for a navigation inside it.
If you really want implement it, you can open a new window, send a message to server via web sockets and let server to forward that message to application window also via web sockets. But this is very hacky approach and works only in IE10.
This issue can be resolved by using a hash. By setting the action-uri to something readable by JavaScript, the JS can then read it, process the instruction, and then clear the hash in preparation for the next task.
This has the advantage that it works even when the window isn't already open, since the JS will read the hash on the first load too.
The catch is to add window-type=self to the content.