Question

我想隐藏我嵌入到React Native WebView中的特定页面的标题。目前，我使用类似的东西来动态删除标题：

var frame = this._urlElement;
if (frame) {
    var content = frame.contentWindow.document.getElementById("content");
    if (content) {
        MarvalSoftware.UI.Dom.setStyles(content, { 'overflow': 'visible' });
    }
    var doc = document.documentElement;
    document.replaceChild(frame.contentDocument.documentElement, doc);
    window.setTimeout(function() {
        window.print();
        document.replaceChild(doc, document.documentElement);
    }, 100);
}

有时你仍然可以看到标题闪烁，所以我猜这个JavaScript在网页加载后会被评估。

是否有可能以某种方式在页面渲染之前添加/注入JavaScript或CSS以删除闪烁？

Answer 1

我无法在页面加载之前找到注入JavaScript或CSS的方法。

要解决闪烁问题，我会在View处于WebView状态时放置另一个loading。 onNavigationStateChanged回调可用于确定页面是否已加载。我放在顶部的View只显示ActivityIndicatorIOS。

Answer 2

我遇到了这个问题，我的解决方法就是这样

render() {
    const remove_header = 'header = document.querySelector("header"); header.parentNode.removeChild(header);';
    uri = this.props.url
    return (
      <View style={{flex:1 }}>
        {(!this.state.showWebView) &&  <ActivityIndicator size="large" /> }
        <WebView
          style={this.state.showWebView ?  {flex:1} : {flex: 0} }
          source={{uri: uri}}
          javaScriptEnabled
          injectedJavaScript={'function injectRules() {'remove_header'};injectRules();'}
          onNavigationStateChange={(event) => {
            if (event.url !== uri) {
              this.webview.stopLoading()
              Linking.openURL(event.url)
            }
          }}
          onLoadStart={() => {
            this.setState({ showWebView: false })
          }}

          onLoadEnd={() => {
            if (!this.state.showWebView ) {
              this.setState({ showWebView: true })
            }
          }}
        />
      </View>
    )
  }

Answer 3

我的快速解决方案是在WebView中添加一个负marginTop来隐藏标题。这样，标题就隐藏在渲染之前了。

Collection<&dyn Stringable>

在页面渲染之前将JavaScript或CSS注入React Native WebView

3 个答案: