Question

我正在开发一个flutter程序包，在其中使用Mathjax和Katex呈现用于Web支持的数学公式，我正在使用IFrameElement从诸如这样的资产呈现HTML页面

  ui.platformViewRegistry.registerViewFactory(
      viewId.toString(),
      (int id) => html.IFrameElement()
        ..width = MediaQuery.of(context).size.width.toString()
        ..height = MediaQuery.of(context).size.height.toString()
        ..src =
            "path/to/index.html"
        ..id = '$viewId'
        ..style.border = 'none');

，然后从Dart调用javascript函数以将数据加载到index.html中。

  js.context.callMethod('initWebView', [viewId, getRawData()]);

这是我的JS函数代码。

function initWebView(id, rawData) {
    var initiated = false;
    document.querySelectorAll("flt-platform-view").forEach(function (platformView) {
            var view = platformView.shadowRoot.children[1];
            if (view.id ===  id) {
                var iframe = view.contentWindow;
                myView = iframe.document.getElementById('MyView');
                initiated = true;
                myView.appendChild(createView(JSON.parse(rawData)))              
            }
        }
    );

    if (!initiated) setTimeout(function () {
        initWebView(id, rawData)
    }, 250);

}

一切都按照我的预期运行良好，但是每当我尝试用dart重建小部件时，所有内容都会在网络上消失，例如如果我触发setState，即使将光标悬停在“后退”按钮上，页面上的所有内容也都消失了。控制台中没有任何信息。 Here's Live Demo，在打开任何选项后，请稍等片刻。

My Package和Mentioned Dart File的完整来源。

重建小部件时Flutter Web IFrameElement消失

0 个答案: