this code is inside c5news theme functions.php because we are using iframe there it detects any message(height) that i am sending from other site (cerebralzone) and change height of the sidebar according to.
note: event.origin shoule be site from which we are using iframe in this case https://cerebralzone.com
add_action('wp_footer','change_height_of_sidebar');
function change_height_of_sidebar() {
?>
<script>
jQuery(document).ready(function ($) {
window.addEventListener('message', function(event) {
if (event.origin === 'https://cerebralzone.com' || event.origin === 'https://somesite.com' || event.origin === 'https://somesite2.com') {
// Assuming the message data contains the new sidebar height
if (event.data && event.data > 0) {
var newHeight = event.data + 'px';
console.log(newHeight);
jQuery('.iframe-wrapper').attr('style','height:'+newHeight+'');
}
}
});
});
</script>
<?php
}
this code is inside cerebralzone theme functions.php.
function sendSidebarHeight called whenever sidebar loads and sends height of body to https://c5news.com and https://c5news.com detects message and gets data and set hight
add_action('wp_head', 'display_sidebar_callback');
function display_sidebar_callback() {
if (is_single()) {
$called_site = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : '';
if ($called_site == 'https://boldnavigator.com/' || $called_site == 'https://c5news.com/' || $called_site == 'https://hopefundme.org/') {
?>
<style>
#main-content,header,footer {
display: none;
}
.sidebar-container {
margin-top: 20px;
}
.give-embed-form, .give-embed-receipt {
box-shadow: unset !important;
}
</style>
<script>
function sendSidebarHeight() {
var sidebar = jQuery('body');
if (sidebar.length > 0) {
var sidebarHeight = sidebar.height();
// console.log(sidebarHeight);
// Send the sidebar height to the parent (https://c5news.com/)
parent.postMessage(sidebarHeight, 'https://c5news.com');
parent.postMessage(sidebarHeight, 'https://boldnavigator.com');
}
}
jQuery(function(){
if(jQuery('#main .sidebar').length > 0) {
setInterval(function(){
sendSidebarHeight();
},800);
}
});
</script>
<?php
}
}
}
this is basically javascript postMessage
