Topic: Custom Page Template Using iFrame

Author

Posts
October 12, 2015 at 9:35 am #621630

christopherhussey
Participant

Hey Guys

I am creating a custom page template that is a full page iframe.

I have been able to get this part done, however, none of the normal WP interactions are happening on the page.

Here is a page on my site using the custom page template.

http://christopherhussey.com/full-page-iframe/

Below, I will paste the code that I am using.

How can I get X to show the normal scripts for the site.

I would like to have add my own pop-ups and sliders to the page.

Any help would be greatly appreciated.

Thanks in advance.

C

October 12, 2015 at 9:36 am #621633

christopherhussey
Participant

This reply has been marked as private.

October 12, 2015 at 10:02 am #621685

Rupok
Member

Hey there,

Thanks for writing in! You are just using an iframe so I am not sure what’s the necessity of using a page template here when you can embed an iframe to WordPress editor. However it’s not possible to get any WP interactions inside an iframe.

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

October 12, 2015 at 10:15 am #621702

christopherhussey
Participant

Thank you, I do understand.

My question is this.

What code would I need to include in the custom page template to get it to load the global “blank” header and footer so that the WP scripts would work on the page.

I have done this – as I have done in other custom page templates using the code below, and when I do, the iframe is blank.

But when I take it out, the iframe works.

I am missing something unique to X.

Here is the code that I am / was using that is NOT working.

At the top : <?php x_get_view( ‘global’, ‘_header’ ); ?>
At the bottom : <?php x_get_view( ‘global’, ‘_footer’ ); ?>

When I use these, the scripts load, however the iframe does now. 🙁

I even tried putting the entire code in the main content div – as you guys do in the full-width template, but it did not work.

This is the code I used for that.

<div class=”x-container max width offset”>
<div class=”<?php x_main_content_class(); ?>” role=”main”>

Can you point me in the right direction here?

Thank in advance.

C

October 12, 2015 at 11:20 am #621793
Jade
Moderator
Hey there C,

Is the problem with the iFrame you have when the scripts are loading fine is it displays cut off? If so, you could use a custom CSS to fix the display of the iFrame.

Please add this in the CSS customizer on in your child theme’s style.css:
```
body {
    margin:0px;
    padding:0px;
    overflow:hidden
}

iframe {
    overflow:hidden;
    overflow-x:hidden;
    overflow-y:hidden;
    height:100%;
    width:100%;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
}
```
You may also specify the pages you want to add those CSS above by adding the class for the body selector like body.page-id-247

Let us know how it goes.
October 12, 2015 at 11:39 am #621815

christopherhussey
Participant

AWESOME!!!

That did it!

Here is the code that makes it all work. 🙂

—–

<?php

// =============================================================================
// VIEWS/INTEGRITY/TEMPLATE-FULL-PAGE-IFRAME.PHP
// —————————————————————————–
// Full Page iFrame
// =============================================================================

?>

<?php x_get_view( ‘global’, ‘_header’ ); ?>

<?php

/**
* Get the URL for the iFrame from a custom field
*/

$url = esc_url( get_post_meta( get_the_ID(), ‘iframe’, true ) );

/**
* Display a full page iFrame and strip out all other content on the page
*/

?>
<head>
<meta property=”og:url” content=”<?php echo $url; ?>” />
</head>
<body>
<iframe src=”<?php echo $url; ?>” frameborder=”0″ marginheight=”0″ marginwidth=”0″ width=”100%” height=”100%” scrolling=”auto”></iframe>
</body>
</html>

<?php x_get_view( ‘global’, ‘_footer’ ); ?>

<style>

body {
margin:0px;
padding:0px;
overflow:hidden
}

iframe {
overflow:hidden;
overflow-x:hidden;
overflow-y:hidden;
height:100%;
width:100%;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}

</style>

October 12, 2015 at 12:02 pm #621854

Rupok
Member

Glad that it worked. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!
Author

Posts