Upon launching our new website, we wanted to enable a keyword availability checker so people can check the availability of keywords before ordering. To make it more convenient, I wanted the keyword they were checking to automatically populate the “Desired Keyword” field on the order form. Given the keyword checker was running on a different server and pulled in using IFRAME, due to security restrictions on browsers, it could not trigger events on the parent page.

SOLUTION: URL Hash (#)

An IFRAME child can send a command to change the URL (location) of the parent. If you send the same URL (location) but append the #values_go_here, you can create a simple “listener” on the parent page to retrieve the hash values. This, of course, requires you to be in control of both the parent and child pages to implement (obvious spoofing security restrictions). Below is the code I used to test, placing the child file on my remote server and the parent running on my local machine:

LIVE EXAMPLE:

Parent: iframe.test.parent.htm

Child: iframe.test.child.htm

NOTE: if you run the parent page, it includes the child page and you can view source on both of them to see how it all works. As you type in the form field within the child page, watch your browser URL and the # (hash) value appending to the URL.

(2 votes, average: 5 out of 5)

 Loading ...

This entry was posted on Thursday, November 22nd, 2007 at 1:41 pm and is filed under Knowledge, My Projects. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. This post has been viewed 940 times.