Variable visibility

How would you go about creating a variable visibility for an iframe?
I want to make a website that through an iframe allows users to surf another website without leaving mine. This will be done with alot of websites, but some websites have security measures that prevent their domain being visible in this environment.

Because of this they will show an error message. Is there custom code that if the link provides an error message in the iframe, will allow the iframe to be hidden so that it can reveal a static image beneath. This way i don’t have broken iframe components on the website.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

The easiest way is probably to attempt to iframe it and then to check to see if it worked and fallback to your hide-the-iframe scenario.

Or conversely, start with it hidden and then only show it when it is proven to contain content.

// create or get your iframe element
var iframe = document.createElement('iframe');
iframe.src = 'http://example.com';  // Replace with the URL you're checking
iframe.style.display = 'none';
document.body.appendChild(iframe);

// wait a bit after the onload event and check for content
iframe.onload = function() {
    setTimeout(checkIframe, 100);
};

// the content checker
function checkIframe() {
    var iframeCanLoad = false;

    try {
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        iframeCanLoad = Boolean(doc);
    } catch (e) {
        console.error('Failed to access iframe contents:', e);
    }

    console.log('Iframe can load:', iframeCanLoad);
}

Thank you very much for the help!
Sorry Im not much of a coder (at all in fact), how do I format the code correctly for an embed element? As right now webflow isn’t recognising the code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML iFrame</title>
</head>
<body>
	<iframe src="https://monday.com/"></iframe>
</body>
</html>

This was the basic code i was usuing before and it showed the iframe content, I believe because of the html tags?
Not sure how to get it to recognise and render your code though

You are missing the <script> tags around the code. Without that your browser is just interpreting it as text.

The code I sent is an example of how to check for an iframe load- you cannot just paste it in and make it work with your existing iframe without re-targeting it. You especially don’t need to generate a second IFRAME, which the demo code does.

But otherwise, everything you need is there.

If you’re looking to hire a dev to assist with things like this, I have a special microconsulting package for Webflow designers & agencies. Feel free to PM me.

Yeah for sure ill check it out and hit you up if i need anything. Thank you for the help much appreciated!