时间戳

首页 > 解决方案 > 为什么 WebView 脚本注入不起作用？

react-native - 为什么 WebView 脚本注入不起作用？

问题描述

该文档建议我应该能够将值注入 WebView 组件显示的网页中，以便加载页面时可以使用该值：

https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native

具体来说，下面的代码展示了如何在window对象中设置一个值，但没有展示它是如何使用的：

import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';

export default class App extends Component {
  render() {
    const runFirst = `
      window.isNativeApp = true;
      true; // note: this is required, or you'll sometimes get silent failures
    `;
    return (
      <View style={{ flex: 1 }}>
        <WebView
          source={{uri: 'my-url-here'}}
          injectedJavaScriptBeforeContentLoaded={runFirst}
        />
      </View>
    );
  }
}

我正在加载的页面如下所示：

<html>
  <body>
    <script>
    alert(window.isNativeApp)
    </script>
  </body>
</html>

显示undefined. 我也试过：

<html>
  <body>
    <script>
    var fn = function() {
      alert(window.isNativeApp)
    }
    document.addEventListener('DOMContentLoaded', fn, false)
    </script>
  </body>
</html>

结果相同。鉴于我应该能够发送网页值，我应该如何使用它们？

从我的package.json：

"react-dom": "~16.9.0",
"react-native": "^0.62.1",
"react-native-webview": "^8.2.1",

附录一

事实上，上面似乎根本没有运行。如果我尝试以下操作：

    const runFirst = `
      console.log('INJECTION')
      alert('INJECTION')
      true; // note: this is required, or you'll sometimes get silent failures
    `;

我既没有收到警报，也没有在日志中找到任何痕迹。当然，我不确定alert()在加载文档之前是否可以工作，或者在常规应用程序的控制台输出中我是否可以看到日志

相比之下injectedJavaScript，似乎确实在运行，尽管在文档加载之后，这意味着<script>在我的文档运行时，该值尚未设置

标签： react-nativewebview

解决方案

对于下一个为此苦苦挣扎的可怜草皮，图书馆已经坏了，并且（有一天）会被修复，但与此同时，这很有效：

<WebView
  source={{uri: 'my-url-here'}}
  injectedJavaScriptBeforeContentLoaded={runFirst}
  onMessage={event => { alert(event.nativeEvent.data )}}
/>

旨在用于另一个方向的onMessage通信，但它的存在使代码工作

推荐阅读