Iframe Resizing: Difference between revisions
Jump to navigation
Jump to search
Markkinchin (talk | contribs) |
No edit summary |
||
| (11 intermediate revisions by 2 users not shown) | |||
| Line 2: | Line 2: | ||
[[Category:Booking_Page]] | [[Category:Booking_Page]] | ||
[[Category:Widgets]] | [[Category:Widgets]] | ||
[[Category:Developers]] | |||
<div class="heading">Resize Iframe</div> | |||
This page explains how to use the iFrame Resizer | This page explains how to use the iFrame Resizer | ||
'''Requires:''' Ability to upload a file and add code to the html of your web site | <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 | ||
<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 == | == Introduction == | ||
This is a third party code project which can be installed on your booking page and your web site to automatically resize the booking page iframe so it shows without using scroll bars. | This is a third party code project which can be installed on your booking page and your web site to automatically resize the booking page iframe so it shows without using scroll bars. | ||
| Line 9: | Line 14: | ||
Beds24 can not support or answer questions about this code, for help please refer to the developer site: https://github.com/davidjbradshaw/iframe-resizer | Beds24 can not support or answer questions about this code, for help please refer to the developer site: https://github.com/davidjbradshaw/iframe-resizer | ||
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. | <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 == | == Beds24.com == | ||
Add the following to the menu SETTINGS | 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/4.2.10/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. | 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. | ||
| Line 22: | Line 27: | ||
Refer to the developers web site for a full set of options, instructions and troubleshooting. | 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/ | *Download the iframeResizer.contentWindow.min.js file from the developer site or from https://beds24.com/include/iframeresizer/4.2.10/iframeResizer.min.js | ||
*Upload the file to your web server and place it in the same directory as your web page. | *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. | *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 | Make sure to use the same version files on the booking page and your web page. (in this example 4.2.10) | ||
If you prefer, you can set a fixed iframe width in pixels rather than a percentage width. | 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. | There are many more options available for iframe-resizer, refer to the developer site. This example shows a minimum setup. | ||