I could probably go benchmark this myself but I'm not 100% sure how to go about it so I'm asking here to see if anyone knows the answer to the problem already.
I have some webpage, it has a load of content on it and say, an ad in its own iframe. The ad has some html which then includes some more resources. The html for the ad and all resources it requires are served from a separate domain to the parent page.
What parts of the iframe will delay the onload event of the parent page firing? Also, if different, what parts of the iframe need to load for tracking like Google Analytics to decide the parent page has finished loading?
The onload event isn't guarenteed to fire after all of the DOM has been loaded.
Quite often you'll find the onload event firing way before the DOM has fully loaded, as many a Javascript developer can tell you.
I'd summise from this that your iframe will have little, if any, effect on the onload event firing.
Related
Before I start describing my problem I just want to give a heads-up that all the pages, iFrames etc. are hosted locally on my PC. And that I have used page.setBypassCSP(true) to temporarily disable any origin based restrictions.
Here we go, I have a webpage which embeds an iFrame and that iFrame may embed another one (and the list can go on...). Some of the deeper iFrames may be appended to the body of it's parent via Javascript e.g. document.body.appendChild inside a setTimeout(..., 3000) which kind of simulates a dynamic iframe load. I want to know what is the best way to evaluate a script source on all of these iFrames. I tried using page.on('framenavigated', ...) but this only works for the page's immediate child frame(s).
I tried recursively iterating through all the frames in the page using page.frames() but that only works for iFrames that are available at the time when the DOMContentLoaded event is fired.
I'm looking for a way to listen to all the framenavigated events fired by all the nested iFrames even for the ones that loaded dynamically at any point of time, after the page is loaded. Any pointers would be greatly appreciated.
UPDATE:
I have tried listening to events using page.on('frameattached', ...) and page.on('framedetached', ...) but that also doesn't let me list all iFrames.
I'm setting up a radio/stream player on a website. The player could be an iframe with/or an object (type="application/x-shockwave-flash") or an <audio> element, inside the document in a sidebar, repeated all along the website. When the stream is playing and you browse thru any link to another site of the website the stream is obviously interrupted because of the loading of the site.
I want the player to keep playing even if I browse to another part of the site thru a link (ex. click on HOME) just like SoundCloud and Hypem do. I know these site are doing it by refreshing the rest of the site with ajax and leaving the player untouched.
My question is, is there another way to make this iframe/object/audio element to keep playing?
Once you have switched to the next page, everything on the original page is destroyed and stops running. There is no direct way around this fact. As you have said, the other sites work by not actually switching pages.
A common way to keep the audio going is to use a popup window for your player. This way, the audio player page is still around. You can even communicate with it from the other pages. (Check out JunoDownload.com for an example.) This is not typically a good method, as many popup blockers simply block all popups. Most popup blockers only block popups initiated outside of a user action though, so if you had a "play" button that launched the popup window, most users would still get it. Another reason this is a bad idea though is because it is a bit of a jarring user experience.
Another way is to simply set your link targets to _blank, opening them in a new tab or window. Just be careful to only do this from links from your player page.
Finally, some sites will continually post playback status to the server. On the next page, if a song was playing on the previous page, a new player will be started at the point in which the last page stopped. This is a bit annoying though, as the music stops for a period of time while that player loads.
I'm working on my website where I have a music player. The annoying part is that when I browse to another page the player stops and starts from begining...
What I want is to have a persistent music player. So how can I make the div that contains the music player to be static when browsing to another page?
The website: demo(dot)zdringhi-art(dot)com
Thanks!
WEB is stateless.
So if you move to another page there is no way for a div to remain the same.
Although what you can do is that... Hmm as follows.
Have a single page and have your div in there.
Then the other part of the page is loaded via ajax.
also when a link is clicked only parts of pages will be loaded.
Seems too much of coding , but is the only feasible option.
For eg take facebook
Gurav shah is correct, the web is stateless so if you are changing pages you only have a few options for this.
Frames, yes before anyone shouts this is what they were designed for. You could have the music player in one HTML frame and the rest of the page in another so when you move around you are only updating the main content frame.
Or do as gurav suggests and make your whole site one page and update the content with Ajax, so the music Div does not change.
Pass the current position of the player to the next page when you click a link.
to another page
Where getseconds() returns the current position of the music player and passes it to the next page then when that page is loaded you read in the variable from the URL and start the player from there.
Using frames is one solution but since you are using JQuery on your site you should check out .load (http://api.jquery.com/load/). It allows you to load the content of another page and put it somewhere in the current page. Something like this:
$(function () {
$("a").click(function (e) {
e.preventDefault(); // don't follow the link
$("#ja-container").load($(this).attr("href") + " #ja-container");
/* Load the new page using ajax request, take the content in #ja-container from that new page and put it in the current page's #ja-container */
});
});
This is not a complete solution: when someone clicks Concerts -> Agenda you should keep Agenda visible.
Personally, instead of forced background music I'd rather like to see a page with Youtube videos of the people playing the music.
Well, yes HTTP is stateless. what you can do is create a cookie, and update it with current location/time value of the player, constantly. This way, when you go to any other page you can read time/location from cookie.
otherwise, in a cookie less approach, sending AJAXed location/time data back-forth server-client will be too much network.
If I was doing this, I would have gone cookie way.
I have a music player swf embedded on an html page. Is there any way to have the music continuously play, even when the different html pages are loaded? When a link is clicked, the page is refreshed, also restarting the swf(music).
If the site was AJAX driven, this wouldn't be a problem, but all my pages are static. I suppose I could put the entire body in an iframe, but there has to be a better option. I am certainly open to the idea of using ajax here, but I do not have much ajax experience. Any ideas?
Ajax is really not that hard to learn, use it.
If you reload another page or the same page with a normal link, you will lose your current status in your embedded player. So you either have to use a non-standard link-mechanism, separate your player from the page or save your current status on change of the page. Your options basically are:
Use Ajax and never actually load a new page, but only new content (<- best solution, imho)
Use the standard link mechanism, but do it in an iframe, the player runs in a parent page (I agree with you, that wouldn't be nice)
Load the player in a new Window, put it in the background or something. This might be better than the iframe-solution, but you might get some difficulties with popup-blockers. Remember to close your popup when the user leaves your page.
Save the status of the player in a cookie whenever a link is clicked. On pageload check for the cookie and continue playing at the saved position. This will result in small breaks during playback and you need to be able to interact with the music player.
My question is not like this one: Browser-independent way to detect when image has been loaded
I have advertisements on my site for which I get paid per impression, now recently I have seen a dramatic drop in the number of impressions that each ad has been getting however I have been getting more average hits/month. Is it possible for me to detect if an image has been loaded or if something like a 404 (common with cheap ad blockers) has been loaded instead?
How are you counting now? Judging by your question I suspect you're parsing the server log or the images are served via a dynamic url. If this is the case then the drop could be caused by client or proxy caching. Users are viewing the ads but the request never hits your server.
The obvious solution would be to disable caching but this is extremely rude to your visitors. The common approach now is to use a 1px GIF as a beacon to count an ad. JS would work too but you lose hits when JS is disabled.
<div id="ad">
<img src="/real.gif?ad_id=3435">
<img src="/beacon.php?ad_id=3435&random=6354377">
</div>
BTW: If the counting is done by the ad provider then there's always the possibility they are lying. Marketting people aren't generally the most honest or principled of folk.
Often ad blockers is not a reason of "dramatic drop"...
You can add javascript that will "ping" your ad images server or you can check your images to be loaded... Both are very easy to implement, but if it fail it will distrub legal users. For example I hate when pages hang on close, because someone gather staistics and send request to the server in onunload event...
There's a "complete" property added to image tag on IE when the image is loaded.
You can also listen the "load" and "error" events on images.
One way would be to log the image loading using Ajax, using the onload event of the image. If you log page loads the same way, you can compare page loads to page loads that successfully loaded the image.
<img src="..." onload="logMe(this)" />
function logMe(img) {
now = new Date()
src = this.src
....your Ajax code that writes to the server log.
}
1.) There's an onload event for images... you can see when/if this is fired.
2.) You can use the DOM/JS to see if properties on the image exist and match what you're expecting.
3.) Be aware that if the image doesn't have a unique path, or is served up to be cached, that the browser won't re-fetch the image (so repeat visits won't reload images)
For the record, if you are getting paid per/impression you are quite lucky. Most systems only care about the hits. Thus if an image is loaded, it means nothing... but if a user clicks it, then there is compensation.