I have a form hosted elsewhere which I am embedding into my wix website. When the user completes the first part of the form and clicks a button, I hide some elements and show the next step which is considerably smaller than the first section. So the height of the html element becomes smaller but the focus remains at the bottom of the page (that’s where the button was in the first section of the form but has moved up as the next section is much smaller). The users think something went wrong as they are now staring at a blank page.
In my form code, I tried scrolling to the top but because it is hosted in an iframe, it simply means scrolling to the top of the html element which doesn’t do anything. I want the focus back to the top.
I have tried doing a postMessage() from my form to the page but that didn’t work.
Questions:
-
Is there a way to notify the page code that the iframe height has changed? OR
-
Is there a way to make the page scroll up automatically to keep the html element in focus? OR
-
Is there any other way to accomplish this?
Any help/direction would be greatly appreciated. I have run out of ideas.
Thank you,
Babar
- Add your HTML-Component onto your page.
- Add the following code into your HTML-Component…
<html>
<head>
<title></title>
</head>
<body>
<iframe id="iFrame"
title="iFrame Example"
width="300"
height="200"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>
<button class="xxx", id="myButton", type="button", onclick="myFunction()">Zoom</button>
<script>
var element = document.getElementById("iFrame");
console.log(element);
console.log("Element-ID: ", element.id);
console.log("Element-Width: ", element.width);
console.log("Element-Height: ", element.height);
console.log("-------------------");
console.log("Client-Width: ", element.clientWidth);
console.log("textContent: ", element.textContent);
console.log("Length: ", element.length);
console.log("Text-Length: ", element.textLength);
console.log("Scroll-Top: ", element.scrollTop);
console.log("Scroll-Left: ", element.scrollLeft);
console.log("Scroll-Height: ", element.scrollHeight);
console.log("Scroll-Width: ", element.scrollWidth);
console.log("Scroll-innerHTML: ", element.innerHTML);
console.log("Namespace-URI: ", element.namespaceURI);
console.log("Local-Name: ", element.localName);
console.log(element.height);
function myFunction() {
element.height = 600;
element.width = 800;
console.log("-------------------")
console.log("Element-Width: ", element.width);
console.log("Element-Height: ", element.height);
}
</script>
</body>
</html>
- Save the HTML-CODE.
- Publish your website.
- Inspect the whole code and learn from it.
…
Next steps would be…
- Establish communication between iFrame and your page
- Start DATA-TRANSFER between page and iFrame → dynamic actions.
The main issue is establishing the communication between the page and iFrame. The reason is that this iframe will be hosted in another iFrame by wix. So when I would do something like window.parent.postMessage(), the page will not listen to it. Need some help setting up that communication.
Thank you!