Embedded Iframe - Revision history

Asher: /* How to reliably transfer dates and other data from a booking widget on one page to a booking page embedded in an Frame on a different page */

2025-11-28T01:35:04Z

How to reliably transfer dates and other data from a booking widget on one page to a booking page embedded in an Frame on a different page

← Older revision		Revision as of 01:35, 28 November 2025
Line 75:		Line 75:
	var addUrlParamsToIframeSrcs = function() { const validParameters = ["checkin", "checkout", "numnight", "numadult", "numchild", "ownerid", "propid", "roomid", "referer", "lang", "group", "nogroup", "category1", "category2", "category3", "category4", "customParameter"]; const currentUrl = new URL(window.location.href); let parametersString = ""; validParameters.forEach(parameter => { const parameterValue = currentUrl.searchParams.get(parameter); if (parameterValue !== null) { parametersString += "&" + parameter + "=" + parameterValue; } } ); const iframes = document.getElementsByTagName("iframe"); for (let iframe of iframes) { let iframeSrc = iframe.getAttribute("data-src"); if (iframeSrc === null) { continue; } if (!iframeSrc.includes("?")) { iframeSrc += "?"; } iframeSrc += parametersString; iframe.setAttribute("src", iframeSrc) } }; addUrlParamsToIframeSrcs();		var addUrlParamsToIframeSrcs = function() { const validParameters = ["checkin", "checkout", "numnight", "numadult", "numchild", "ownerid", "propid", "roomid", "referer", "lang", "group", "nogroup", "category1", "category2", "category3", "category4", "customParameter"]; const currentUrl = new URL(window.location.href); let parametersString = ""; validParameters.forEach(parameter => { const parameterValue = currentUrl.searchParams.get(parameter); if (parameterValue !== null) { parametersString += "&" + parameter + "=" + parameterValue; } } ); const iframes = document.getElementsByTagName("iframe"); for (let iframe of iframes) { let iframeSrc = iframe.getAttribute("data-src"); if (iframeSrc === null) { continue; } if (!iframeSrc.includes("?")) { iframeSrc += "?"; } iframeSrc += parametersString; iframe.setAttribute("src", iframeSrc) } }; addUrlParamsToIframeSrcs();
	</script>		</script>
			</nowiki></span>
			</div>

			Wordpress script:
			<div style="background-color: #f8f9fa !important; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;">
			<span style="background-color: #f8f9fa; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;"><nowiki>
			<script>var addUrlParamsToIframeSrcs = function() { const validParameters = ["checkin", "checkout", "numnight", "numadult", "numchild", "ownerid", "propid", "roomid", "referer", "lang", "group", "nogroup", "category1", "category2", "category3", "category4", "customParameter"]; const currentUrl = new URL(window.location.href); let parametersString = ""; validParameters.forEach(parameter => { const parameterValue = currentUrl.searchParams.get(parameter); if (parameterValue !== null) { parametersString += "&" + parameter + "=" + parameterValue; } }); const iframes = document.getElementsByTagName("iframe"); for (let iframe of iframes) { let iframeSrc = iframe.getAttribute("src"); if (iframeSrc === null) { continue; } if (!iframeSrc.includes("?")) { iframeSrc += "?"; } iframeSrc += parametersString; iframe.setAttribute("src", iframeSrc) } }; addUrlParamsToIframeSrcs();</script>
	</nowiki></span>		</nowiki></span>
	</div>		</div>

Asher: /* How to reliably transfer dates and other data from a booking widget on one page to a booking page embedded in an Frame on a different page */

2024-09-26T07:42:34Z

How to reliably transfer dates and other data from a booking widget on one page to a booking page embedded in an Frame on a different page

← Older revision		Revision as of 07:42, 26 September 2024
Line 73:		Line 73:
	<span style="background-color: #f8f9fa; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;"><nowiki>		<span style="background-color: #f8f9fa; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;"><nowiki>
	<script>		<script>
	var addUrlParamsToIframeSrcs = function() { const validParameters = ["checkin", "checkout", "numnight", "numadult", "numchild", "ownerid", "propid", "roomid", "referer~~", "redirect~~", "lang", "group", "nogroup", "category1", "category2", "category3", "category4", "customParameter"]; const currentUrl = new URL(window.location.href); let parametersString = ""; validParameters.forEach(parameter => { const parameterValue = currentUrl.searchParams.get(parameter); if (parameterValue !== null) { parametersString += "&" + parameter + "=" + parameterValue; } }); const iframes = document.getElementsByTagName("iframe"); for (let iframe of iframes) { let iframeSrc = iframe.getAttribute("data-src"); if (iframeSrc === null) { continue; } if (!iframeSrc.includes("?")) { iframeSrc += "?"; } iframeSrc += parametersString; iframe.setAttribute("src", iframeSrc) } }; addUrlParamsToIframeSrcs();		var addUrlParamsToIframeSrcs = function() { const validParameters = ["checkin", "checkout", "numnight", "numadult", "numchild", "ownerid", "propid", "roomid", "referer", "lang", "group", "nogroup", "category1", "category2", "category3", "category4", "customParameter"]; const currentUrl = new URL(window.location.href); let parametersString = ""; validParameters.forEach(parameter => { const parameterValue = currentUrl.searchParams.get(parameter); if (parameterValue !== null) { parametersString += "&" + parameter + "=" + parameterValue; } } ); const iframes = document.getElementsByTagName("iframe"); for (let iframe of iframes) { let iframeSrc = iframe.getAttribute("data-src"); if (iframeSrc === null) { continue; } if (!iframeSrc.includes("?")) { iframeSrc += "?"; } iframeSrc += parametersString; iframe.setAttribute("src", iframeSrc) } }; addUrlParamsToIframeSrcs();
	</script>		</script>
	</nowiki></span>		</nowiki></span>

Asher: /* How to reliably transfer dates and other data from a booking widget on one page to a booking page embedded in an Frame on a different page */

2023-11-27T06:10:45Z

How to reliably transfer dates and other data from a booking widget on one page to a booking page embedded in an Frame on a different page

← Older revision		Revision as of 06:10, 27 November 2023
Line 24:		Line 24:
	Consider opening the booking page in a new tab instead of embedding it in an iFrame.		Consider opening the booking page in a new tab instead of embedding it in an iFrame.

	~~If you do want to use an iFrame you can use following method to overcome the issue:~~		If you do want to use an iFrame you can use following method to overcome the issue. This solution passes the widget data directly to the page holding the iFrame and relies on a special script installed on the page to pass the parameters to the iFrame. The iFrame then loads the booking page with the data from the widget.

	If you do want to use an iFrame you can use following method to overcome the issue. This solution passes the widget data directly to the page holding the iFrame and relies on a special script installed on the page to pass the parameters to the iFrame. The iFrame then loads the booking page with the data from the widget.

	This avoids the use of cookies to pass the data and should not be blocked by security or privacy settings.		This avoids the use of cookies to pass the data and should not be blocked by security or privacy settings.

Asher: /* How to reliably transfer dates and other data from a booking widget on one page to a booking page embedded in an Frame on a different page */

2023-11-27T06:09:32Z

How to reliably transfer dates and other data from a booking widget on one page to a booking page embedded in an Frame on a different page

← Older revision		Revision as of 06:09, 27 November 2023
Line 66:		Line 66:
	*Add the following script directly after the iFrame end tag </iFrame>		*Add the following script directly after the iFrame end tag </iFrame>

			Example iframe:
	Example:
	<div style="background-color: #f8f9fa !important; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;">		<div style="background-color: #f8f9fa !important; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;">
	<span style="background-color: #f8f9fa; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;"><nowiki><iFrame data-src="https://beds24.com/booking2.php?propid=12345&referer=iFrame" width="800" height="2000" style="max-width:100%;border:none;overflow:auto;"><p><a href="https://beds24.com/booking2.php?propid=12345&referer=iFrame" title="Book Now">Book Now</a></p></iFrame></nowiki></span>		<span style="background-color: #f8f9fa; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;"><nowiki><iFrame data-src="https://beds24.com/booking2.php?propid=12345&referer=iFrame" width="800" height="2000" style="max-width:100%;border:none;overflow:auto;"><p><a href="https://beds24.com/booking2.php?propid=12345&referer=iFrame" title="Book Now">Book Now</a></p></iFrame></nowiki></span></div>


			Script:
			<div style="background-color: #f8f9fa !important; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;">
			<span style="background-color: #f8f9fa; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;"><nowiki>
	<script>		<script>
	~~<nowiki>~~
	var addUrlParamsToIframeSrcs = function() { const validParameters = ["checkin", "checkout", "numnight", "numadult", "numchild", "ownerid", "propid", "roomid", "referer", "redirect", "lang", "group", "nogroup", "category1", "category2", "category3", "category4", "customParameter"]; const currentUrl = new URL(window.location.href); let parametersString = ""; validParameters.forEach(parameter => { const parameterValue = currentUrl.searchParams.get(parameter); if (parameterValue !== null) { parametersString += "&" + parameter + "=" + parameterValue; } }); const iframes = document.getElementsByTagName("iframe"); for (let iframe of iframes) { let iframeSrc = iframe.getAttribute("data-src"); if (iframeSrc === null) { continue; } if (!iframeSrc.includes("?")) { iframeSrc += "?"; } iframeSrc += parametersString; iframe.setAttribute("src", iframeSrc) } }; addUrlParamsToIframeSrcs();		var addUrlParamsToIframeSrcs = function() { const validParameters = ["checkin", "checkout", "numnight", "numadult", "numchild", "ownerid", "propid", "roomid", "referer", "redirect", "lang", "group", "nogroup", "category1", "category2", "category3", "category4", "customParameter"]; const currentUrl = new URL(window.location.href); let parametersString = ""; validParameters.forEach(parameter => { const parameterValue = currentUrl.searchParams.get(parameter); if (parameterValue !== null) { parametersString += "&" + parameter + "=" + parameterValue; } }); const iframes = document.getElementsByTagName("iframe"); for (let iframe of iframes) { let iframeSrc = iframe.getAttribute("data-src"); if (iframeSrc === null) { continue; } if (!iframeSrc.includes("?")) { iframeSrc += "?"; } iframeSrc += parametersString; iframe.setAttribute("src", iframeSrc) } }; addUrlParamsToIframeSrcs();
	~~</nowiki>~~
	</script>		</script>
			</nowiki></span>
	</div>		</div>

Lesley: /* Using an iFrame */

2023-02-01T08:28:46Z

Using an iFrame

← Older revision		Revision as of 08:28, 1 February 2023
Line 9:		Line 9:

	=Using an iFrame=		=Using an iFrame=
	~~Ising~~ iFrames are convenient but may have a sub optimal usability experience.		Using iFrames are convenient but may have a sub optimal usability experience.

	Consider opening the booking page in a new tab instead of embedding it in an iFrame.		Consider opening the booking page in a new tab instead of embedding it in an iFrame.

Annette at 16:44, 19 August 2022

2022-08-19T16:44:56Z

← Older revision		Revision as of 16:44, 19 August 2022
Line 32:		Line 32:
	<span style="color:#fe746c;“ >{{#fas:exclamation-triangle}} </span>The solution requires that your website can have additional parameters added to your page URL without affecting their ability to load.		<span style="color:#fe746c;“ >{{#fas:exclamation-triangle}} </span>The solution requires that your website can have additional parameters added to your page URL without affecting their ability to load.

	The principle here is to open your URL containing the iFrame directly with the booking page parameters added to your URL after a ?. The supplied script installed on your page will pass these URL parameters through to the iFrame which will apply them to the booking page within the iFrame.		<span style="color:#019cde; font-size: 150%;“ >{{#fas:info-circle}} </span> The principle here is to open your URL containing the iFrame directly with the booking page parameters added to your URL after a ?. The supplied script installed on your page will pass these URL parameters through to the iFrame which will apply them to the booking page within the iFrame.

	'''Step 1: Customize the widget'''		'''Step 1: Customize the widget'''

Annette: /* Bottom of the page is blank */

2022-08-19T16:44:08Z

Bottom of the page is blank

← Older revision		Revision as of 16:44, 19 August 2022
Line 157:		Line 157:
	==Page is insecure==		==Page is insecure==
	Most likely you have a link to an image with is not securely hosted.		Most likely you have a link to an image with is not securely hosted.

	~~==Bottom of the page is blank==~~
	When a long page inside an iFrame changes to a shorter page, the guest viewing the page might be left at the bottom looking at what appears to be a <b>blank page</b>. [[Scroll_iFrame_to_the_top_of_the_page\|Read this help document]] to learn about solutions for this problem.

	==Display problems on mobile==		==Display problems on mobile==

Lesley: /* Multiple Properties */

2022-06-07T07:20:58Z

Multiple Properties

← Older revision		Revision as of 07:20, 7 June 2022
Line 87:		Line 87:
	When a guest clicks on "Book" for one of the listed properties they will be taken to the property booking page where they can book.		When a guest clicks on "Book" for one of the listed properties they will be taken to the property booking page where they can book.

	If you you have embedded property booking pages as well and want to redirect the guest to this page go to {#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING PAGE > BEHAVIOUR and set "Booking Redirect" = "Multiple Property Only" and enter the URL of the property booking page followed by the redirect destination in "Booking Redirect Url" like this:		If you you have embedded property booking pages as well and want to redirect the guest to this page go to {{#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING PAGE > BEHAVIOUR and set "Booking Redirect" = "Multiple Property Only" and enter the URL of the property booking page followed by the redirect destination in "Booking Redirect Url" like this:

	<code><nowiki> https://beds24.com/booking.php?propid=12341&redirect=https://www.mywebsite/propertyA</nowiki></code>		<code><nowiki> https://beds24.com/booking.php?propid=12341&redirect=https://www.mywebsite/propertyA</nowiki></code>

Markkinchin: /* How to reliably transfer dates and other data from a booking widget on one page to a booking page embedded in an Frame on a different page */

2022-01-04T17:43:47Z

How to reliably transfer dates and other data from a booking widget on one page to a booking page embedded in an Frame on a different page

← Older revision		Revision as of 17:43, 4 January 2022
Line 68:		Line 68:

	Example:		Example:


	<div style="background-color: #f8f9fa !important; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;">		<div style="background-color: #f8f9fa !important; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;">
	<span style="background-color: #f8f9fa; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;"><nowiki><iFrame data-src="https://beds24.com/booking2.php?propid=12345&referer=iFrame" width="800" height="2000" style="max-width:100%;border:none;overflow:auto;"><p><a href="https://beds24.com/booking2.php?propid=12345&referer=iFrame" title="Book Now">Book Now</a></p></iFrame></nowiki></span>		<span style="background-color: #f8f9fa; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;"><nowiki><iFrame data-src="https://beds24.com/booking2.php?propid=12345&referer=iFrame" width="800" height="2000" style="max-width:100%;border:none;overflow:auto;"><p><a href="https://beds24.com/booking2.php?propid=12345&referer=iFrame" title="Book Now">Book Now</a></p></iFrame></nowiki></span>

Markkinchin: /* How to reliably transfer dates and other data from a booking widget on one page to a booking page embedded in an Frame on a different page */

2022-01-04T17:43:32Z

How to reliably transfer dates and other data from a booking widget on one page to a booking page embedded in an Frame on a different page

← Older revision		Revision as of 17:43, 4 January 2022
Line 72:		Line 72:
	<div style="background-color: #f8f9fa !important; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;">		<div style="background-color: #f8f9fa !important; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;">
	<span style="background-color: #f8f9fa; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;"><nowiki><iFrame data-src="https://beds24.com/booking2.php?propid=12345&referer=iFrame" width="800" height="2000" style="max-width:100%;border:none;overflow:auto;"><p><a href="https://beds24.com/booking2.php?propid=12345&referer=iFrame" title="Book Now">Book Now</a></p></iFrame></nowiki></span>		<span style="background-color: #f8f9fa; border: 1px solid #eaecf0;border-radius: 2px; padding: 1px 4px;"><nowiki><iFrame data-src="https://beds24.com/booking2.php?propid=12345&referer=iFrame" width="800" height="2000" style="max-width:100%;border:none;overflow:auto;"><p><a href="https://beds24.com/booking2.php?propid=12345&referer=iFrame" title="Book Now">Book Now</a></p></iFrame></nowiki></span>


	<script>		<script>
	<nowiki>		<nowiki>