Change Title

[kaos]

Hi

I'm looking for a script that will change the title element on my page depending on what the title is in a iframe (on the same page). For example, if the title of the page in the iframe is 'My Awesome Page' than the title of the main (parent) page is 'My Awesome Page'. Anyone know how?

[jscheuer1]

Rather simple, example:


<iframe src="another.htm" onload="document.title=this.contentDocument? this.contentDocument.title : this.contentWindow.document.title;" width="300" height="300" scrolling="auto" frameborder="1"></iframe>

One caveat though, both pages must be on the same domain.

A consideration - iframes are in the process of being deprecated. So a different approach altogether for managing your site and its content is warranted.

see also:

http://www.dyn-web.com/tutorials/iframes/

[kaos]

Yeah, thats cool and all, but the page in the iframe is constantly changing... I need the title to update every time it changes.

[jscheuer1]

Generally, it should. The onload attribute is supposed to fire each time a page is loaded into the iframe. In most browsers it will.

However, it is possible, since as I say iframe is in the process of being deprecated, that some browsers may not fire this event when assigned in this manner.

If you are experiencing this problem, the event may also be assigned via attach/add, and that may (probably will) take care of it, ex:


<iframe id="myIframe" src="another.htm" onload="document.title=this.contentDocument? this.contentDocument.title : this.contentWindow.document.title;" width="300" height="300" scrolling="auto" frameborder="1"></iframe>
<script type="text/javascript">
(function(el){
function loadFunc(e){
e = e || window.event;
var f = e.target || e.srcElement, fb = f.contentDocument || f.contentWindow.document;
document.title = fb.title;
}
if (window.addEventListener)
el.addEventListener('load', loadFunc, false);
else if (window.attachEvent)
el.attachEvent('onload', loadFunc);
})(document.getElementById('myIframe'));
</script>

Still, as I also mentioned before, all of the pages involved MUST BE ON THE SAME DOMAIN. There is no cross page communication across domains in javascript without certification, which is a bit complex and requires a certificate from a third party. These certificates are difficult to obtain, expire periodically and must be renewed, so this is not something to enter into lightly. I don't recommend it unless the benefits would outweigh the costs involved.

But if all of your pages are on the same domain, certs are not an issue, and need not be used.

[kaos]

Thanks