In Chrome, do iframes consume resources in the same way as tabs? - javascript

I need to cycle automatically through several webpages using Chrome. There are Chrome extensions which will cycle tabs like this, but I wonder if iframes and setInterval could work too.
I want to keep each page open once I've loaded it, i.e. I would need to make many iframes and show/hide them, rather than reload on each change by setting the src on a single iframe.
Bearing in mind that the end result needs to be run for long periods of time, are there significant advantages or disadvantages to using multiple iframes instead of tabs?

Related

Chrome extension hidden / non-displayed tab

Part of my extension involves accessing a webpage and then programatically performing certain functions for the user. The app would obviously be much cleaner if the user did not have to see all this happening in a browser window.
In some situations this could be achieved by, displaying other content (useful to the user) in a browser window, loading the screen with the programmatic elements in an iframe and manipulating them through an action script that triggers on the page load of the page loaded in the iframe.
However, for my purposes this is obstructed partially by the cross-domain limitations and totally by the fact that site in question does not allow iframes.
(One solution was to reverse this process--i.e. direct the browser to the correct page and throw up the useful content in front of it, thereby hiding the noise while loading the page in the browser. This works but it is horrible for obvious reasons)
Is there any clean way to either:
Open a chrome window but keep it hidden?
or
Load a page (i.e. have a DOM built etc) without doing so in a window/tab?
Have you tried using
chrome.windows.create({url:yourUrl, focused:false, state:"minimized"}, function(hiddenWindow){
//do whatever with hidden window
});
or having an <iframe> in the background.html of your extension?

Preventing re-paint in Google Chrome via CSS/JS/etc

Is it possible to cause Google Chrome to prevent painting... as in, to keep the page exactly the same, no animations or content changes.
The reason I ask is because I have created an extension for people who find it difficult to read webpages when things are animating/flashing/changing/etc.
It currently works by taking a screenshot and layering it over the page (position absolute, with a high value z-index).
But because captureVisibleTab cannot capture the whole page (issue 45209), the screenshot needs to be re-created every time the user scrolls the page.
However the change in iOS 8 Safari to not pause printing while scrolling got me thinking there may be another way around this by trying to emulate the pre iOS 8 behaviour (something I preferred, as Reader View does not always work, or stop animated gifs).
You cannot stop the execution thread, its browser who decides it.
However to prevent CPU Cycles What chrome does is, Pauses the javascript execution thread when window is blurred. But since you are showing captured with higher z-index you window will still be active.
One possible way :
Disable the script for that url when the page is loaded.
You might miss the dynamic content but as you asked "no animations or content changes". Any dom or style manipulations by javscript causes repaint of the page. Disabling it might be one solution. However not pretty sure about how to stop css animations.
I have also seen extensions that can capture full webpage image or pdf. you can capture the full page and show them irrelevant of whatever changing in the background

Block the Loading of Animated Gifs

I am trying to block gif's from loading, specifically animated gifs, but if that is not possible, then all gif's. The point is to reduce bandwidth. I am able to remove elements using .remove() and jQuery, but this still means they load. Is there a way to block the specific requests for the gifs so that they do not even load in the first place?
Edit: I am talking about making a Google Chrome extension
You will run into timing issues. If you use a content script you can remove those dom elements but since your extension activates when the page is fully loaded and ready, by then probably chrome already loaded them.
Small animated gifs dont consume much bandwith unless youre talking about the recent trend of making short videos with gifs. For those large ones you might prevent some frames from loading.

How to keep audio playing while navigating through pages?

I am making a website for my friends band. I would like to know if its possible (apart from using Ajax) to keep audio playing after clicking on a link to another page on the site?
I currently have it set up using Ajax to reload the content, but I am having a few issues with it, and I'd rather not deal with the bother unless I really have to.
If not possible, is there a way to minimise the disruption (pausing then playing again) while navigating? It would be possible for the new page to continue playing the track from where the last page stopped, but I would like to minimise the pause. Or, on this subject, is it possible to keep certain page elements loaded after changing the URL (without using # urls), like facebook does (as in, you click on it, but the banner never disappears during loading)
Thanks for any help :)
Use Ajax to load content and History API’s pushState() to alter URL without page reload.
For consistent behavior across browsers, consider using a wrapper library like History.js.
Sites like Facebook use JavaScript/AJAX for these kind of things. If you don't want to use it, you can use frames (not recommended). Divide the page in two frames: the player and the website itself. This way you can easily turn it off too, just open the site without frames.
Good luck!
Of course you could also pop up the player in another window/tab.
(For now) It won't be possible without frames or javascript.
It might be troublesome to implement it differently than via AJAX, however you can either use IFrames, where the music would be played in the main one and the content is displayed in the child on or you can always make it a Flash webpage.
Build it in Wordpress and use the AnythingSlider plugin to have the pages shift within the main page. This way you can have tabbed navigation and never leave the actual page. No need to write too much code. The AnythingSlider uses html for the slides.
You can also not use wordpress and just use the AnythingSlider code.
http://css-tricks.com/anythingslider-jquery-plugin/
and
http://wordpress.org/extend/plugins/anythingslider-for-wordpress/
and
http://css-tricks.com/examples/AnythingSlider/

Rendering ads in an iFrame then moving them to the main window

I have a set of ads that are written out by document.write because that is the only thing that the adserver will do.
I have seen other sites reload ads on the page if the user sits there for a while (something I may want to do in the future). So I was playing with loading the ads in an iFrame, then moving them out into the main window afterwards. This seemed to work quite well, until it served up a google ad which is itself in an iframe within the iframe. Is it possible to pull them out properly / move google ads around the page at all?
This is what I have currently, and it works for everything but iframed ads within the iframe.
$().ready(function(){
$('#iframe').load(function(){
var middle_ad_contents = $('#iframe').contents().find('#middle_ad').html();
$('#ad_middle').html(middle_ad_contents);
});
});
[edit]
Upon further investigation... it looks like reloading google ads may be against the terms of service, perhaps I shouldn't do this?
[edit 2]
Reloading the whole page is not really an option (and kind of a dick move).
The point was to perhaps rotate the ads, but more to stop them from blocking the pageload because adserver X, which is being served through adserver Y which is being served through adserver Z is slow/not responding. The iframe seemed like the best solution because then I can delay the document.writes which are 2 or three levels deep until the end of the page without them wiping out the whole page as document.write after pageload === document.replaceTheWholeDOM. There is also the perhaps the option of monetizing ajaxy/other iframed (shudder) content with this method.
The best way to go about this is probably using a document.write replacement. There are several to choose from, but here's one: https://github.com/eligrey/async-document-write
This will replace the global document.write function with one that can be used even after the page has loaded.
Not only may it be against the terms of service, but it is also lowering the value of the ads to the advertiser and creating a clunky element in UI.
Think about it from a UI standpoint...you're on the site, concentrating on something, then everything flashes. Your attention goes from what you were concentrating to to figuring out what just happened. Never mind, just a banner flip. Next.....now, where was I?
For the advertiser, what if you notice the ad and are about to click on it and BOOM, it changes. Now what, can you go back? If not, you just lost revenue. Users spend seconds on many pages, so unless you've got an incredibly "sticky" website, how much exposure is the advertiser really going to get? Remember, Google rewards AdWord sites for clickthroughs, not based on volume shown, which can actually hurt your CTR.
If you're determined to make this happen, I think I would consider attacking it by having the ad server post directly as it's intended into the dom, then use a javascript-based timer to asynchronously ping the adserver and again tell it to redraw the desired div. I would avoid iFrames like the plague because they're just not friendly in this age of simple Dom manipulation.
Or, you could just take the MSNBC approach and reload the entire page every X minutes. It's a horrible UI pattern, but it would achieve your goal and likely bend (but not break) TOS.

Categories