Dynamically setting iframe src value on page load

Ask the community
,
1

Hi Folks,

I’m new to Wix and having trouble with dynamically setting the src of an iframe I have in a custom HTML block.
I want to set the src to a page on one of our domains and pass on the querystring from the calling page.

When loading the page, the console shows the captured value so I know that bit is working.
However, the iframe does not load the requested page. The code I have seems like it should work - the function does run - but doesn’t do what I expect it to.
I’ve been searching around as much as I can but cannot find a working solution.

What am I missing?
Or am I going about this the wrong way?

Thanks for any help.
Neil.

I have added a custom code block with :

<iframe id="galleryframe" width="100%" height="100%" src="">

In Dev mode, I have added this code:
import wixLocation from “wix-location” ;
$w.onReady (() => {
const id = wixLocation.query;
console.log(id);
$w(“#galleryframe”).src=“https://mysite.com/mypage.php?”+id;
});
2

Check the post message - Post Message | Velo

This allows communication between the velo and the sand boxed HTML component.

3

Resolved. I was sort of getting there but not.

For anyone needing help on this:

HTML block - styling removes the scrollbars from the final page. Wix puts an html element inside an iframe so this stops it showing the scrollbars:
Create a standard HTML page, add

  <style>
    html, body { margin: 0; padding: 0; overflow: hidden;   height: 100%; width: 100%; }
    iframe {border: 0; width: 100%; height: 100%; display: block;}
</style>

<body>
  <iframe id="myframe" src=""></iframe>
<script>
    window.addEventListener("message", (event) => {
      document.getElementById("myframe").src = event.data;
    });
  </script>
</body>

Page code:

import wixLocation from ‘wix-location’;
$w.onReady(function () {
const queryString = new URLSearchParams(wixLocation.query).toString();
const baseUrl = “https://mysite.com/mypage.php”;
const finalUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
$w(“#html1”).postMessage(finalUrl);
});
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.