Notifications
Clear all

Auto resize does not work for in-app browser

Page 1 / 3

Posts: 11
Topic starter
(@mayumibk)
Active Member
Joined: 2 years ago

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

13 Replies
TinyWebGallery
Posts: 635
Admin
(@admin)
Administrator
Joined: 13 years ago

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"{}} - targetOrigin: *"

l: LOG: "Advanced iframe: postMessage received: {"aitype"{}} - 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

 

Reply
1 Reply
(@mayumibk)
Joined: 2 years ago

Active Member
Posts: 11

@admin 

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

Reply
Posts: 11
Topic starter
(@mayumibk)
Active Member
Joined: 2 years ago
Reply
TinyWebGallery
Posts: 635
Admin
(@admin)
Administrator
Joined: 13 years ago

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

Reply
2 Replies
(@mayumibk)
Joined: 2 years ago

Active Member
Posts: 11

@admin 

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

Reply
(@mayumibk)
Joined: 2 years ago

Active Member
Posts: 11

@admin 

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?

Reply
TinyWebGallery
Posts: 635
Admin
(@admin)
Administrator
Joined: 13 years ago

To be 100% sure you should add a "version" number. like i mentioned before. So do you still have to problem? 

Best regards,

Michael

Reply
Page 1 / 3