Блог

Главная - Вопросы по программированию - iFrame src не работает с HTML-контентом в кодировке Base64 в Android Webview

iFrame src не работает с HTML-контентом в кодировке Base64 в Android Webview

#android #reactjs #iframe #webview

Вопрос:

Я разрабатываю проект для приложения, которое будет отображать мое приложение react в веб-представлении. Приложение ReactJS отлично работает в webview, поэтому я предполагаю, что JS активирован в webview. Но я пытаюсь отобразить HTML-контент в кодировке base64, который я пытаюсь отобразить следующим образом;

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

Этот подход прекрасно работает в браузере (Chrome), но он вообще не работает в webview.

Я использовал srcdoc вместо src этого . Но тогда я не могу postMessage родить приложение ReactJS.

Есть ли способ работать srcdoc в этом сценарии или в чем может быть проблема с iframe в webview?

Комментарии:

1. ты нашел способ?

2. Нет. Вместо этого я создаю функцию в объекте окна, например window.GetMessage (и т. Д.), Чем я могу использовать эту функцию в iframe. В iFrame вы можете назвать это так: window.top.GetMessage

Ответ №1:

К сожалению, мне не удалось работать с таким подходом. Но, поскольку я могу контролировать и то, и другое в iframe, я просто создал функцию в родительском элементе iFrame следующим образом;

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

Затем получите доступ к нему изнутри iFrame с помощью;

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

На самом деле этот подход работал лучше. Если вам по какой-то причине нужен еще один вложенный iframe, вы можете получить эту функцию независимо от того, насколько она глубока, потому что содержимое iframe в любом случае создает «верхнее» окно.

Я делюсь этим, потому что эту проблему можно решить с помощью разных подходов. Может быть, не лучший способ, но это рабочий способ.

Метки: