embed – axew3.com

See NEW v3 phpBB WordPress template integration code

v2 version (OBSOLETE)

See NEW v3 phpBB WordPress template integration code

PAGE HELP and JS code – UPDATED on 21 Dec 2018
(related views/page-forum.php – updated on 26 Sep 2018)

you need to use this version of page-forum.php for this javascript code:
/tags/1.9.3/addons/page-forum.php

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 (then you’ll have into your active WordPress template folder a file named page-forum.php or page-board.php etc), to complete the procedure and get the responsive iframe height for the embedded/iframed 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 = 'axew3.com'; // THIS IS MANDATORY! Set/Change this value to your domain (example: axew3.com (or leave localhost if on localhost)) 
var wordpress_url_page_forum = 'https://www.axew3.com/w3/forum'; // MANDATORY! (DO NOT INCLUDE final slash here) Url that point to your wordpress forum page (without final slash)

var w3all_doc_domain = document.domain;
 
// Lightbox correct scroll fix:
// https://www.axew3.com/w3/forums/viewtopic.php?f=13&t=885
// remove /* and */ to activate // also more below ...
/*
$(".postimage").on("click", function(event) {
var pos = event.pageY - 100;
 $(parent.window).scrollTop( 200 );
var el = document.getElementById("lightbox");
$("#lightboxOverlay").on("click", function() {
$(parent.window).scrollTop( pos );
});
$(".lb-close").on("click", function() {
$(parent.window).scrollTop( pos );
});
$(".lightbox").on("click", function() {
$(parent.window).scrollTop( pos );
});
});
*/
  $(document).on("click", "a", function(e) {
   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_onreview_post = /#[review]+/ig.exec(href);
   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);
   var shortfaq = /^#[a-z][a-z0-9]+$/ig.exec(href);
   var shortinp = /^#[a-z][0-9]+$/ig.exec(href);
   var app = '';

// complete Lightbox correct attachment display or common default display
// activate removing /* and */
/*
if(w3all_onview_attach !== false){
e.preventDefault();
window.open(href,'_blank');
return;
}
*/
   
if ( w3all_onclick_smile == false && w3all_onview_attach == false && w3all_onreview_post == null && shortfaq == null  && shortinp == null ) {
   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 ( w3allappend.charAt(0) != '.' && w3allappend.charAt(1) != '/' ){
  app = href.split('app.php');
	w3allappend = './app.php' + app[1];
}

var newPath = /^.+(\.\/.+)/ig.exec(w3allappend); // need to be ./
if(newPath != null){
		w3allappend = newPath[1];
	}
	
// check if link point to external resource	
if (/^(f|ht)tps?:\/\//i.test(href)){
        e.preventDefault();
	parent.location.replace(href);
	return;
} else {
   w3allappend = window.btoa(unescape(encodeURIComponent(w3allappend)));
  }
 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
// skip iOS
var w3iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if(w3iOS == false){
$(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;");
});
}

$( "a" ).contextmenu(function() {
  var href = $(this).attr("href");
  var ohref = href;
  var applink = /app\.php[\w\/]+/ig.exec(href);
	var ckext = /^(f|ht)tps?:\/\//i.test(href); // external resource url?
	var ffile = '';
	var shortinp = /^#[a-z][0-9]+$/ig.exec(href);
	var shortfaq = /^#[a-z][a-z0-9]+$/ig.exec(href);
	var hrefu = document.location.href;
if ( href.charAt(0) == '.' && href.charAt(1) == '/' ){
	ffile = ohref;
} else {
  pu = href.split('app.php');
	ffile = './app.php' + pu[1];
}

if( shortinp != null ){
	 ffile = './' + hrefu.split('\\').pop().split('/').pop();
 }
 
 if( shortfaq != null && href.charAt(1) != 'p'){
 	pu = hrefu.split('app.php');
	ffile = './app.php' + pu[1] + shortfaq;
 }
 
var d = ffile;	 
if( href.length < 2 ){ // #
  d = document.location.href;
 }

  hrefEnc = window.btoa(unescape(encodeURIComponent(d)));
  href1 =  wordpress_url_page_forum + '/?w3=' + hrefEnc;
     
 if( ckext != false ){ // external Url
 	href1 = ohref;
 }
      
  $(this).attr("href", href1); // send out encoded
  $(this).mouseout(function() { // reset
  $(this).attr("href", ohref);
});

});

} // END if (window.frameElement) {
</script>
<script type="text/javascript" src="https://www.axew3.com/w3/forums/iframeResizer.contentWindow.min.js" defer></script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

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

var wordpress_url_page_forum = 'https://www.axew3.com/w3/forum'; // MANDATORY! (DO NOT INCLUDE final slash here) Url that point to your wordpress forum page (without final slash)

var w3all_doc_domain = document.domain;

// Lightbox correct scroll fix:

// https://www.axew3.com/w3/forums/viewtopic.php?f=13&t=885

// remove /* and */ to activate // also more below ...

$(".postimage").on("click", function(event) {

var pos = event.pageY - 100;

$(parent.window).scrollTop( 200 );

var el = document.getElementById("lightbox");

$("#lightboxOverlay").on("click", function() {

$(parent.window).scrollTop( pos );

});

$(".lb-close").on("click", function() {

$(parent.window).scrollTop( pos );

});

$(".lightbox").on("click", function() {

$(parent.window).scrollTop( pos );

});

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

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_onreview_post = /#[review]+/ig.exec(href);

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);

var shortfaq = /^#[a-z][a-z0-9]+$/ig.exec(href);

var shortinp = /^#[a-z][0-9]+$/ig.exec(href);

var app = '';

// complete Lightbox correct attachment display or common default display

// activate removing /* and */

if(w3all_onview_attach !== false){

e.preventDefault();

window.open(href,'_blank');

return;

}

if ( w3all_onclick_smile == false && w3all_onview_attach == false && w3all_onreview_post == null && shortfaq == null && shortinp == null ) {

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 ( w3allappend.charAt(0) != '.' && w3allappend.charAt(1) != '/' ){

app = href.split('app.php');

w3allappend = './app.php' + app[1];

}

var newPath = /^.+(\.\/.+)/ig.exec(w3allappend); // need to be ./

if(newPath != null){

w3allappend = newPath[1];

}

// check if link point to external resource

if (/^(f|ht)tps?:\/\//i.test(href)){

e.preventDefault();

parent.location.replace(href);

return;

} else {

w3allappend = window.btoa(unescape(encodeURIComponent(w3allappend)));

}

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

// skip iOS

var w3iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);

if(w3iOS == false){

$(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;");

});

}

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

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

var ohref = href;

var applink = /app\.php[\w\/]+/ig.exec(href);

var ckext = /^(f|ht)tps?:\/\//i.test(href); // external resource url?

var ffile = '';

var shortinp = /^#[a-z][0-9]+$/ig.exec(href);

var shortfaq = /^#[a-z][a-z0-9]+$/ig.exec(href);

var hrefu = document.location.href;

if ( href.charAt(0) == '.' && href.charAt(1) == '/' ){

ffile = ohref;

} else {

pu = href.split('app.php');

ffile = './app.php' + pu[1];

}

if( shortinp != null ){

ffile = './' + hrefu.split('\\').pop().split('/').pop();

}

if( shortfaq != null && href.charAt(1) != 'p'){

pu = hrefu.split('app.php');

ffile = './app.php' + pu[1] + shortfaq;

}

var d = ffile;

if( href.length < 2 ){ // #

d = document.location.href;

}

hrefEnc = window.btoa(unescape(encodeURIComponent(d)));

href1 = wordpress_url_page_forum + '/?w3=' + hrefEnc;

if( ckext != false ){ // external Url

href1 = ohref;

}

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

$(this).mouseout(function() { // reset

$(this).attr("href", ohref);

});

} // END if (window.frameElement) {

</script>

after you pasted this code into phpBB overall_footer.html
edit following lines:

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

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

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

var wordpress_url_page_forum = 'https://www.axew3.com/w3/forum'; // MANDATORY! (DO NOT INCLUDE final slash here) Url that point to your wordpress forum page (without final slash)

1	var wordpress_url_page_forum = 'https://www.axew3.com/w3/forum'; // MANDATORY! (DO NOT INCLUDE final slash here) Url that point to your wordpress forum page (without final slash)

change value
https://www.axew3.com/w3/forum
on this line, to point to the URL of the WordPress created forum page
(do not add final slash and change http or https as needed)
MANDATORY!

Finally, check this line

<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
wp/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.

How to update to latest iframe js code and page-forum.php?

Update the plugin (or download plugin and copy files by /resizer folder)
so files inside folder
/wp-content/plugins/wp-w3all-phpbb-integration/addons/resizer
results updated (or do it manually substituting these files with latest released https://github.com/davidjbradshaw/iframe-resizer)
so substitute/replace the file you added into phpBB root folder with latest iframeResizer.contentWindow.min.js
copy it from
/wp-content/plugins/wp-w3all-phpbb-integration/addons/resizer
folder and replace in phpBB root folder.

Replace the old code added into phpBB overall_footer.html file with the new one above into this page, take care to setup on it needed values as now required.

Remember to rebuild phpBB template after these steps to let changes take effect.

Now rebuild the page forum in WP w3all admin page, or manually copy the new page-forum.php version contained on folder
/wp-content/plugins/wp-w3all-phpbb-integration/addons
and paste it into your WordPress template folder, renaming it as needed, so for example page-board.php if you setted up board for the forum page name on wp_w3all admin page.

Done.

Note: if you want a custom page-forum, just open the page-forum.php (or whatever you named it) and read inline hints inside. It is so easy to create a custom page forum (for example with two columns etc). If any help more. just post on help forums here at axew3.com or at wordpress.org.

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.

Tag: embed

phpBB WordPress template integration (iframe v2)

wp_w3all responsive iframe procedure

How to update to latest iframe js code and page-forum.php?

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>)