Embed phpBB into WordPress template:iframe responsive how to

This is the old iframe procedure.
New iframe procedure and code is available here:
https://www.axew3.com/w3/2018/09/wordpress-phpbb-template-embed-v3/

!!OLD OBSOLETE!! follow link above for the new v3 code and procedure!

PAGE HELP – UPDATED on 19 Sept 2018
~~(related views/page-forum.php – updated on 27 Sep 2017)~~
~~/trunk/addons/page-forum.php~~

~~Iframe resizer library by:~~
~~https://davidjbradshaw.github.io/iframe-resizer/~~

wp_w3all responsive iframe procedure

~~After you’ve built/created the WP forum template page via~~
~~WP_w3all phpBB embedded on WordPress Template~~
option on WP_w3all admin config page, and the blank page on WordPress Admin -> Pages -> Add New, titled the same of created wp_w3all template page, so forum or board etc…, to complete the procedure and get the responsive iframe height for the embedded phpBB into WordPress template page you need:

Open with a text editor your phpBB template file overall_footer.html

and just before the closing </body> tag, add this code (do not select lines numbers column on copied code):

<script type="text/javascript">
	
document.domain = 'localhost'; // THIS IS MANDATORY! Set/Change this value to your domain (example: axew3.com (or leave localhost if on localhost)) 

var w3all_doc_domain = document.domain;

  $(document).on("click", "a", function() {
   var href = $(this).attr("href");
  $(this).attr("href", href.replace('iframe=true&', '')); // remove! or get loop in htaccess if var appended before ...
   var w3allappend = href;
   var w3all_parent_element_id = $(this).parent().get( 0 ).id; // detect click x ... (ex: return ID smiley-box, onclick post smiles) ... // detect and avoid/allow certain behaviors
   var w3all_onclick_smile  = (w3all_parent_element_id.indexOf('smiley-box') > -1);
   var w3all_onview_topic  = (href.indexOf('viewtopic.php') > -1);
   var w3all_onview_attach  = (href.indexOf('file.php') > -1);
   var w3all_onview_post = /#p[0-9]+/ig.exec(href);
   var w3all_ck_quickmod  = (href.indexOf('quickmod') > -1);
   var w3all_onreply_topic  = (href.indexOf('mode=reply') > -1);
   var w3all_ck_onindex  = (href.indexOf('index.php') > -1);
   var w3all_onsubmit_post = /^post?/ig.exec(href);
  
 if ( w3all_onclick_smile === false && w3all_onview_attach === false ) {
   if ('parentIFrame' in window) window.parentIFrame.scrollTo(0,50); // change 50 to another value may 0 or 100 or 500. Top distance gap in px when page scroll top
  }
if ('parentIFrame' in window) window.parentIFrame.sendMessage(w3allappend);
});

///////////////////////////////////////////////////////////////////////////
// w3all Ajax UPDATES for phpBB events

if (window.frameElement) { // if in iframe 

window.onload = function() {
var pmn = "{PRIVATE_MESSAGE_COUNT}";
var w3all_phpbb_u_logged = "{S_USER_LOGGED_IN}";
// to send to wp at once here, like this: #w3all_phpbbpmcount=val#w3all_phpbbnotifycount=val#etc etc etc
var w3appendevents = '#w3all_phpbbpmcount=' + pmn + '#w3all_phpbb_u_logged=' + w3all_phpbb_u_logged;
parent.w3all_ajaxup_from_phpbb(w3appendevents);
}

// fix vertical iframe centered on viewtopic.php, preview or where # anchor etc
$(window).load(function() {
var bd = document.getElementsByTagName("body");
for (var i = 0; i < bd.length; i++) { 
    var bdID = bd[i].getAttribute("id"); 
}
var elt = document.getElementById(bdID);	
elt.setAttribute("style", "position:fixed;top:0%;left:0%;width:100%;margin:0px;");
});

///////////////////////////////////////////////////////////////////////////
// htaccess trick for right click /copy/paste/ links
// to apply htaccess rules and rewrite urls for this and email notification, read this tutorial:
// https://www.axew3.com/w3/2017/04/wp_w3all-htaccess-javascript-rewrite-links-point-iframe-how-to/
 
/* remove this line to activate htaccess trick
$( "a" ).contextmenu(function() {
  var href = $(this).attr("href");
  var shortlink = /^#p[0-9]+/ig.exec(href);
	var ck  = (href.indexOf('iframe=true') > -1);
	var ckl = /^(http[s]?:\/\/[-a-z0-9\.]+)/ig.exec(href); // check if link point to external resource: a passed phpBB url (attr("href")) is relative, not absolute: so we assume that if http(s) is present, 
	// than it should be a link that point to an external iframe resource. Can be improved further more using this same pattern result.
	
	 if ( ck == false && ckl == null && shortlink == null ){ // not re-append // not append if short link like #p49 (link of the post on viewtopic) or passed link point to an external resource
	 	  var href0 = href.split('?');
	 	  if(href0[1] == null){ href0[1] = ''; } else { href0[1] = '&' + href0[1]; }
      var href1 = href0[0] + '?iframe=true' + href0[1];
    $(this).attr("href", href1); // send out before mouseup ...
   }
});
$( "a" ).mouseup(function() { // remove on mouseup or iframe=true loop with htaccess
  var href = $(this).attr("href");
  $(this).attr("href", href.replace('iframe=true&', ''));
});
*/ //remove this line to activate htaccess trick

// TO ACTIVATE phpBB lightbox events remove /* and */ here below
// NOTE: Due to last update fix from release 1.7.7, this should not be more required, as in any other phpBB mod
/* 
$(document).on('mouseup', '.postimage', function(){
 //var w3allappend = "getw3all_lightbox";
 if ('parentIFrame' in window) window.parentIFrame.scrollToOffset(0,0);
 //if ('parentIFrame' in window) window.parentIFrame.sendMessage(w3allappend);
});
*/

}
</script>
<script type="text/javascript" src="https://www.axew3.com/phpBB/iframeResizer.contentWindow.min.js" defer></script>

document.domain = 'localhost'; // THIS IS MANDATORY! Set/Change this value to your domain (example: axew3.com (or leave localhost if on localhost))

var w3all_doc_domain = document.domain;

$(document).on("click", "a", function() {

var href = $(this).attr("href");

$(this).attr("href", href.replace('iframe=true&', '')); // remove! or get loop in htaccess if var appended before ...

var w3allappend = href;

var w3all_parent_element_id = $(this).parent().get( 0 ).id; // detect click x ... (ex: return ID smiley-box, onclick post smiles) ... // detect and avoid/allow certain behaviors

var w3all_onclick_smile = (w3all_parent_element_id.indexOf('smiley-box') > -1);

var w3all_onview_topic = (href.indexOf('viewtopic.php') > -1);

var w3all_onview_attach = (href.indexOf('file.php') > -1);

var w3all_onview_post = /#p[0-9]+/ig.exec(href);

var w3all_ck_quickmod = (href.indexOf('quickmod') > -1);

var w3all_onreply_topic = (href.indexOf('mode=reply') > -1);

var w3all_ck_onindex = (href.indexOf('index.php') > -1);

var w3all_onsubmit_post = /^post?/ig.exec(href);

if ( w3all_onclick_smile === false && w3all_onview_attach === false ) {

if ('parentIFrame' in window) window.parentIFrame.scrollTo(0,50); // change 50 to another value may 0 or 100 or 500. Top distance gap in px when page scroll top

}

if ('parentIFrame' in window) window.parentIFrame.sendMessage(w3allappend);

});

///////////////////////////////////////////////////////////////////////////

// w3all Ajax UPDATES for phpBB events

if (window.frameElement) { // if in iframe

window.onload = function() {

var pmn = "{PRIVATE_MESSAGE_COUNT}";

var w3all_phpbb_u_logged = "{S_USER_LOGGED_IN}";

// to send to wp at once here, like this: #w3all_phpbbpmcount=val#w3all_phpbbnotifycount=val#etc etc etc

var w3appendevents = '#w3all_phpbbpmcount=' + pmn + '#w3all_phpbb_u_logged=' + w3all_phpbb_u_logged;

parent.w3all_ajaxup_from_phpbb(w3appendevents);

}

// fix vertical iframe centered on viewtopic.php, preview or where # anchor etc

$(window).load(function() {

var bd = document.getElementsByTagName("body");

for (var i = 0; i < bd.length; i++) {

var bdID = bd[i].getAttribute("id");

}

var elt = document.getElementById(bdID);

elt.setAttribute("style", "position:fixed;top:0%;left:0%;width:100%;margin:0px;");

});

///////////////////////////////////////////////////////////////////////////

// htaccess trick for right click /copy/paste/ links

// to apply htaccess rules and rewrite urls for this and email notification, read this tutorial:

// https://www.axew3.com/w3/2017/04/wp_w3all-htaccess-javascript-rewrite-links-point-iframe-how-to/

/* remove this line to activate htaccess trick

$( "a" ).contextmenu(function() {

var href = $(this).attr("href");

var shortlink = /^#p[0-9]+/ig.exec(href);

var ck = (href.indexOf('iframe=true') > -1);

var ckl = /^(http[s]?:\/\/[-a-z0-9\.]+)/ig.exec(href); // check if link point to external resource: a passed phpBB url (attr("href")) is relative, not absolute: so we assume that if http(s) is present,

// than it should be a link that point to an external iframe resource. Can be improved further more using this same pattern result.

if ( ck == false && ckl == null && shortlink == null ){ // not re-append // not append if short link like #p49 (link of the post on viewtopic) or passed link point to an external resource

var href0 = href.split('?');

if(href0[1] == null){ href0[1] = ''; } else { href0[1] = '&' + href0[1]; }

var href1 = href0[0] + '?iframe=true' + href0[1];

$(this).attr("href", href1); // send out before mouseup ...

}

});

$( "a" ).mouseup(function() { // remove on mouseup or iframe=true loop with htaccess

var href = $(this).attr("href");

$(this).attr("href", href.replace('iframe=true&', ''));

});

*/ //remove this line to activate htaccess trick

// TO ACTIVATE phpBB lightbox events remove /* and */ here below

// NOTE: Due to last update fix from release 1.7.7, this should not be more required, as in any other phpBB mod

$(document).on('mouseup', '.postimage', function(){

//var w3allappend = "getw3all_lightbox";

if ('parentIFrame' in window) window.parentIFrame.scrollToOffset(0,0);

//if ('parentIFrame' in window) window.parentIFrame.sendMessage(w3allappend);

});

}

</script>

after you pasted this code into phpBB overall_footer.html edit the second line on added code:

document.domain = 'localhost'; // THIS IS MANDATORY! Set/Change this value to your domain (example: axew3.com (or leave localhost if on localhost))

1	document.domain = 'localhost'; // THIS IS MANDATORY! Set/Change this value to your domain (example: axew3.com (or leave localhost if on localhost))

change localhost to fit your domain name (example axew3.com), do NOT add http(s):// OR the point in front, just add
yourdomain.com or leave localhost if on localhost. If phpBB is at subdomain.domain.com, add domain.com as value
(MANDATORY!) or resizer won’t work
now check

<script type="text/javascript" src="https://www.axew3.com/phpBB/iframeResizer.contentWindow.min.js" defer></script>

1	<script type="text/javascript" src="https://www.axew3.com/phpBB/iframeResizer.contentWindow.min.js" defer></script>

in the code you added (last line): this should correctly point to the iframeResizer.contentWindow.min.js file that you’ll go to add into phpBB root folder. You need to use the absolute URL (use http or https as needed, and adjust the url to fit your needs)
(MANDATORY!) or resizer won’t work

src="https://www.yoursite.com/your-phpbb-folder/iframeResizer.contentWindow.min.js"

1	src="https://www.yoursite.com/your-phpbb-folder/iframeResizer.contentWindow.min.js"

AFTER EDITED, save and load the modified overall_footer.html into your phpBB style folder, overwriting the default one, and so

load through ftp on the phpBB root folder (or copy/paste), the file
iframeResizer.contentWindow.min.js
that is contained inside folder
YOURWP/wp-content/plugins/wp-w3all-phpbb-integration/addons/resizer

After this, phpBB require to recompile the template, or modifications to template files not affect (to overall_footer.html in this case). Open phpBB ACP, and so under:

Server Configuration -> Load settings -> Recompile stale style components set to YES and save. Load one time a phpBB full forum page. So return to ACP and reset to NO, save. This step is needed one time to load the template modifications on phpBB (and any time you edit a phpBB template file to for modifications take effect), but this option should be ever set to NO into an online/production site to save server resources. It is normally set to yes only for testing/devel purpose or to apply modifications on phpBB templates files.

If you want phpBB email notification links to point to iframe, follow this step about htaccess:

phpBB htaccess for phpBB notification email to point WP forum page (1.6.9>)

to activate the rewrite right click/copy links on iframe, to point to iframe, activate the related code removing the two lines:

/* remove this line to activate htaccess trick
and
*/ //remove this line to activate htaccess trick

NOTE: to get the iframe to be responsive for ACP phpBB admin panel, read this post.

If any question, use the forum here or at Author axew3Posted on February 19, 2016January 6, 2019Categories Wordpress phpBB integrationTags embed phpbb in wordpress, iframe, javascript iframe, responsive iframe, wordpress, wordpress template iframe

This is the old iframe procedure. New iframe procedure and code is available here: https://www.axew3.com/w3/2018/09/wordpress-phpbb-template-embed-v3/

wp_w3all responsive iframe procedure

If you want phpBB email notification links to point to iframe, follow this step about htaccess:

phpBB htaccess for phpBB notification email to point WP forum page (1.6.9>)

This is the old iframe procedure.
New iframe procedure and code is available here:
https://www.axew3.com/w3/2018/09/wordpress-phpbb-template-embed-v3/