Скачать или смотреть How to Post Page URL to a Hidden Input in an Embedded iframe Form

Learn how to collect the current page URL and post it to an embedded `iframe` form using jQuery and JavaScript, overcoming common CORS restrictions.
---
This video is based on the question https://stackoverflow.com/q/74152285/ asked by the user 'hue' ( https://stackoverflow.com/u/20295480/ ) and on the answer https://stackoverflow.com/a/74155538/ provided by the user 'barneyp' ( https://stackoverflow.com/u/3805537/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Can a jQuery script in an HTML page post page URL to embedded iframe form?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Post Page URL to a Hidden Input in an Embedded iframe Form

When you're embedding a form within an iframe on your website, you might want to collect additional information like the current page URL. This can be particularly useful for tracking user interactions and understanding where your form submissions are coming from. However, achieving this can be tricky due to the security regulations, particularly those related to Cross-Origin Resource Sharing (CORS).

In this guide, we will address how to collect the current page URL and post it to a hidden input in the embedded iframe form, as well as discuss some potential challenges and alternative solutions.

Collecting the Current Page URL

To capture the current page URL, you can use a simple JavaScript snippet. Here’s how it looks:

[[See Video to Reveal this Text or Code Snippet]]

In this code, we are setting the value of an input field with the ID zf_referrer_name to the current page URL when the window loads. This is a great first step in sharing context with the embedded form.

Posting URL to the Hidden Input in iframe

1. Adding an onLoad Event to the iframe

The next step involves adding an onLoad event handler to your iframe. This way, you can call a JavaScript function to update the hidden input field in your embedded form once the iframe has fully loaded.

Here’s how you might implement this:

[[See Video to Reveal this Text or Code Snippet]]

This code uses the updateReferrerField function to set the zf_referrer_name input field's value inside the iframe.

2. Potential CORS Restrictions

While adding the onLoad event is straightforward, it's important to note that you may encounter CORS issues. Browsers enforce security measures that prevent scripts in one domain from accessing content in another domain. If the iframe is hosted on a different domain from your website, the above method won't work due to these restrictions.

Alternative Method: Using document.referrer

If you are unable to access the iframe DOM due to CORS, there’s an alternative approach by making use of the document.referrer property, which gives you the URL of the page that linked to the current page (which would be your form):

[[See Video to Reveal this Text or Code Snippet]]

3. Pass URL as a URL Parameter

Another alternative is to modify the form's source URL (src) to include the page URL as a query parameter. You can append the referrer to the iframe source like this:

[[See Video to Reveal this Text or Code Snippet]]

Make sure to check if the form provider can utilize prefilled fields through URL parameters.

Conclusion

In summary, while posting the current page URL to an embedded iframe form is technically achievable, you must navigate CORS issues that could restrict direct access to the iframe content. Utilizing the document.referrer property or appending the referrer as a URL parameter can serve as effective workarounds.

Incorporating these techniques into your website can enhance your form's capability to gather important data while adhering to security standards.

If you found this guide useful, feel free to share and leave your comments below!