iFrame src not working with Base64 Encoded HTML Content in Android Webview

Question

I'm developing a project for an app that will display my react app in a webview. ReactJS app works perfectly in webview, that is why I assume JS is activated in webview. But, I'm trying to display a base64 encoded HTML content which I'm trying to display as follows;

<iframe src={`data:text/html;base64,${HtmlContent}`}/>

This approach works fine in the browser (Chrome), but it's not working at all in the webview.

I used srcdoc instead of src. But then I cannot postMessage to parent ReactJS app.

Is there a way to work with srcdoc in this scenario or what could be the problem with the iframe when in webview?

Answer 1

Unfutenally I couldn't manage to work with this approach. But, since I can control both and of the iframe, simply I created a function in the parent of the iFrame as follows;

useEffect(() => {
    // Only create once
    // Create a custom function and put it to the window object
    window.handleResult = handler;
}, [])

Then access it from inside of the iFrame with;

<script type="text/javascript">
    window.top.handleResult({success: params.success, error: params.error})
</script>

This approach worked better actually. If you need one more nested iframe for some reason, you can get this function no matter how deep it is because, iframe content geting "top" window anyway.

I'm sharing this because this problem can be solve with different aproches. Maybe not the best way but it'i a working way.