Use an anchor link to open an iframe inside a Wordpress page

Question

My Question:

How do you make an anchor link to an offsite webpage that when clicked opens up the offsite webpage as an iframe that is inside a new Wordpress page where the Wordpress header and footer remain but the iframed webpage shows where the content would normally be?

For Example:

You have a wordpress page with a series of offsite links. Each link goes to a registration page. The registration page is hosted by a 3rd party website.

____ get_header() ____
    Logo.png

____ get_the_content(); 
    Which class do you want to register for?

    Click here to register for Class A (link to 3rd party offsite webpage)
    Click here to register for Class B (link to 3rd party offsite webpage)

____ Wordpress Footer ____
    get_footer();

When 'Click here to register for Class B' is clicked, A new Wordpress page is opened like so.

____ get_header() ____
    Logo.png

____ 3rd party webpage
    <iframe>
        Please fill out this registration form to continue.

        Name: 
        Credit Card #:
    </iframe>

____ Wordpress Footer ____
    get_footer();

Possible Approach:

Is this way overkill...

• create a new, theme page template thst pulls in the header and footer. Then in the content area, parse out the the 3rd party webpage url from the the 3rd party link and use that link in an iframe where the post/page content would normally show.

• in Wordpress add a page and assign the new template. permalink: ../reg-page

• in the page that has the list of 3rd part links, build the anchor like so:

  <a href="../reg-page?classID=1234">Click here to register for Class B</a>
  

• in the theme page template:

  // I know this is not legal code
  
  /**
  * Template Name: iframe fullwidth 
  */
  
  get_header()
  
  <div class="content-wrapper">
      <iframe src="3rdPartSite.com/ . $_GET["classID"] ." width="100%" height="100%"></iframe>
  </div>
  
  get_footer()
  

Answer 1

I would approach this one of two ways:

1. Use a target attribute in the link to open it in an iframe (not universal across browsers)
2. Use JavaScript to replace the src attribute on your iframe

Option 1:

<a href="somethirdpartysite.com/reg" target="thirdparty">Register</a>
<iframe name="thirdparty"></iframe>

Option 2:

<a href="somethirdpartysite.com/reg" class="iframeit">Register</a>
<iframe src="#" name="thirdparty"></iframe>

<script>
     $('.iframeit').click(function(event) {
         event.preventDefault();

         var theSrc = $(event.target).attr('href');

         $('iframe[name="thirdparty"]').attr('src',theSrc);
     });
</script>

Answer 2

<a href="somethirdpartysite.com/reg" class="iframeit">Register</a>
<iframe src="#" name="thirdparty"></iframe>

<script>
     $('.iframeit').click(function(event) {
         event.preventDefault();

         var theSrc = $(event.target).attr('href');

         $('iframe[name="thirdparty"]').attr('src',theSrc);
     });
</script>