iFrame integration works but not 100%

[Ezrael]

Hey! I tested to implement your amazing iFrame code.

So far so good it worked but I have one issue. I don't know if it's connected to your code or the theme, that I use. Maybe you can have a look and give me an advice. The Forum showed up in the Background which makes it impossible to work with it.

https://photography.surferparadise.de/forum/

[axew3]

into your overall_footer.html

Code: Select all

var w3allAllowDomain = 'https://community.surferparadise.de';

set it to

Code: Select all

var w3allAllowDomain = '*';

into overall_header

Code: Select all

var wordpress_url_page_f = 'https://community.surferparadise.de'; 

need to be set to the wp page not the forum himself so

Code: Select all

var wordpress_url_page_f = 'https://photography.surferparadise.de/forum'; 

while testing, the line

Code: Select all

document.location.replace(href0);

should be disabled and the Recompile Stale template option on ACP active

Code: Select all

//document.location.replace(href0);

until you do not setup all correctly, so that you can access/load the phpbb at real url, not iframed into wp, without that you disable the js on browser.
So you can test to see
https://photography.surferparadise.de/forum/
the phpbb iframed into wp
and
https://community.surferparadise.de/


After you'll apply as above mentioned fixes for overall_footer and header js code, all will be set correctly. If still not correctly resizing, check this:
viewtopic.php?f=13&t=1511

and if still in trouble then check the element that wrap the forum.
Are you using the shortcode?

[Ezrael]

At first thanks! You saved my a** because I was looked out for some minutes because of my mistake. So far I did all your recommended edits

Update: Shortcode works but I would like to use the forum-page.php as full page.

Shortcode
https://photography.surferparadise.de/test/


forum-page:
https://photography.surferparadise.de/forum
Looks like its an issue with the Theme Hitchcock that the background image is in front of the forum

[axew3]

The shortcode page return error, i assume it is because (not sure but should be) you named the page with a space, the browser console return:

Uncaught SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

try to rename it without a space and change the shortcode allowed pages value in accord.

About the page:
the problem seem to be the wrapper on it: when page-forum is created, it is just copied from the plugin's addons folder, into the active template folder, a simple page based on a twentysixteen theme page, that add header, iframe, footer.

Normally it works, but is some theme, that manage the template in different way, maybe the result is not correct.

Want you post the template page.php file of this theme?
The iframe code, in some case require to be put into an original page.php of the used theme: it is normally required to copy/paste the page.php into the same template folder, rename the duplicate it into page-forum.php (as it the name you gave) and put on it the required code of the iframe integration.

[Ezrael]

Code: Select all

<?php get_header();

if ( have_posts() ) : 
	
	while( have_posts() ) : the_post(); ?>

		<div class="content section-inner">
		
			<div id="post-<?php the_ID(); ?>" <?php post_class( 'single single-post' ); ?>>
				
				<div class="post-container">
					
					<?php 

					if ( ! post_password_required() ) :
					
						$post_format = get_post_format();

						if ( $post_format == 'gallery' ) : ?>
						
							<figure class="featured-media group">
								<?php hitchcock_flexslider( 'post-image' ); ?>
							</figure><!-- .featured-media -->
							
						<?php elseif ( has_post_thumbnail() ) : ?>
								
							<figure class="featured-media">
								<?php the_post_thumbnail( 'post-image' ); ?>
							</figure><!-- .featured-media -->
								
						<?php endif; ?>
						
					<?php endif; ?>
					
					<div class="post-header">

						<?php if ( is_single() ) : ?>
						
							<p class="post-date"><?php the_time( get_option( 'date_format' ) ); ?></p>

						<?php endif; ?>
						
						<?php the_title( '<h1 class="post-title">', '</h1>' ); ?>
						
					</div>
					
					<div class="post-inner">
							
						<div class="post-content entry-content">
							<?php the_content(); ?>
						</div><!-- .post-content -->
						
						<?php 
						$args = array(
							'before'           => '<div class="page-links group"><span class="title">' . __( 'Pages:', 'hitchcock' ) . '</span>',
							'after'            => '</div>',
							'link_before'      => '<span>',
							'link_after'       => '</span>',
							'separator'        => '',
							'pagelink'         => '%',
							'echo'             => 1
						);
					
						wp_link_pages( $args );

						?>

						<?php if ( is_single() ) : ?>
						
							<div class="post-meta">
						
								<?php if ( has_category() ) : ?>
									<p class="categories">
										<?php _e( 'In', 'hitchcock' ); ?> <?php the_category( ', ' ); ?>
									</p>
								<?php endif; ?>
								
								<?php if ( has_tag() ) : ?>
									<p class="tags">
										<?php the_tags( '', ' ' ); ?>
									</p>
								<?php endif; ?>
								
								<?php edit_post_link( __( 'Edit Post', 'hitchcock' ), '<p class="post-edit">', '</p>' ); ?>
			
							</div><!-- .post-meta -->
						
							<div class="post-navigation group">
								
								<?php
								
								$prev_post = get_previous_post();
								$next_post = get_next_post();

								if ( ! empty( $prev_post ) ) : ?>
									
									<a class="post-nav-prev" href="<?php the_permalink( $prev_post->ID ); ?>">					
										<p><?php _e( 'Next', 'hitchcock' ); ?><span class="hide"> <?php _e( 'Post', 'hitchcock' ); ?></span></p>
										<span class="fa fw fa-angle-right"></span>
									</a>
							
									<?php 
								endif;
								
								if ( ! empty( $next_post ) ) : ?>
								
									<a class="post-nav-next" href="<?php the_permalink( $next_post->ID ); ?>">
										<span class="fa fw fa-angle-left"></span>
										<p><?php _e( 'Previous', 'hitchcock' ); ?><span class="hide"> <?php _e( 'Post', 'hitchcock' ); ?></span></p>
									</a>
								<?php endif; ?>
							
							</div><!-- .post-navigation -->

							<?php
						else :

							edit_post_link(__( 'Edit', 'hitchcock' ), '<div class="post-meta"><p class="post-edit">', '</p></div>' );
						
						endif; ?>
					
					</div><!-- .post-inner -->
					
					<?php comments_template( '', true ); ?>
				
				</div><!-- .post-container -->
				
			</div><!-- .post -->
			
		</div><!-- .content -->
		
		<?php 

		if ( is_single() ) {
			hitchcock_related_posts( 3 );
		}

	endwhile;

endif;

?>
		
<?php get_footer(); ?>

Shortcode works if I check it. The other project seems to be more complicated. If I use the Shortcode, the board will be automatic formatted bei the CSS of the Theme. I really like to have thin pages but it would be nice to exclude the phpbb from this.

I have tried to solve the issue but now the forum has just the height of a banner:

Code: Select all

<?php
//Template Name: Contact

get_header(); ?>

<div class="content section-inner">		
	
	<?php defined( 'ABSPATH' ) or die( 'forbidden' );
/*
 Template Name: Forum
 Template Post Type: page
 * The default wp_w3all template to display content for the embedded phpBB
 * @package WordPress
 * @subpackage wp_w3all
 * @V5 JS -> https://www.axew3.com/w3/2018/12/phpbb-wordpress-template-integration-iframe-v5/
 */
// @2023 axew3.com //

// START MAY DO NOT MODIFY

  if(defined("W3PHPBBCONFIG")){
    // detect if it is the uid2 in phpBB and avoid iframe loop
    $phpBBuid2 = (isset($_COOKIE[W3PHPBBCONFIG["cookie_name"].'_u']) && $_COOKIE[W3PHPBBCONFIG["cookie_name"].'_u'] == 2) ? 2 : 0;
   } else { $phpBBuid2 = 0; }
   // detect if running as no linked users mode and avoid iframe loop
  if(defined("WPW3ALL_NOT_ULINKED")) { $phpBBuid2 = 0; }

global $w3all_iframe_custom_w3fancyurl,$w3all_url_to_cms,$w3all_iframe_custom_top_gap,$w3cookie_domain,$wp_w3all_forum_folder_wp;
$w3allhomeurl = get_home_url();
$current_user = wp_get_current_user();
$w3all_url_to_cms_clean = $w3all_url_to_cms;
$w3all_url_to_cms_clean0 = strpos($w3all_url_to_cms_clean, 'https://') !== false ? str_replace('https://', 'http://', $w3all_url_to_cms_clean) : str_replace('http://', 'https://', $w3all_url_to_cms_clean);
// guess to get the domain.com to display into preloader // array order here is !important
if(!empty($w3all_url_to_cms)){
$w3guessdomaindisplay = str_replace(array("http://www.","https://www.","http://","https://"), array("","","",""), $w3all_url_to_cms);
$spos = strpos($w3guessdomaindisplay,'/');
if($spos !== false)
{
 $w3guessdomaindisplay = substr($w3guessdomaindisplay, 0, $spos);
}} else { $w3guessdomaindisplay = 'Did you setup the URL that point to phpBB into the integration plugin admin page<br /> and is it correct?'; }

if(!empty($w3cookie_domain)){
 if(substr($w3cookie_domain, 0, 1) == '.'){
    $document_domain = substr($w3cookie_domain, 1);
   } else {
      $document_domain = $w3cookie_domain;
     }
 } else { $document_domain = 'localhost'; }

// do not use wp is_ssl() because it fail on some server
$w3all_orig = strpos($w3all_url_to_cms,'https') !== false ? 'https://'. $document_domain : 'http://' . $document_domain;
$w3all_orig_www = strpos($w3all_url_to_cms,'https') !== false ? 'https://www.'. $document_domain : 'http://www.' . $document_domain;

// security switch
$w3all_url_to_cms0 = $w3all_url_to_cms;

if( isset($_GET["w3"]) ){ // default
 $phpbb_url = trim(base64_decode($_GET["w3"]));
 $w3all_url_to_cms = $w3all_url_to_cms . '/' . $phpbb_url;
   if( preg_match('/[^-0-9A-Za-z\._#\:\?\/=&%]/ui',$phpbb_url) ){
    $w3all_url_to_cms = $w3all_url_to_cms0;
   }
} elseif ( isset($_GET[$w3all_iframe_custom_w3fancyurl]) ){ //fancy
 $phpbb_url = trim(base64_decode($_GET[$w3all_iframe_custom_w3fancyurl]));
 $w3all_url_to_cms = $w3all_url_to_cms . '/' . $phpbb_url;
   if( preg_match('/[^-0-9A-Za-z\._#\:\?\/=&%]/ui',$phpbb_url) ){
    $w3all_url_to_cms = $w3all_url_to_cms0;
   }
}

 if(substr($w3all_url_to_cms, 0, 5) == 'https'){
  $w3all_url_to_cms_htt = substr($w3all_url_to_cms, 0, 5);
  $w3all_url_to_cms_htt = 'http' . substr($w3all_url_to_cms, 5);
 } else {
    $w3all_url_to_cms_htt = substr($w3all_url_to_cms, 0, 4);
    $w3all_url_to_cms_htt = 'https'.substr($w3all_url_to_cms, 4);
   }

// old way - to be removed
// assure that passed url is correctly all decoded // may something else need to be added in certain conditions
$w3all_url_to_cms = str_replace(array("%2F", "%23", "%2E"), array("/", "#", "."), $w3all_url_to_cms);

// bug -> https://wordpress.org/support/topic/problem-using-iframe-feature-with-https/
if( strlen($w3all_url_to_cms) == strlen(get_option( 'w3all_url_to_cms' )) OR strlen($w3all_url_to_cms) == strlen(get_option( 'w3all_url_to_cms' )) + 1 )
{
  // do not re-write value of the global $w3all_url_to_cms or index.php will be may appended into widgets avatars urls, so that will make it fail image loads
 $w3all_url_to_cms_sw = $w3all_url_to_cms;
 $w3all_url_to_cms_sw .= (substr($w3all_url_to_cms, -1) == '/' ? '' : '/');
} else {  $w3all_url_to_cms_sw = $w3all_url_to_cms; }

function w3all_enqueue_scripts() {
 wp_enqueue_script("jquery");
}

function wp_w3all_add_ajax() {
  global $w3all_url_to_cms,$w3all_url_to_cms_sw,$wp_w3all_forum_folder_wp,$w3allhomeurl;

  $w3all_url_to_phpbb_ib = $w3all_url_to_cms . "/ucp.php?i=pm&folder=inbox";

$s = "
<script type=\"text/javascript\" src=\"".plugins_url()."/wp-w3all-phpbb-integration/addons/resizer/iframeResizer.min.js\"></script>
<script type=\"text/javascript\">
// pre loader js code for iframe content
jQuery( document ).ready(function() {
 jQuery('#w3idwloader').attr( \"class\", \"w3_wrap_loader\" );
});
jQuery(window).load(function() {
 jQuery('#w3idwloader').css(\"display\",\"none\");
});

function w3all_ajaxup_from_phpbb_do(res){
jQuery(document).ready(function() {
if ( parseInt(res,10) > 0 && null == (document.getElementById('wp-admin-bar-w3all_phpbb_pm')) ){
var resp = '".__( 'You have ', 'wp-w3all-phpbb-integration' )."' + parseInt(res,10) + '".__( ' unread forum PM', 'wp-w3all-phpbb-integration' )."';
 jQuery('#wp-admin-bar-root-default').append('<li id=\"wp-admin-bar-w3all_phpbb_pm\"><a class=\"ab-item\" href=\"".$w3all_url_to_phpbb_ib."\">' + resp + '</li>');
 // window.location.reload(true);// this could be a work around for different themes, but lead to loop in this way
} else if (parseInt(res,10) > 0){
  var r = '".__( 'You have ', 'wp-w3all-phpbb-integration' )."' + parseInt(res,10) + '".__( ' unread forum PM', 'wp-w3all-phpbb-integration' )."';
  jQuery( 'li.w3all_phpbb_pmn' ).children().text( r );
} else {
 if( parseInt(res,10) == 0 && null !== (document.getElementById('wp-admin-bar-w3all_phpbb_pm'))){
  jQuery('li[id=wp-admin-bar-w3all_phpbb_pm]').remove();
 }
}
});
}
</script>
<style type=\"text/css\" media=\"screen\">
.w3preloadtext{
color:#DDD;
font-size:3.5em;
font-family:impact,arial, sans-serif;
font-style:italic;
text-shadow: rgba(0,0,0,0) -1px 0px;
}
.w3_wrap_loader{
position:fixed;
top:0%;
bottom:0%;
left:0%;
right:0%;
background: rgba(0,0,0,0.95);
z-index:99999;
opacity:90;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
width:100%;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
pointer-events:none;
height:100%;
}
.ww3_loader{
width:100%;
text-align:center;
}
.w3_loader {
height: 8px;
width: 30%;
align-items: center;
justify-content: center;
position: relative; left: 50%;
transform: translateX(-50%);
overflow: hidden;
background-color: #DDD;
border-radius: 20px;
margin:0px;padding:0px;
}
.w3_loader:before{
height: 8px;
border-radius: 20px;
display: block;
position: absolute;
content: \"\";
left: -200px;
width: 200px;
background-color: #333;
animation: loading 1s linear infinite;
}
@keyframes loading {
from {left: -200px; width: 30%;}
50% {width: 30%;}
70% {width: 70%;}
80% { left: 50%;}
95% {left: 120%;}
to {left: 100%;}
}
</style>
";
  echo $s;
}

add_action('wp_enqueue_scripts', 'w3all_enqueue_scripts');
add_action('wp_head','wp_w3all_add_ajax');

// END MAY DO NOT MODIFY

// START a default WordPress page
get_header();
?>
<!-- noscript warning and simple preloader -->
<div id="w3idwloader" class="w3_wrap_loader">
  <noscript><h3 style="background-color:#333;color:#FFF;padding:15px;font-size:0.8em;pointer-events:auto;">Javascript disabled: can't load the forum page at this Url.<br />Enable Javascript on your browser or visit the forum here:<br /><br /><?php echo $w3all_url_to_cms;?><br /><a href="<?php echo $w3all_url_to_cms;?>">To be auto-redirected click here<br />(may this link will not work)</a></h3></noscript>
<div class="w3preloadtext"><?php echo $w3guessdomaindisplay ; ?></div>
<div class="ww3_loader"><div class="w3_loader"></div></div>
</div>
<!-- START iframe div -->
<div style="width:100%;min-width:100%" id="" class="">
<iframe id="w3all_phpbb_iframe" style="width:1px;min-width:100%;*width:100%;border:0;" scrolling="no" src="<?php echo $w3all_url_to_cms; ?>"></iframe>
<?php
    echo "<script>
    //document.domain = '".$document_domain."'; // NOTE: for domains like 'mysite.co.uk' remove this line, if you setup the next to match the correct document.domain
     //document.domain = '192.168.1.6'; // NOTE: reset/setup this with domain (like mysite.co.uk) if js error when WP is installed like on mysite.domain.com and phpBB on domain.com: js origin error can come out for example when WordPress is on subdomain install and phpBB on domain. The origin fix is needed: (do this also on phpBB overall_footer.html added code, it need to match)
    var wp_u_logged = ".$current_user->ID.";
    var phpBBuid2 = ".$phpBBuid2.";
    var w3allhomeurl = '".$w3allhomeurl."';
    var wp_w3all_forum_folder_wp = '".$wp_w3all_forum_folder_wp."';
    var w3all_iframe_custom_w3fancyurl = '".$w3all_iframe_custom_w3fancyurl."';

 function w3all_phpbb_pushUrlToParentOnBackForward(w3ER){
   if(w3ER != ''){
   var rem = w3ER.slice(-1);
   if(rem == '#'){ w3ER = w3ER.substring(0, w3ER.length - 1); }
    w3ER = window.btoa(unescape(encodeURIComponent(w3ER)));
    var w3all_url_pushER = w3allhomeurl + '/' + wp_w3all_forum_folder_wp + '/?' + w3all_iframe_custom_w3fancyurl + '=' + w3ER;
    window.history.replaceState({}, \"\", w3all_url_pushER);
   }
  }


   window.addEventListener('message', function (event)
   {
    if (event.origin != '".$w3all_url_to_cms0."')
    {
     // console.error('The event origin do not match');
     // console.error(event);
     // return;
    }

     if(/#w3all/ig.exec(event.data.message)){
       w3all_ajaxup_from_phpbb(event.data.message);
      //console.log(event.data);
     }
   });


 function w3all_ajaxup_from_phpbb(res){
      var w3all_phpbb_u_logged  = /#w3all_phpbb_u_logged=1/ig.exec(res);
   if(phpBBuid2 != 2){ // if not phpBB uid 2 or get loop for this user
       if( w3all_phpbb_u_logged == null && wp_u_logged > 1 || wp_u_logged == 0 && w3all_phpbb_u_logged != null ){
        document.location.replace('".$w3allhomeurl."/".$wp_w3all_forum_folder_wp."/');
       }
    }
      jQuery('#w3idwloader').css(\"display\",\"none\");
      var w3all_phpbbpmcount = /.*(#w3all_phpbbpmcount)=([0-9]+).*/ig.exec(res);
      if(w3all_phpbbpmcount !== null){
         w3all_ajaxup_from_phpbb_do(w3all_phpbbpmcount[2]);
       }

      var w3all_lochash = /.*(#w3all_lochash)=([0-9]+).*/ig.exec(res);
      if(w3all_lochash !== null && w3all_lochash[2] != 0){
         jQuery('html, body').animate({ scrollTop: w3all_lochash[2]}, 400);
       } else {
         jQuery('html, body').animate({ scrollTop: ".$w3all_iframe_custom_top_gap."}, 400);
       }

 } // END w3all_ajaxup_from_phpbb(res){

   // array() of allowed domains

    var w3all_orig_domains = ['".$w3all_url_to_cms0."','".$w3all_orig."','".$w3all_orig_www."','".$w3all_url_to_cms_clean."','".$w3all_url_to_cms_clean0."','https://localhost','http://localhost'];

 iFrameResize({
        log         : false,
        inPageLinks : true,
        targetOrigin: '".$w3all_url_to_cms_sw."',
        checkOrigin : w3all_orig_domains,
     heightCalculationMethod: 'taggedElement', // If iframe not resize correctly, un-comment (or change with one of others available resize methods) 
     // see: https://github.com/davidjbradshaw/iframe-resizer#heightcalculationmethod

  onMessage : function(messageData){ // Callback fn when message is received
        // w3all simple js check and redirects
        var w3all_passed_url = messageData.message.toString();
        var w3all_ck = \"".$_SERVER['SERVER_NAME']."\";
        var w3all_pass_ext  = (w3all_passed_url.indexOf(w3all_ck) > -1);
        var w3all_ck_preview = (w3all_passed_url.indexOf('preview') > -1);

   if (w3all_ck_preview == false) { // or the phpBB passed preview link, will be recognized as external, and preview will redirect to full forum url instead
    // so these are maybe, external iframe redirects
     if (w3all_pass_ext == true) {
        window.location.replace(w3all_passed_url);
      }
     if (/^(f|ht)tps?:\/\//i.test(w3all_passed_url)) {
       window.location.replace(w3all_passed_url);
     }
   }

  // do not pass to be encoded an url with sid or if it point to phpBB admin ACP via iframe
   if( /[^-0-9A-Za-z\._#\:\?\/=&%]/ig.exec(w3all_passed_url) !== null || /adm\//ig.exec(w3all_passed_url) !== null || /sid=/ig.exec(w3all_passed_url) !== null ){
     w3all_passed_url = '';
   }
  // PUSH phpBB URLs //
   if(w3all_passed_url != ''){
    w3all_passed_url = window.btoa(unescape(encodeURIComponent(w3all_passed_url)));
    var w3all_passed_url_push = '".$w3allhomeurl."/".$wp_w3all_forum_folder_wp."/?".$w3all_iframe_custom_w3fancyurl."=' + w3all_passed_url;
    history.replaceState({}, \"\", w3all_passed_url_push);
   }
  } // end // onMessage
,
onScroll: function(x,y){
//return false;
}
});
</script>";
?>
</div>

<!-- END iframe div -->


<?php get_footer(); ?>

[Ezrael]

Integration in page.forum.php
https://photography.surferparadise.de/forum/

Widget:
https://photography.surferparadise.de/test/

I definitely prefer to use the page-forum.php