html transfer information from one page to the next

Question

So I have been looking into this for a few weeks and have come up with nothing!

I work on the website for my families music store, and have been asked to add a "Links" page to the website. My goal would be to have the categories of our vendors (i.e. Violin, Guitar, Piano, etc.) on the left of the page and when the category is selected the links come up on the right. That part I have. The tricky part here is: When a link to a vendor (i.e. Fender, G&L, Yahmaha) is clicked instead of taking them directly to the site, I want it to take them all to the same page, but embeded on that page is the site.

I have done a lot of research on this and have come up with nothing. I could just go through and make a new page for each of the vendors, with the embedding on each individual page, but that is extremely time consuming with the amount of vendors.

Is something like this at all possible? I've been playing with embedding itself and have that down. It just comes down to, which link did they click, and loading that specific page.

If there is any more information you may need to help or point me in the right direction please let me know! Same with any code that may be helpful!

I've come up dead on all my research on this.

EDIT: I guess my ultimate goal is that it will look something like this: http://answers.yahoo.com/ so that the vendors website is open on bottom, but our stores banner and links are still at the top. Out website can be found here: http://www.brassbellmusic.com/default.aspx

Answer 1

I've created a JSFiddle to demo this functionality using jQuery.

We iterate through the list of brand links in the ul:

$('#brandListing a')

Capturing a click event on each:

.click(function(ev){

jQuery passes an event object to the anonymous function (ev). When the link is clicked, we first must prevent the default action, which is to follow the link. Then we update the src attribute of the iframe (the "embedded page") with the value of the href that was clicked:

ev.preventDefault();
$('#embeddedBrandWebsite').attr('src', ev.target.href);

You'll need to add the jQuery library to your page to use my code sample, but it's possible to replicate the functionality without it.

EDIT

The sample above is for a single page implementation, where links and the embed are on the same page. To achieve the requested "transfer of information," I recommend passing the target href as a GET parameter (brassbellmusic.com/brandEmbed.aspx?path=http%3A//www.gibson.com/). On the single "embed" page, you can then extract this either on the server side to set the iframe's src, or using javascript. With javascript, you might use:

function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

Source

And then after your document is ready, set the iframe src using getURLParameter('path').