4

I've embedded flutter web app in my website using Iframe. On website I've a simple text area and in flutter web app I've also a text widget. The functionality I want is that when I write something in this text area it should also show in my flutter web app instantly. Currently I'm doing it by passing url parameter to the src attribute of iframe. But it is very slow as it restart my flutter web app. The problem is not about embedding flutter web app into website. My problem is that how can we change data of flutter web app through browser.The functionality I want to achieve with speed

I don't want to do it like the following code by passing url parameter as it is very slow. 

<!DOCTYPE html>
<html>
<body>    
    <input id='input' type="text">
    <input type="button" onclick="changeText()" value="Change" />
    <h1>The web application that is embeding flutter app</h1>
    <div id = 'main'>
        <div>
            <iframe  src="http://localhost:54827/#/" width="800px" height="600px" 
            style="overflow:auto;border:5px ridge blue"> </iframe>
        </div>
    </div>    
</body>
<script>    
    var changeText = ()=>{
        var textToDisplay = document.getElementById("input").value;
        var frame = document.createElement('iframe');
        frame.setAttribute('src', `http://localhost:55035/#/?answer=${textToDisplay}`);
        frame.setAttribute('height', '600')
        var main = document.getElementById("main");
        main.innerHTML ='';
        document.getElementById("main").appendChild(frame);            
    }
</script>
</html>
Sachin Jain
  • 63
  • 1
  • 5
  • Give a shot to [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). This API lets you send "message" events from your parent page to your child page (and vice-versa!). Inside your Flutter app, you just setup a global "message" listener with dart:html, and you handle the events however you want. In your Web app, you can postMessages into your child iframe directly. (Look at the Security Considerations in the article I linked to ensure that only you can postMessage to your own iframe.) – ditman Jul 20 '21 at 17:17
  • 1
    Thanks, It worked for me. Here I got the [complete implementation](https://stackoverflow.com/questions/66062315/flutter-web-listen-to-events-posted-through-iframe) – Sachin Jain Jul 21 '21 at 03:18
  • Ah yes, that looks exactly like what I described but with the actual code. Cool! – ditman Jul 21 '21 at 18:39
  • I'm getting one more problem. I've a multi screen flutter web app. But I want to embed a particular screen in my website and don't want to allow user from moving forward or backward from that screen. Basically I want that user can not press on the embeded page. I'm using Iframe. Can you please help me or give some lead to achieve this. – Sachin Jain Jul 22 '21 at 05:41

0 Answers0