Can't pass my parameters in iframe

Question

I have a parent page with a form in an iframe: https://profiel.pelckmansuitgevers.be/?email=dennis@hybridmedia.be

All the fields of the form should be prefilled. But that doesn't work anymore.

If you add the email parameter to the url, this parameter is added to the source of the iframe.

But on my iframe, I cannot get the email parameter. I'm doing this in the iframe:

var urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('email')) {
    var email = urlParams.get('email');

    //all my code here...
}

It seems that urlParams is empty.

But when I open the page in incognito mode (chrome) and do a hard refresh, all the fields are prefilled. So it works in this case.

Does anyone know what the problem is? Maybe that my script is trying to receive the email parameter but that this doesn't exist at that moment? Or something else?

Thanks!

for my part, i just clicked on your link https://profiel.pelckmansuitgevers.be/?email=dennis@hybridmedia.be and all the fields in the iframe are correctly filled. And i'm in Chrome, not in incognito mode — PierreN, Jul 11 '18 at 07:35

PierreN · Answer 1 · 2018-07-11T09:50:44.327

0

You seem to have 2 problems :

1) your iframe is in a subdomain, and you don't send the email parameter in the iframe url. So some browsers like Google Chrome won't be able to access the email.

Sample code for solving this problem :

  var loc = window.location.toString(),
  params = loc.split('?')[1],
  iframe = document.getElementById('updateform');

  iframe.src = "https://pelckmans.houston-1.hybridmedia.be/update/pelckmansuitgevers/" + '?' + params + '&v=' + Date.now();

2) JS cache problems

You can solve this with changing

<script src="js/prefill.js"></script>

with

    <script>document.write("<script type='text/javascript' src='js/prefill.js.php?v=" + Date.now() + "'><\/script>");</script>

in your iframe page https://pelckmans.houston-1.hybridmedia.be/update/pelckmansuitgevers/

This problem happens often when you develop JS and includes this in a .js file.

The browser caches the js...a way to solve this is for instance to add a timestamp after the js filename, or a version number like i did in my code.

You can find more ways to do this in this thread How to append timestamp to the java script file in <script> tag url to avoid caching

edited Jul 11 '18 at 09:50

answered Jul 11 '18 at 07:37

PierreN

968
4
11

I've added the parameter to script but that doesn't work :( – Dennis Jul 11 '18 at 07:41
you have also to change the iframe url !! ;-) add "?version=2" in the iframe url. I've updated my answer above – PierreN Jul 11 '18 at 07:42
No sorry, both url's are changed. – Dennis Jul 11 '18 at 07:46
It appeared one time. After a refresh, none of the fields are prefilled again. – Dennis Jul 11 '18 at 07:47
Load https://profiel.pelckmansuitgevers.be/?email=dennis@hybridmedia.be&version=2 in your browser ("email=dennis@hybridmedia.be&version=2") ...should be ok now – PierreN Jul 11 '18 at 07:47
If you keep refreshing your page, it sometimes prefilled, but most of the time not. – Dennis Jul 11 '18 at 07:49
If you check in incognito mode and that it works, then it means that for your users, it will work...the problem is only on your computer – PierreN Jul 11 '18 at 07:50
Other users have the same problem :( It seems that this problem is only is Chrome. It works in Firefox and Safari. – Dennis Jul 11 '18 at 07:56
arg ;-( did you add "&version=2" in your main page ?ie "email=dennis@hybridmedia.be&version=2" ? – PierreN Jul 11 '18 at 07:58
How are generated your pages ? are they static html pages, or generated in PHP ? The problem can come also from here – PierreN Jul 11 '18 at 08:05
All the pages are static pages. It's very weird. Because it works perfectly in Safari and Firefox. And works sometimes in Chrome. When I do this in prefill.js (so in the iframe): console.log(window.location.href); I get the iframe URL with the ?v2 parameter, but not with the email parameter. But if you inspect the iframe source, you'll see the email parameter. – Dennis Jul 11 '18 at 08:25
it means in this case that prefill.js is cached...change version=2 with version=3 and retry your console.log... If you have PHP installed in your server, you can rename prefill.js in prefill.js.php, will solve this problem – PierreN Jul 11 '18 at 08:28
No sorry, that didn't do the trick: https://profiel.pelckmansuitgevers.be/?email=dennis@hybridmedia.be – Dennis Jul 11 '18 at 08:33
try to include the iframe with dynamic version id like you did with prefill.js...you have sample code in stackoverflow thread in gave you in my answer – PierreN Jul 11 '18 at 08:42
I've done that but it doesn't work on my computer. Though it works on my phone's 4g. But it also doesn't work on my colleagues computer (in chrome). Still Safari and Firefox works perfectly. But why don't I get the full url when I do window.location.href ? The email parameter isn't in the url. Doesn't that mean that this parameter isn't available yet when prefill.js is loaded? – Dennis Jul 11 '18 at 08:56
as the email is in the url, yes prefill.js loads this...clearly it's a problem of cache (it works on your phone 4g), all must change with dynamic version id (if you don't use PHP but static page) : 1) main page 2) iframe url 3) prefill js url – PierreN Jul 11 '18 at 08:59
At this moment, all the url's have a dynamic version id with Data.now(); – Dennis Jul 11 '18 at 09:04
The iframe url is: https://pelckmans.houston-1.hybridmedia.be/update/pelckmansuitgevers/?v=2&email=dennis@hybridmedia.be&version=1531300372210 At the end is another dynamic version id – Dennis Jul 11 '18 at 09:13
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/174781/discussion-between-pierre-and-dennis-perremans). – PierreN Jul 11 '18 at 09:14

Can't pass my parameters in iframe

1 Answers1