iframe – axew3.com

[w3allcustomiframe] shortcode how to

check all others shortcodes listed under the “common how” to section

Note: this shortcode work only if it is activated option into WP plugin’s admin (advanced shortcode):

Activate [w3allcustomiframe] shortcode

It may require you to know something about iframes and how they work, but looking into examples may you can easily understand the way:

the shortcode to embed a page need to be used for example like this:

[w3allcustomiframe resizer="yes" check_origin="https://localhost" url_to_display="https://localhost/phpBB3/viewtopic.php?f=2&t=1&start=10&view=print"]

1	[w3allcustomiframe resizer="yes" check_origin="https://localhost" url_to_display="https://localhost/phpBB3/viewtopic.php?f=2&t=1&start=10&view=print"]

Params
resizer
check_origin
url_to_display
css_iframe_wrapper_div
css_iframe_elem_iframe

resizer (yes/no)
default false. * use the iframe resizer or not (if no may pass fixed width and height values for the iframe to display, via css_iframe_elem_iframe param)

checkOrigin (true/false)
Default true. See checkOrigin reference.
Pass false to disable.
To provide a value for checkorigin, set this param (for example) to https://mysite.com (it will be so converted into array to pass the valid domain value you want to set)

url_to_display (url)
the src url to the page that the iframe will point to

css_iframe_wrapper_div (inline css inside attribute style=”…”)
css inline style of the iframe wrapper, element <div style="..."

css_iframe_elem_iframe (inline style inside attribute style=”…”)
css inline style for the element <iframe style="..."

* Note: to use the iframe resizer, the page that contain the content to display, that reside outside WordPress (like the integrated phpBB forum into this online example) need to embed this code just before the closing </body> tag:

<script type="text/javascript" src="https://mysite/iframeResizer.contentWindow.min.js" defer>

1	<script type="text/javascript" src="https://mysite/iframeResizer.contentWindow.min.js" defer>

The iframeResizer.contentWindow.min.js file to point to can be copied into plugin folder:

wp-content/plugins/wp-w3all-phpbb-integration/addons/resizer

and added/pasted where necessary

A shortcode example:

[w3allcustomiframe resizer="yes" check_origin="false" url_to_display="https://mysite/mypage_outside_wp.html" css_iframe_wrapper_div="margin:10px;padding:5px;background-color:#f3f3f3"]

1	[w3allcustomiframe resizer="yes" check_origin="false" url_to_display="https://mysite/mypage_outside_wp.html" css_iframe_wrapper_div="margin:10px;padding:5px;background-color:#f3f3f3"]

The follow example, display the content within this domain: since using resizer, it has been necessary to add the iframe resizer lib into the phpBB template file viewtopic_print.html, just before the closing </body> tag. Click into links to see behavior (pages within this domain will continue to display, and (may, may not) also some other external link you’ll click will load here)

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

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

[w3allcustomiframe resizer="yes" check_origin="https://www.axew3.com" url_to_display="https://www.axew3.com/w3/forums/viewtopic.php?f=3&t=1431&view=print"]

1	[w3allcustomiframe resizer="yes" check_origin="https://www.axew3.com" url_to_display="https://www.axew3.com/w3/forums/viewtopic.php?f=3&t=1431&view=print"]

[w3allcustomiframe resizer=”yes” check_origin=”https://www.axew3.com” url_to_display=”https://www.axew3.com/w3/forums/viewtopic.php?f=3&t=1431&view=print”]

WP_w3all .htaccess and Javascript for phpBB: rewrite URLs to point iframe how to (Spiders friendly)

Open .htaccess file of your phpBB root folder, search for this line:

RewriteRule ^(.*)$ app.php [QSA,L]

1	RewriteRule ^(.*)$ app.php [QSA,L]

just below add the follow:

#p reserved in WP
RewriteCond %{QUERY_STRING} ^(.*)(iframe=true&)(.*)(p=)([0-9]+)(.*)?$
RewriteRule . /yourwp/index.php/forum/?%3post_id=%5%6 [R,L]
#all others
RewriteCond %{QUERY_STRING} ^(.*)(iframe=true)(.*)$
RewriteRule . /yourwp/index.php/forum/?%3 [R,L]

#p reserved in WP

RewriteCond %{QUERY_STRING} ^(.*)(iframe=true&)(.*)(p=)([0-9]+)(.*)?$

RewriteRule . /yourwp/index.php/forum/?%3post_id=%5%6 [R,L]

#all others

RewriteCond %{QUERY_STRING} ^(.*)(iframe=true)(.*)$

RewriteRule . /yourwp/index.php/forum/?%3 [R,L]

Change on lines

RewriteRule . /yourwp/index.php/forum/?%3post_id=%5%6 [R,L]

and

RewriteRule . /yourwp/index.php/forum/?%3 [R,L]

the relative iframe URL that need to point to your correct WP forum page (leave index.php in place).

To help understand, this is the correct .htaccess code for this online working example:

WP page forum URL (that contain and display the iframe in this case): https://www.axew3.com/w3/forum/

Resulting .htaccess code based on this will be:

#p reserved in WP
RewriteCond %{QUERY_STRING} ^(.*)(iframe=true&)(.*)(p=)([0-9]+)(.*)?$
RewriteRule . /w3/index.php/forum/?%3post_id=%5%6 [R,L]
#all others
RewriteCond %{QUERY_STRING} ^(.*)(iframe=true)(.*)$
RewriteRule . /w3/index.php/forum/?%3 [R,L]

#p reserved in WP

RewriteCond %{QUERY_STRING} ^(.*)(iframe=true&)(.*)(p=)([0-9]+)(.*)?$

RewriteRule . /w3/index.php/forum/?%3post_id=%5%6 [R,L]

#all others

RewriteCond %{QUERY_STRING} ^(.*)(iframe=true)(.*)$

RewriteRule . /w3/index.php/forum/?%3 [R,L]

To complete the redirect flow to the iframe phpBB, embedded into WP page, for phpBB email notification messages links to point to iframe follow also with these two steps (get ready files for phpBB 3.2 on bottom of this page):

For email notification links that you want to redirect to iframe forum page of WP, assuming we point to three main behaviors we are interested in, which are for example PM notifications, New posts and Topics on forum, we need to change so 3 phpBB files in this way:

open folder your-phpBB/phpBB/notification/type

on this folder, as working example, we go to open and so modify the following files:

pm.php, post.php, topic.php

on each file, you’ll find very similar code like this (in pm.php there is only one to change, on topic.php and post.php there are 4 or 5. Do not apply this edit to the last one string on post.php and topic.php):

'U_VIEW_MESSAGE' => generate_board_url() . '/ucp.' . $this->php_ext . "?i=pm&mode=view&p={$this->item_id}",

1	'U_VIEW_MESSAGE' => generate_board_url() . '/ucp.' . $this->php_ext . "?i=pm&mode=view&p={$this->item_id}",

you should change these urls, adding iframe=true& on each line, exactly after the ? char, like this:

'U_VIEW_MESSAGE' => generate_board_url() . '/ucp.' . $this->php_ext . "?iframe=true&i=pm&mode=view&p={$this->item_id}",

1	'U_VIEW_MESSAGE' => generate_board_url() . '/ucp.' . $this->php_ext . "?iframe=true&i=pm&mode=view&p={$this->item_id}",

Ready files for phpBB 3.2 zip:
notification-pm-post-topic-x_phpbb32_ready

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/