Как использовать локальный файл js или css при использовании плагина webview_flutter

Этот вопрос касается плагина webview_flutter. (https://pub.dev/packages/webview_flutter)

Мне удалось загрузить локальный файл .html, однако .js файл и .css включены как часть html-кода не работают.

Это хорошо работает в Native Android и Native iOS App.

Я думаю, что это одна из основных функций для поддержки просмотра HTML.

Webview_flutter не поддерживается js & css include?


flutter flutter-plugin webview
person Dhaval Patel    schedule 23.11.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Что заставляет вас думать, что он не поддерживается? Он работает так же, как в любом браузере: вы можете указать относительный или абсолютный путь к своим файлам JS / CSS. Только не забудьте установить javascriptMode: JavascriptMode.unrestricted, чтобы разрешить выполнение кода javascript. Вот мой пример создания HTML-страницы с файлами JS / CSS:

введите описание изображения здесь

import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'package:webview_flutter/webview_flutter.dart';

  Future<void> _showHtml() async {
    final tempDir = await getTemporaryDirectory();

    final htmlPath = join(tempDir.path, 'page.html');
    final cssPath = join(tempDir.path, 'css.css');
    final jsPath = join(tempDir.path, 'js.js');

    File(htmlPath).writeAsStringSync('<html><head><link rel = "stylesheet" type = "text/css" href = "$cssPath" /><script src="$jsPath"></script></head><body><div>Test</div></body></html>');
    File(cssPath).writeAsStringSync('div {background:green;}');
    File(jsPath).writeAsStringSync('document.addEventListener("DOMContentLoaded", function(){document.body.style.backgroundColor = "red"});');

    setState(() {
      uri = Uri(scheme: 'file', path: htmlPath);
    });
  }

  child: uri != null ? WebView(
    initialUrl: uri.toString(),
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (controller) => c = controller,
  ) : Container()
person Igor Kharakhordin    schedule 23.11.2019
comment
Спасибо за быстрое обновление с примером, однако я все еще не понимаю, как использовать js-библиотеку с html-страницей. На самом деле, я хочу использовать JQuery & Bootstrap css вместе с html. Это возможно ?? - person Dhaval Patel; 23.11.2019
comment
@DhavalPatel Нет причин, по которым это невозможно. Я показал вам простой пример. В вашем случае у вас будет несколько файлов js / css (или один минифицированный). Просто убедитесь, что у вас есть правильные пути к вашим файлам в вашем HTML. Если вы не знаете, как использовать jquery / bootstrap, вам, вероятно, следует изучить несколько руководств. Как я уже сказал - WebView практически ничем не отличается от обычного браузера. - person Igor Kharakhordin; 23.11.2019