Hi Michael,
After using the free version of the plugin for long (thanks!), I finally purchased the Pro version for auto height resize 🙂
I am embedding an external-hosted hotel booking engine into this page;
https://cupoftea-takayama.net/ensemble/reserve/
This auto-resize works fine as far as I open the page with iOS Safari and Chrome. However, when trying to open the page with in-app browser such as Instagram and Facebook, the contents is cut off in the middle of the page, like attached.
Most of the visitors of this site come from the link on Instagram bio using in-app browsers. So, we are losing lots of reservations now because they aren't able to see the full booking page. Could you please support me fix this issue?
I am going with the external option and the shortcode in use is like this;
advanced_iframe use_shortcode_attributes_only="true" src="https://beds24.com/booking2.php?propid=123477&layout=6" width="100%" height="100vh" scrolling="no" id="beds24_iframe" resize_on_element_resize="#formlook" enable_external_height_workaround="true"
Danke!
Mayumi
Hi,
can you please call https://cupoftea-takayama.net/ensemble/reserve/?aiEDC=true on the device where you have the problem and compare it on chrome for example. The red bar at the bottom shows some debug infos.
Also check the error you have jQuery(...).slick is not a function
you see something like:
r: LOG: "Advanced iframe: aiInitElementResize_beds24_iframe"
r: LOG: "Advanced iframe: aiGetIframeWidth"
r: LOG: "Advanced iframe: postMessage sent: {"aitype":"height","height":3285,"width":1708,"id":"beds24_iframe","anchor":-1,"data":{}} - targetOrigin: *"
l: LOG: "Advanced iframe: postMessage received: {"aitype":"height","height":3285,"width":1708,"id":"beds24_iframe","anchor":-1,"data":{}} - origin: https://beds24.co m"
l: LOG: "Advanced iframe: aiResizeIframeHeightById - id: beds24_iframe, nHeight: 3285"
what is done when you do it on the browser you see the error?
bzw: resize_on_element_resize="#formlook" is not used in the the shortcode. you need to set it in the administration directly and then it is saved to ai_external.js.
Best regards,
Michael
Hi Michael,
Thanks for your help!
I am getting the attached error only with Instagram's WebView, saying "the id of the parent and the external workaround are different!", while no errors on the other native browsers.
The js file is here https://cupoftea-takayama.net/guesthouse/wp-content/plugins/advanced-iframe/js/ai_external.js and 'id="beds24_iframe"' is specified in the shortcode. Looks like the ids match. What do you think am I missing?
Also, thank you for your by-the-way pointing out! I was wondering if the resize_on_element_resize option is actually working. I'd like to fix it, but don't understand what you mean by "set in the administration".
Does this mean to override the lines below on the js file manually? Kinda bit scary 😛
if (typeof resize_on_element_resize === 'undefined') {
var resize_on_element_resize = '';
Regards,
Mayumi
Sorry, the ai file is actually here
https://cupoftea-takayama.net/ensemble/wp-content/plugins/advanced-iframe/js/ai_external.js
Regards
Hi,
In the administration means -> go to the wordpress administration -> enter "resize_on_element_resize" in the search field. Then the option you should use is highlighted. Save.
What I can think of is that in the inapp browser the js is cached.
So include it ...e/js/ai_external.js?ver=21312. Maybe the cached version still has the default before you changed the id.
Best regards,
Michael
Thanks Michael.
After including the latest version of js, the error mentioning ID disappeared. However, the embedded content is still cut off at the middle of the page only with Instagram in-app browser ;(
So, it looked like the auto-resize issue had nothing to do with the error I saw. What should I check next?
Regards,
Mayumi
Regarding "Resize on element resize", I've already set directly in the admin, but it's not working.
Looks like the parameter I've put in admin is not correctly saved in the .js file, as you can see below.
https://cupoftea-takayama.net/ensemble/wp-content/plugins/advanced-iframe/js/ai_external.js
Is there any way to force the .js file load the updated value?
To be 100% sure you should add a "version" number. like i mentioned before. So do you still have to problem?
Best regards,
Michael
