Changes

Jump to navigation Jump to search

Iframe Resizing

346 bytes added, 15:16, 18 June 2020
no edit summary
[[Category:Booking_Page]]
[[Category:Widgets]]
[[Category:Developers]]
<div class="heading">Resize Iframe</div>
This page explains how to use the iFrame Resizer
<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>'''Requires:''' Ability to upload a file and add code to the html of your web site == NOTE ==This instruction is for an old version of iFrame Resizer. We suggest using the latest version as documented here https://github.com/davidjbradshaw/iframe-resizer
<span style="color:#fe746c;“ >{{#fas:exclamation-triangle}} </span> This instruction is for version 4.2.10 of iFrame Resizer. There may be a newer version as documented here https://github.com/davidjbradshaw/iframe-resizer
== Introduction ==
Beds24 can not support or answer questions about this code, for help please refer to the developer site: https://github.com/davidjbradshaw/iframe-resizer
<span style="color:#fe746c;“ >{{#fas:exclamation-triangle}} </span> It has been reported that this solution can cause security warnings in some browsers concerning cross domain scripts. A better solution would be to use a proxy so all scripts use the same domain.
== Beds24.com ==
Add the following to the menu {{#fas:cog}} (SETTINGS -) > BOOKING ENGINE > PROPERTY BOOKING PAGE -> DEVELOPER "Insert in HTML head"
<code><script type="text/javascript" src="include/iframeresizer/34.52.310/iframeResizer.contentWindow.min.js"></script> </code>
If you want to use a more recent version, you can host the file externally and include it with a full URL, make sure to use https:// to avoid insecure content warnings.
Refer to the developers web site for a full set of options, instructions and troubleshooting.
*Download the iframeResizer.contentWindow.min.js file from the developer site or from https://beds24.com/include/iframeresizer/34.52.310/iframeResizer.min.js
*Upload the file to your web server and place it in the same directory as your web page.
*Remove any height parameter from your booking page iframe and add the script after the iframe, if necessary change the src path to the location of your iframeResizer.min.js file.
<code> <iframe src="https://beds24.com/booking.php?propid=3103" width="100%" scrolling="no"></iframe></code>
<code> <script type="text/javascript" src="iframeResizer.min.js"></script> </code><code><script type="text/javascript"> iFrameResize(); </script></code>
Make sure to use the same version files on the booking page and your web page. (in this example 34.52.310)
If you prefer, you can set a fixed iframe width in pixels rather than a percentage width.
There are many more options available for iframe-resizer, refer to the developer site. This example shows a minimum setup.

Navigation menu