Develop Reference

How can I detect when an iframe page begins loading?

I'd like for the opener of an iframe to be able to detect each time the user changes pages within that iframe. Using jQuery, I can detect each time a page finishes loading within an iframe via the following:
$('#myIframe').on('load', function() {/*do stuff*/});
However, I'd also like to detect (in the iframe opener) each time a page starts loading within that iframe.
Note: The content that is displayed in the iframe is from a third-party site, so I don't have the ability to insert code there so that the iframe can explicitly alert the opener.
Does anyone know of an event that is fired when a page begins loading? I'm not having much luck finding anything via Internet searches, as most people seem to only be interested in detecting when the iframe has finished loading.

It seems unfortunately that the only way to be sure it will work in most browsers is to use the <iframe onload="myonloadscript();"
The window.onload event of the main page will tell you when the iframe has loaded and you can be sure it has begun it's request for it's src page
Edit:
Just copying it from an article (Their are hacks for this)
doing this cross-domain? Not so easy. You’ll get something along the line of: Child document does not have the right to access parent document. In fact there is a lot of documentation on the web about how to achieve it, but the problem is that it is often outdated, with solutions that often only works in a couples of browsers.

On hover of a url display the website in a popup div?

I am trying to do something like:
Google
When a user hovers the link:
<div id="display-site">
//working site contained in a div
</div>
Note I am aware that I can open the link in a new window using html, thought I am interested in figuring out how I would go about 'previewing' the website contained in the <a> tag, in a div container, (if the link is hovered).

This can be done by creating an <iframe> in the DOM on hovering over an <a> and loading the href as the iframe's src= attribute. In order to make it look like a popup, you would need to position the <iframe> at an absolute location, and set its z-index CSS property to a higher value than the rest of the page content.
However, if you need to make modifications to the display of the loaded frame, such as sizing some elements to accommodate the zoom level as suggested by #David's answer, you may run afoul of the same-origin policy, as scripts will not be permitted to access properties of the loaded frame outisde the same domain.
From MDN:
Scripts trying to access a frame's content are subject to the same-origin policy, and cannot access most of the properties in the other window object if it was loaded from a different domain. This also applies to a script inside a frame trying to access its parent window. Cross-domain communication can still be achieved with window.postMessage.

Before continuing - check this benefits the user experience. When I move my mouse over a page and brush over a hyperlink I don't always want a link preview to appear on top. However, assuming this is in the best interests of your users...
Implementation wise, this can be done, as #Michael suggests, by using an <iframe>, however the document within the iframe will be displayed at the user's set zoom level, but showing a 250x250 window of a document designed for at least 1024x768 isn't going to help the user. Thus you need to display a zoomed-out, birds' eye representation of the web-page to the user.
There are ways to get the current viewport zoom level ( How to detect page zoom level in all modern browsers? ) but I don't know how setting it works (in all liklihood it's probably impossible in most cases). Furthermore I don't think you can set zoom on a per-iframe basis (assuming you can set it all).
The best way forward then is to display a scaled-down bitmap page rendering to the user - like Google does for popular pages in its search results. However this means that for every page you link to you need to get a rendered image of the target page.
I remember a few years ago there were companies that provided page thumbnail services (it was part of those annoying doubly-underlined ad text in webpages that was popular around 2005-2008), but they're a rarity now.
I guess you'll have to then set up your own service and host a layout engine (Gecko, WebKit, or Trident) in a way it can generate page thumbnails for you.
All things considered, I don't think it's worth it.

Something like this, just an idea
$('a').hover(function()
{
$('#display-site').load((this).attr('href'));
$('#display-site').show();
});
You will need to set the css property as needed

1- Find a jquery plugin that displays tooltips on element hover.
2- Insert an Iframe of the website that the link refers to inside a div residing in the tooltip container.

Make links inside an iframe open in a new window

I'm trying to display an map inside an iframe that has a needle which on mouseover shows some information about a certain company, the thing is once you click the link the page opens up inside the iframe which ruins the experience, so i was wondering is it possible to make the links inside an iframe open up in a new window instead perhaps using jquery or something similiar?
the code i have atm is
http://www.jsfiddle.net/rkd59/1/
Edit: the very least capture a click within the iframe so i might resize the iframe

You will need some kind of open API to do this properly, and Eniro doesn't provide one according to this page (in Swedish).
I would recommend you to use the Google Maps API v3 instead. I've made an example on jsFiddle that looks similar to that of Eniro.
I'll gladly give you more help with this, so just ask away!

You can't (or it is extremely hard to ) make events inside the iframe affect the parent page. This is to prevent attacks from XSS, or cross site scripting. Having said that, if the site within the iframe is on your own domain and you want to set up some extremely tricky ajaxing and php session IDs, maybe you could make something work, but even then I'm not sure. And I don't know if this would be a security hole, maybe someone else can speak to that. It would perhaps look like:
main page sets up session ID and passes that to the iframe url via a get variable
the iframe takes click information and sends it to a Session variable via an ajaxing call to a script on the server.
The main page then reads (how?) the session cookie and makes changes based on it's value.
All in all, you may find that it may be much simpler and more secure to acheive what you want using a different method.

Due this map is loaded inside an iFrame, it's not possible to run any javascript event listeners on the links, neither is it possible to change the html.

Please try the following:
<script>
x=document.querySelectorAll("a");
for(i=0;i<x.length;i++)
{
x[i].setAttribute("target","_blank");
}
</script>
Thus all links open in new frame.

To make a link popup in a new window you would usually use target="_blank" as such:
Go to Yahoo
However this will only work if you can modify the code you're showing within the iFrame

There is a partial solution.
You can add an absolutely positioned DIV tag over the top of the IFRAME and capture clicks on this instead. See example here shaded in 20% alpha red.
http://www.jsfiddle.net/rkd59/6/
However, this means that the map works in "read-only mode" and while you can capture the click event you wont know what link the user has clicked on.

Get height of iframe with external URL

I have to include an external whitelabel site within an iframe on my page. There are numerous pages on the external site and they vary considerably in height.
I need to adjust the height of my iframe to accommodate this.
I can get the height of the first page loaded into the iframe (using PHP), but no way of getting subsequent page heights because no way of knowing what the url/location changes to in the iframe.
As this is an external url in the iframe the usual security limitations apply, therefore ALL solutions must come from the parent frame. Solution must be workable on FF and IE at least.
The only think I can think of is to test whether the scrollbars are visible on the iframe, but this is seemingly impossible in these circumstances.
If anyone can prove me wrong, or has any other javascript/ajax/php cross-browser solution I'd love to hear it.

It is not possible to do this because of the browser's security model. If it was possible, that would be a security problem and would have to be fixed.
Although letting the embedding site know the height of a third party webpage when embedded in the page seems harmless, this can leak information to the embedding site that the browser's user wants to keep private. For example, http://www.facebook.com/ renders differently depending on whether or not you are logged in, so if my website can work out the height of <iframe src="http://www.facebook.com/"> then I can work out whether or not you are a facebook user, something you probably don't want me to know.
The information leakage would be similar to the infamous CSS History Leak in that it would reveal information about the user's relationship with the third-party site just by "linking" to that site (in this case with an iframe instead of a link). Browser vendors had to plug the CSS History Leak, so I suspect if you could work out the height of a third party site rendered in an iframe in any browser, the vendor would have to fix that too.
The information leaked would be anything that can be inferred from the height of a page when rendered for a user using their cookies (which the browser will send even though rendering in an iframe inside a different domain's page). The specific risks depend entirely on the nature of the embedded site being "attacked". E.g. I could get an idea of how much stackoverflow activity someone visiting my site has by getting the height of https://stackoverflow.com/reputation which is different for different users.

Conceptual: bookmarklet to create a header form and remove it again after submit

So I've been pondering this for some time and trying out various strategies. Basically I'm trying to create a bookmarklet that, when clicked, pops up a header on whatever page you happen to be on. In this header, there is a small form, the contents of which are submitted to a server. Once this is submitted, the header should disappear. In all cases, I've loaded my JS with a simple loader bookmarklet:
javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://localhost/bklts/script.js';})();
The problem is tricker than it sounds - every idea i've come up with fails in some instance - and for now lets forget about IE compatibility, I'll deal with that later.
Idea 1 was to redirect the browser to a page on my server with the form at the top and the original page inside an iframe underneath. This works fairly well, but is very slow: 3 page loads to see the form and the original page, followed by another pageload once the form is submitted to return you to the original page. Furthermore, it breaks on sites that framebust.
Idea 2 was to insert an iframe at the top of the original page, the iframe src'ing the form document on my server. This works wonderfully and only requires 1 pageload (the iframe contents). However, absolutely placed elements on the original page remain in their absolute locations, overlaying my header, while everything else is shifted down. Furthermore, I find it is impossible to get rid of this header after the form is submitted short of also creating a link underneath the iframe which would hide the iframe and itself, which one would click after submitting the form. Long story short, not really production quality.
Idea 3 was not to use frames at all. Insert a div at the top of the page with my form on it, and this form would be submitted to my server. The problem with this of course is that the original page's stylesheets will affect my new div, and I can't for the life of me figure out how to tell the page not to style the header-div (or to style it only with my rules). I'm told this is trivial in jQuery, and while I've started learning/using it, I have not found a way to do this. Also there's also the position:absolute problem as described in idea 2, but I figure that's minor.
Am I being stupid in the way i'm going about this? Should I abandon all hope for making a header and just pop up a new window? I'd really like it to be a header, but a window will suffice if a header is impossible (this is 2009 - pretty much nothing is impossible online these days...)
Anyway, any help fixing the above ideas or a completely new idea is very very welcome.
Thanks a lot for your time,
Mala

How about inserting an <iframe> into the page?
That should be simple and won't inherit the original page's CSS.
You can pass in anything you need for the iframe in the querystring.
I suppose making it self-destruct could be tricky... maybe you could redirect it to a page on the original domain, and poll for that.