Embedded Iframe: Difference between revisions
Jump to navigation
Jump to search
| (3 intermediate revisions by the same user not shown) | |||
| 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. 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 | |||
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. | ||
| Line 66: | Line 64: | ||
*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> | ||
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 | |||
</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> | |||
</div> | </div> | ||