0

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()
    

2 Answers 2

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>
2
  • You should wrap that bit up. Else $ could become weird. Also better move it to a separate file, so other plugins (or devs) can jump in and handle the registered parts.
    – kaiser
    Oct 15, 2013 at 21:40
  • 1
    Sure, sure. This was more a demonstration of what to do, rather than 'this is absolutely the way to do this'. Oct 16, 2013 at 18:14
0
<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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.