How to Embed Full Page iFrames (with busting) in WordPress

Sometimes (at least I did) you need to embed a page (maybe even your own) in “full screen” within your WordPress site. The problem is that by default, you’ll have the header, footer, and any widgets also embedded in the site. This can cause some layout nightmares. However, here’s a trick I have put togetether to render these kind of pages and keep your links working properly.

The best way to embed a page in your current one is through the use of an iFrame. By now you’ve probably seen them in action. They’re rather ubiquitous and easy to implement. As it’s core, it is as simple as:

…and you will see it show up in your page.

With WordPress, you can start a new page in your site, go to Text mode, insert the code above, and you’d be all set.

However, at this point, you’ll see your header, footer, widgets, etc. on the page. We need a way to get rid of all of this.

Step 1: Create a “Content Only” Template

Thanks to the WordPress template stucture, this is an easy task. Open up your text editor of choice and paste in the following code:

Save this file to whatever you like (I named mine page-contentonly.php) and upload it into the wp-content/themes/[theme] folder that you are currently using.

Next, create a new page and paste the iFrame code listed above. Go over to the right hand side of the WordPress editor and find the drop down for your page templates. You can now select the “Content Only” page template.

Now publish your page and give it a peek. Voila! Your iFrame page fills the entire screen (without the “double scrollbar issue”) and none of your header/footer/widget areas are in place.

There’s one last step to this process.

Step 2: Create “iFrame busting” code

The one downfall with the iFrame is that any links that you click, will load within the iFrame, which can cause issues with your URLs or other resources. To fix this, we add some simple JavaScript code to the end of your normal page templates. Depending on how your theme is setup, there may be a widget, a footer.php file, or some other page that contains your closing </body> tag. Find this file/section and add the following code:

The beauty about this little snippet is that it only runs when the page loaded is within an iFrame. It also will update all links and form elements with the proper target, so there is nothing used unless absolutely necessary.

That’s it! Nest iFrames in your WordPress site without the headers/footers as needed!

…Proudly published using Desk PM

28 thoughts on “How to Embed Full Page iFrames (with busting) in WordPress

  1. Hey great code! thank you
    also i dont understand where to put the snippets ? i put it before the closing tag and after, but it is still opening in the same iframe.
    Can you elaborate a bit more how to intergrate the snippet ?

    thank you again :)

    1. Greetings Juliano,

      You want to put that final script just before the closing tag on your site. For most people, this will be in the footer.php file that goes with your WordPress theme. You’ll also need to make sure that jQuery is already loaded and running with your site (most sites are nowadays).

      Let me know if this resolves your issue.

  2. Hi Dillie,

    thank you for your answer. Also i added the script before the body tag in the footer. We also have jQuery loaded. But the links are still opening in the same iframe.

    Basically what im using it for is to reload the homepage at the end of each articles.
    you can have a look here : http://bit.ly/1mS4VfO

    let me know

    thank you !

    1. Hmm, one thing that could be causing the issue is that your page is loading up with a lot of blocked domain requests. It could be these errors are interfering with the main functionality of the iframe blocker. You might need to test this first. Are you attempting to load a site that isn’t in your domain in the iFrame? I’ll admit I didn’t test for that since I was loading my own resources in an iFrame.

  3. no, im only loading our domain in the iframe, you can see that it is our homepage loading at the bottom of the post page.

    Also im not sure what you mean by ‘the page is loading up with a lot of blocked domain’?

    1. When I pull up the code to find the iFrame (and related Javascript), my console has a lot of these kinds of messages:

      http://note.io/1kBYLSN

      I wasn’t sure if this might be affecting things. I’ll try to dig through it a bit more a little later when I can. A busy day is piling up on me. 8^D

    1. Hmm, I’m not quite sure you can do this. I believe there is some built in “frame busting” code with Google+ to prevent this. What have your tried so far?

  4. i am getting double scroll bar… is there any help for that … also my ninja pop is not working… i am trying to open a floating optin popup

  5. I’m using an iframe to embed another website on a specific page. Is there a way to not show the other website’s header?

    This solution (which worked well, thanks!) only removed my own header, which I don’t want to do.

  6. This is SO close to what I’m looking for!! But I don’t want it to display the page header and footer, only the content area within one page on to another page (and another sub-domain, but same server). Any suggestions?

    1. Apologies for the gists not showing up properly. You should add it right before the closing body tag, so that it runs right after the rest of the page has been rendered

  7. Any way to hide the content of the post when using the “content only” template? The code works great but when I turn on the template I get the iframed webpage at the top with the original content I had on the page below it. Any suggestions?

  8. Hi,
    Thank you very much the code and clear explanation, it is working perfectly. Only I have the same issue as FL Blogger, I want to hide the post original content which shows below the Iframe webpage.

    Thanks in advance.

          1. Hmm, are the ads at the bottom of your page generated by your footer? If so you’ll need to make sure the “content only” template is updated not to render the footer. If this is in the original page content itself, you should be able to remove the page content, and leave only the iFrame content, and have that go away. Let me now if that helps.

  9. What could I add to the body part of the code to allow plugins like a chat plugin to run in the frame. This is good solution but it eliminates plugins functioning that you may want to function, even if it would bring back header footer content this is still good for full page iframing.

What are your 10 bits on the matter? I want to know!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s