Integrate iframe sizer script

This an example how to use the iframe sizer script of https://github.com/davidjbradshaw/iframe-resizer. Sometimes you want to include websites that already use a resizer script that does send the size to the parent with postMessage. Advanced iframe is able also to deal with such data.

If the size is sent automatically to the parent you can use the ai_post_message_converter_template.js in the js folder as base. Then you copy this file to the advanced-iframe-custom folder in the plugins folder of WordPress. Rename the file to ai_post_message_converter_<id>.js where the id is the id of you iframe. Open the file and follow the instructions there. For the iframe-resizer you can use:

function aiConvertPostMessage(event) {
var msgId = '[iFrameSizer]';
var msgIdLen = msgId.length;
var msgData = event.data.substr(msgIdLen).split(':');
// read the remote data and than return the new structure like shown above.
var newData = { aitype:"height", id:msgData[0], height:msgData[1], width:msgData[2]};
return { data: JSON.stringify(newData)}
}


Set use_post_message="debug" in the shortcode to see the received message in the Javascript console.

The iframe resizer needs so additional action. The script has to be initialized by sending a special message to the iframe. This can also be done with advanced iframe. You can add an additional js file with an custom onload method and call it.

For this example I created the file "custom_iframesizer.js" on the "add/include files" tab in the plugin and add there:

function customOnLoad(obj) {
var msgId = "[iFrameSizer]";
var msg = obj.id + ":8:false:true:32:true:true:null:offset:null:null:0)";
obj.contentWindow.postMessage( msgId + msg, "*" );
}


After that you call it in the onload attribute: onload="customOnLoad(this);

Below you see the working example. Additionally scrolling="no" was added because depending on the browser a scrollbar of only a few pixel is shown which is actually not needed. Clicking on "Toggle Content" shows the resize the best:

[advanced_iframe src="//www.mdempfle.de/examples/iframe-resizer/example/frame.content.html" width="100%" height="100" additional_js="//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe-custom/custom_iframesizer.js" onload="customOnLoad(this);" id="iframesizer" use_post_message="debug" scrolling="no"]