Ask your WordPress questions! Pay money and get answers fast! (more info)

Hide header if in iframe WordPress

  • SOLVED

I need to hide the header of my wordpress-based website, in case the site is loaded in an iFrame. Should I do it with javascript, in functions or in css? And how can I do it? I found this


<script type="text/javascript">
var isInIFrame = (window.location != window.parent.location);
if(isInIFrame==true){
alert("It's in an iFrame");
document.getElementById('header').style.display = "none";
}
else {
alert("It's NOT in an iFrame");
}
</script>


But I don't where to put it (and also I don't know if it could work).
I hope someone can help me, thanks!

Answers (5)

2014-02-05

Sébastien | French WordpressDesigner answers:

it's better if you add this in functions.php like that


function my_script(){ ?>

<script type="text/javascript">

var isInIFrame = (window.location != window.parent.location);

if(isInIFrame==true){

//alert("It's in an iFrame");

document.getElementById('header').style.display = "none";

}

else {

//alert("It's NOT in an iFrame");

}

</script>

<?php }

add_action('wp_footer', 'my_script'); ?>


tomaso1980 comments:

Seems to be working..put where there was header, remains a padding top 57px. I should add something to that script to remove that space..could you help me?


Sébastien | French WordpressDesigner comments:

Yes but i need a link of page you are working on.


tomaso1980 comments:

site is bookabook.it/2568


Sébastien | French WordpressDesigner comments:

i see no iframe


tomaso1980 comments:

I need to hide header when whole page in embedded in an iframe.
There is no iframe in the page.
Script works, but as result I have:
- no header when embedded in iframe (Good)
- an arbitrary padding-top: 57px when embedded in iframe (bad)

here is the output result
<body class="home.page.page-id-10.page-template.page-template-page-templatesfront-page-php.custom-background.mini-header.fixed-header" style="padding-top: 57px"; >
I need to remove that padding-top, I suppose I should do it from the same script, how can I do it?


Sébastien | French WordpressDesigner comments:

And if you don't use my script this padding doesn't exist ?


Sébastien | French WordpressDesigner comments:

send me the URL where i can see this iframe


Sébastien | French WordpressDesigner comments:

there is probably error in your php code because
you have

class="home.page.page-id-10.page-template.page-template-page-templatesfront-page-php.custom-background.mini-header.fixed-header"

instead of

class="home page page-id-10 page-template page-template-page-templates front-page-php custom-background mini-header fixed-header"

and you have
style="padding-top: 57px"; >

instead of

style="padding-top: 57px" >
(no semicolon)


Sébastien | French WordpressDesigner comments:

in the file funfify/js/fundify.js, at line27, you have this code :
function fixHeader() {
var x = $(window).width();

if ( ! $( 'body' ).hasClass( 'fixed-header' ) ) {
$( 'body' ).css( 'padding-top', 0 );
} else {
$( 'body' ).css( 'padding-top', $( '#header' ).outerHeight() - 4 );
}
}


replace it by
function fixHeader() {
var x = $(window).width();
var isInIFrame = (window.location != window.parent.location);

if(isInIFrame==true){document.getElementById('header').style.display = "none";}
else {
if ( ! $( 'body' ).hasClass( 'fixed-header' ) ) {
$( 'body' ).css( 'padding-top', 0 );
} else {
$( 'body' ).css( 'padding-top', $( '#header' ).outerHeight() - 4 );
}
}


}


and remove the code you have add in functions.php


Sébastien | French WordpressDesigner comments:

if you want to use a child theme
modify the js file like I write above.

Create your child theme, with a style.css, functions.php and js/fundify.js (the new fundify.js)

The correct way to add scripts to WordPress is with wp_enqueue_script. Your parent theme uses this.
In functions.php you can read that :
wp_enqueue_script( 'fundify-scripts', get_template_directory_uri() . '/js/fundify.js', array( 'magnific', 'jquery-masonry' ), 20130522, true );

So you can override the JS files by using wp_dequeue_script and enqueuing your own.
In your child-theme/functions.php, you must write :
add_action( 'wp_enqueue_scripts', 'override_fundify_js' );
function override_fundify_js()
{
wp_dequeue_script( 'fundify-scripts' );
wp_enqueue_script( 'child_theme_fundify-scripts', get_template_directory_uri() . '/js/fundify.js', array( 'magnific', 'jquery-masonry' ), 20130522, true );
}


Sébastien | French WordpressDesigner comments:

tell me if it's ok for you


Sébastien | French WordpressDesigner comments:

you send me an email : that doesn't work...
just replace my last code by

function override_fundify_js() {
wp_dequeue_script( 'fundify-scripts' );
wp_enqueue_script( 'child_theme_fundify-scripts', get_stylesheet_directory_uri() . '/js/fundify.js', array( 'magnific', 'jquery-masonry' ), 20130522, true );
}
add_action( 'wp_enqueue_scripts', 'override_fundify_js', 11 );

Now it's ok :-)

2014-02-05

Bob answers:

You should put it in functions.php .



function add_this_script_footer(){ ?>
<script type="text/javascript">
var isInIFrame = (window.location != window.parent.location);
if(isInIFrame==true){
alert("It's in an iFrame");
document.getElementById('header').style.display = "none";
}
else {
alert("It's NOT in an iFrame");
}
</script>
<?php }
add_action('wp_footer', 'add_this_script_footer'); ?>


Bob comments:

and you will find functions.php in root of your theme's directory.


Bob comments:

Note: you should have div or header tag with id="header" to hide it.

and you final code which should go in funcitons.php is


function add_this_script_footer(){ ?>
<script type="text/javascript">
var isInIFrame = (window.location != window.parent.location);
if(isInIFrame==true){
document.getElementById('header').style.display = "none";
}
</script>
<?php }

add_action('wp_footer', 'add_this_script_footer'); ?>


If it don't work then please provide url of your website.


tomaso1980 comments:

Seems to be working..put where there was header, remains a padding top 57px. I should add something to that script to remove that space..could you help me?


Bob comments:

can you please give me link of page you are working on.


Bob comments:

if the padding is because of header then you have to write something like this after <em>document.getElementById('header').style.display = "none";</em>

document.getElementById('header').style.padding="0px";


and if it's margin top then


document.getElementById('header').style.marginTop="0px";


tomaso1980 comments:

doesn't work. site is bookabook.it/2568


Bob comments:

@Sabby Thanks.

I do not have his site url so was trying to give him idea what he should do.
is it fixed now @tomasa1980 ? I am seeing your last message with your problem described.


tomaso1980 comments:

No, it's not resolved :(
Now I can hide header, but instead of header I get a padding top 57px


Bob comments:

replace old code with this


function add_this_script_footer(){ ?>
<script type="text/javascript">
var isInIFrame = (window.location != window.parent.location);
if(isInIFrame==true){
document.getElementById('header').style.display = "none";
document.body.style.paddingTop= "0px";
}
</script>
<?php }

add_action('wp_footer', 'add_this_script_footer'); ?>


tomaso1980 comments:

@Bhavesh

doesn't work


Bob comments:

You provided me this url

http://bookabook.it/2568

I do not found any iframe or header tag in your source code.

Where you are implementing the code?

2014-02-05

Sabby Sam answers:

You even can try this way.

http://stackoverflow.com/questions/326069/how-to-identify-if-a-webpage-is-being-loaded-inside-an-iframe-or-directly-into-t


Sabby Sam comments:

@bhavesh Your code work well only thing is that you haven't load it the theme. I have done for him and its work fine. I just call the autoload in body.
:)

2014-02-05

Hariprasad Vijayan answers:

Hello,

It is javascript code you can just add it in your .js file. It is working when i test it here. It will only work if your iframe url is from your domain. It will not work if the url is from some other domain.

2014-02-06

Deepak answers:

I have solution for this.

Use one parameter in link where you want to open post in iFrame...Like ?iframe=true.

And in your page add bellow code:-

<?php if(isset($_REQUEST['iframe'])) { ?>
<style>
//Add css to hide header part.
</style>
<?php } ?>
Hope this will help