Allow clicks to pass through HTML iFrame to content behind it

Ask the community
,
1

i hope you are doing well guys,

i have an html iframe that requires to take the full screen width/height.
how can i allow clicks to pass through the frame into the the wix page?

i cant resize the iframe to be only on the object.
here is the example: (the eye in the object)

2804×1300 429 KB

i cant resize the iFrame to fit the eye because the code for it requires the page height/width and cursor y, x coords. (the eye follow the cursor)
i tried using a different method where i send the page height/width from the Wix Code to the HTML iFrame, but that didn’t work as it needs live updates of the location of the cursor. Using onMouseOut/in functions doesnt work.

thank you in advance

1 Like
2

You can send data to and from html iframes to your page and vice versa in code:
https://support.wix.com/en/article/corvid-working-with-the-html-element
https://www.wix.com/corvid/reference/$w.HtmlComponent.html

3

Thank you so much for your reply!

here is what i did:

i sent the H and W to the HTML:

wixWindow.getBoundingRect()
.then( (windowSizeInfo) => {
    let broswerHeight = windowSizeInfo.window.height;
    let broswerWidth = windowSizeInfo.window.width;
    
    $w("#html1").postMessage({broswerWidth: (broswerWidth), broswerHeight: (broswerHeight)});
 
 });

i got them in the HTML:

window.onmessage = (event) => {
    if (event.data) {
        var broswerWidth = event.data.broswerWidth;
        var broswerHeight = event.data.broswerHeight;
    }
};

i have to use onmousemove in the js, like this:

var ball = document.querySelector('.ball');
document.onmousemove = function() {
    var x = event.clientX * 100 / broswerWidth + "%";
    var y = event.clientY * 100 / broswerHeight + "%";

    ball.style.left = x;
    ball.style.top = y;
    ball.style.transform = "translate(-"+ x +",-"+ y +")";
}

the full code is:

window.onmessage = (event) => {
if (event.data) {
    var broswerWidth = event.data.broswerWidth;
    var broswerHeight = event.data.broswerHeight;
    
    var ball = document.querySelector('.ball');
    
    document.onmousemove = function() {
    
        var x = event.clientX * 100 / broswerWidth + "%";
        var y = event.clientY * 100 / broswerHeight + "%";
        
        ball.style.left = x;
        ball.style.top = y;
        ball.style.transform = "translate(-"+ x +",-"+ y +")";
        }
    };  
};

can you think of anyway to make this work?
thank you!