Use Flutter Web App as iframe in regular html website #2451

lunaticcoding · 2024-06-18T19:36:49Z

I got the following html code using my flutter web app as an iframe. All the other tickets I found on here reference web sockets.

Here is my html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parent Page</title>
    <style>
        html {
            font-size: 16px;
        }
    </style>
    <script type="text/javascript">
        var intervalId;
        var x = 0;

        function sendMessageToIframe() {
            var iframe = document.getElementById("scIframe-5f910afd49fb4e4a92f453d45aff2fc7");
            var p = iframe.contentWindow;

            if (p) {
                intervalId = window.setInterval(function () {
                    x++;
                    if (p) {
                        p.postMessage(JSON.stringify({
                            type: "message",
                            height: 1000,  // Set your desired height here
                            scroll: true
                        }), "*");
                    }
                    if (x > 3) {
                        window.clearInterval(intervalId);
                    }
                }, 100);
            }
        }

        window.addEventListener("message", function(event) {
            if (event.origin !== "http://localhost:58585") {
                return;
            }
            var data;
            try {
                data = JSON.parse(event.data || "{}");
            } catch (e) {
                return;
            }
            if (data.type === "offsetHeight") {
                document.getElementById("scIframe-5f910afd49fb4e4a92f453d45aff2fc7").style.height = data.windowoffset + "px";
            }
        }, false);

        window.onload = sendMessageToIframe;
    </script>
</head>
<body>
<iframe id="scIframe-5f910afd49fb4e4a92f453d45aff2fc7" src="http://localhost:58585/#/" style="border:0; width: 90%;"></iframe>
</body>
</html>

here is my flutter web/index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="tsetme">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">
  <link rel="icon" type="image/png" href="favicon.png"/>
  <title>testme</title>
  <link rel="manifest" href="manifest.json">
  <script type="text/javascript">
    var ALLOWED_ORIGIN = "http://localhost:58585";
    var IFRAMEID = "scIframe-5f910afd49fb4e4a92f453d45aff2fc7";

    function scrollToTop() {
      window.scroll(0, 0);
    }

    function receiveMessage(event) {
      if (event.origin === ALLOWED_ORIGIN) {
        var data;
        try {
          data = JSON.parse(event.data || "{}");
        } catch (e) {
          return;
        }
        if (data && data.type === "message") {
          var iFrame = document.getElementById(IFRAMEID);
          iFrame.style.height = data.height + "px";
          if (data.scroll) {
            scrollToTop();
          }
        }
      }
    }

    function debounce(func, timeout = 100) {
      let timer;
      return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => { func.apply(this, args); }, timeout);
      };
    }

    function scrolling(event) {
      var iframeWin = document.getElementById(IFRAMEID);
      iframeWin.contentWindow.postMessage(
              JSON.stringify({
                type: "offsetHeight",
                screenHeight: window.innerHeight,
                iframeoffset: iframeWin.offsetTop,
                windowoffset: document.body.offsetHeight,
                boundingTop: iframeWin.getBoundingClientRect().top,
              }),
              ALLOWED_ORIGIN
      );
    }

    if (window.addEventListener) {
      window.addEventListener("message", receiveMessage, false);
      window.addEventListener("scroll", debounce(scrolling), false);
    } else if (window.attachEvent) {
      window.attachEvent("onmessage", receiveMessage);
      window.attachEvent("onscroll", debounce(scrolling));
    }
  </script>
  <script async src="flutter_bootstrap.js"></script>
</head>
<body>
</body>
</html>

Unhandled error detected in the injected client.js script.

You can disable this script in webdev by passing --no-injected-client if it
is preventing your app from loading, but note that this will also prevent
all debugging and hot reload/restart functionality from working.

The original error is below, please file an issue at
https://github.com/dart-lang/webdev/issues/new and attach this output:

bkonyi · 2024-07-31T17:40:40Z

Can you try this without the injected client enabled?

lunaticcoding added the package:webdev label Jun 18, 2024

bkonyi added P2 A bug or feature request we're likely to work on triaged labels Jul 31, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use Flutter Web App as iframe in regular html website #2451

Use Flutter Web App as iframe in regular html website #2451

lunaticcoding commented Jun 18, 2024

bkonyi commented Jul 31, 2024

Use Flutter Web App as iframe in regular html website #2451

Use Flutter Web App as iframe in regular html website #2451

Comments

lunaticcoding commented Jun 18, 2024

bkonyi commented Jul 31, 2024