Normally if you click a link the browser displays a little loading icon up in the tab until the page complete loading .
Is there any way to prevent the browser from displaying this little icon in the tab especially when dealing with iframes loading ?
Not directly, but you can design your website as a single page application. Implement your internal links with Javascript handlers which load the content with XMLHttpRequest and replace the current content when the response arrives.
Keep in mind that this makes your content practically invisible to search engines and breaks many browser navigation features your users will be used to.
You could write to the document via JavaScript after it has finished loading by using document.onload
Related
In SPA/AJAX websites, when navigating between pages, only the modified parts of the page are fetched. These parts then replace the old ones in-place, within the same page. Because of this, the browser's built-in loading indicator – which is shown on page loads – is no triggered. Many websites incorporate a custom progress bar (like this one https://ricostacruz.com/nprogress/) to make it clear that a fetch is occurring.
I was wondering if there was any way at all to use the built-in browser's indicator instead (for example, the "tab spinner" in Chrome).
Is this even possible? To have an mp3 play where it left off when you navigate to a different page on the same website? I seriously don't even know where to begin. Kind of new to HTML, CSS, etc.
Any Ideas? Thanks.
Not across multiple page loads. But you can have a single page which plays audio and provides navigation therein for the user. A couple overarching structural options would include:
Create a Single Page Application (SPA). Here your one "page" would play the audio, and the site navigation would happen within this single page instance with JavaScript/AJAX. The browser would only ever load one "page", but the overall application would dynamically load/unload as elements of that page as you see fit.
(A very old method, but still works) Create a parent page with frames for navigation. The parent (frame) page would contain the audio, and the rest of the navigation through the application would be done in frames within that page.
I'd recommend the first approach, but either would work.
If you reload the entire page (and therefore the audio source), there is no way to provide a seamless playback. There will always be a very noticeable gap due to page load times, even if you try to keep track of the position within the audio track. Slow internet connections will make it worse.
Instead, you can embrace one of those four options:
Single Page App:
As also pointed out by David, my suggestion would be to create a single page application, i.e. a page that loads once, then loads/replaces all additional content dynamically. One the user clicks a navigation link, instead of loading a new page (or reloading the current page), you just replace the main content, using AJAX. The part that provides the audio stays in place.
Additional tab/popup/window
You could create an additional tab, popup window or window just for the sake of playing the audio. One example of this is the German radio station "radioeins". At the time of writing, their website provides an orange button in the top right that will open a popup window for their live stream, allowing the user to continue browsing their website with the music continuing to play uninterruptedly from the popup. I would only go down this route if the single page app is not an option, as popups or additional tabs are bad UX and popups might be blocked by browsers.
iframe
You could provide the main content of your page within an iframe, or the other way round, provide the audio from within an iframe. I would recommend against this, as there are several disadvantages to this approach.
Frames
Frames would provide a similar approach to iframes, but they are deprecated, so I strongly recommend against this one as well.
tl;dr
Make it a single page application if you can, otherwise resort to a popup-solution.
I need to create a chrome extension that for every web page te he user opens - he will have a button on top of the page (similar to the google translate extension - just that it will appear with page load, without the need to press a button) - preessing on it will do some activity.
from what i saw - the way to do it is to create a content script that will add an iframe that includes the button on the window.onload. just before i do that - i want to be sure there is no more simple way of doing that.
Thanks.
There is an experimental infobar API, but it's unknown when, if ever, it becomes stable.
As-is, you really need to inject your UI into the page DOM from a content script, with an iframe being a good solution to separate your UI from the page.
If it's just a button for each page then you could use a Browser Action
If you'd like for it to actually be in the page then an iframe is a good way to go.
I'm trying to mimic the effect of a browser loading a page with jQuery. I have an ajax based navigation set up with HTML5 history, but I'm lacking of the feel of the page loading. Facebook seems to have done this. All the calls on the page are done with ajax, yet the browser does a loading effect as if it was loading a regular link.
How would this be done? Have an ajax based navigation system that mimics native browser loading?
Edit:
My question is probably not clear enough, so I'll provide an example:
When browsing a regular page, what happens when you click a regular link the browser (let's use Firefox, because browsers behave differently..):
The tab title changes to "Connecting.."
The favicon changes to a spinner
The lower left popup displays "Loading/reading/waiting [link]" when it loads images, javascript files etc.
So everything above is what I consider native link click behaviour. Is there any way to mimic it (and not by changing the title or favicon temporarily)
Edit2:
This mimicking works somehow on Facebook. Using Firebug and navigating around, you can clearly see that the page doesn't change, yet the browser does the native loading stuff like changing the favicon to spinner, tab title changes to Connecting etc. The URL is rewritten with HTML5 history and the content is retrieved via /ajax/home/generic.php?ajaxpipe=1... How do they do that?....
I'm using Google search in a page, and it shows up in an IFRAME. However, when you click on a link in the search, it's leaving my site and redirecting to that other site. Is there a way to intercept that call with jQuery and make it open that link in a new window, instead?
Due to security reasons, what you can do with an iframe is very limited (In cases where you frame another domain).
The way this is implemented varies a bit from browser to browsers but most browsers won't let you manipulate the data in the iframe.
To my knowledge this isn't possible, assuming you are refering to an implementation of http://www.google.com/cse/