flutter - Flutter Web,HtmlElementView, “Removing disallowed attribute”

标签 flutter dart flutter-web

我正在尝试为Flutter Web中的Playstore Application Badge创建HtmlElementView吗?
我尝试了以下提到的here

  Widget _getAppStoreBadgeView() {
    final NodeValidatorBuilder _htmlValidator =
        new NodeValidatorBuilder.common()
          ..allowElement('a', attributes: ['data-target', 'data-toggle'])
          ..allowElement('button', attributes: ['data-target', 'data-toggle']);
    ui.platformViewRegistry.registerViewFactory("idid", (int viewId) {
      final element = DivElement()
        ..setInnerHtml(r"""
        <a href='https://play.google.com/store/apps/details?id=com.shahxad.evendor&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png'/></a>
        """, validator: _htmlValidator)
        ..style.width = "100%"
        ..style.height = "100%"
        ..style.border = 'none';
      return element;
    });
    return Container(
      child: HtmlElementView(viewType: "idid"),
      height: 150,
      width: 400,
    );
  }
但是它不起作用,因为我越来越像这样。
enter image description here
我在Chrome控制台中收到此消息。

Removing disallowed attribute

html_dart2js.dart:39901 Removing disallowed attribute <A href="https://play.google.com/store/apps/details?id=com.shahxad.flutter_tex_example&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1">

html_dart2js.dart:39901 Removing disallowed attribute <IMG src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png">

最佳答案

dart:html 库中的NodeValidatorBuilder与预定义规则allowHtml5allowNavigationallowImages一起使用,并定义ItemUrlPolicy类以允许从生成的 html -code进行导航。

import 'dart:html' as html;
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

class ItemUrlPolicy implements html.UriPolicy {
  RegExp regex = RegExp(r'(?:http://|https://)?.*');

  bool allowsUri(String uri) {
    return regex.hasMatch(uri);
  }
}

class MyWidget extends StatefulWidget {
  @override
  MyWidgetState createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  html.DivElement _element;

  @override
  void initState() {
    super.initState();
    _element = html.DivElement()
      ..appendHtml("""
            <a href='https://play.google.com/store/apps/details?id=com.shahxad.evendor&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'>
              <img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png'/>
            </a>
          """,
          validator: html.NodeValidatorBuilder()
            ..allowHtml5(uriPolicy: ItemUrlPolicy())
            ..allowNavigation(ItemUrlPolicy())
            ..allowImages(ItemUrlPolicy()));
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory('demo-view', (int viewId) => _element);
  }

  @override
  Widget build(BuildContext context) {
    return HtmlElementView(key: UniqueKey(), viewType: "demo-view");
  }
}

关于flutter - Flutter Web,HtmlElementView, “Removing disallowed attribute”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62840032/

相关文章:

dart - Flutter:在小部件测试中测试异常

Flutter web 轻松打印

android - 前缀 'context' 不能在此处使用,因为它被本地声明所遮蔽

flutter - 无法运行 flutter 运行。得到一些 androidx 错误

dart、编辑器、断点、调试动态网页

dart - Flutter - 设置小部件的比例

Flutter web 上传文件取消事件

flutter - 我无法构建我的 flutter Web 项目

websocket - Flutter 如何监听 websocket 响应?

dart - 如何在初始化列表 dart lang 中运行自定义函数?