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)
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 :-)
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?
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.
:)
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.
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