代码之家 › 专栏 › 技术社区 › Jon_B

React Native Webview如何使用injectJavascript

global-variables webview react-native

Jon_B · 技术社区 · 7 年前

我试图在react native WebView加载的网页中设置全局变量。我试图使用injectJavascript属性设置全局变量,但我得到一个错误,告诉我injectJavascript应该是一个函数。

如何格式化injectJavaScript函数以将消息作为全局变量传递到加载的网页?非常感谢。

class Browser extends React.Component {

  render() {
    const { url } = this.props;
    return (
      <View>
        <WebView
          source={{ uri: url }}
          injectJavaScript={
            "window.testMessage = 'hello world'"
          }
        />
      </View>
    );
  }
}

3 回复 | 直到 7 年前

Ankit Makwana 7 年前

如果您只是想设置全局变量,那么可以使用injectedJavaScript属性,当视图加载时,它会将js代码注入到网页中。在这里,您可以简单地将js代码作为字符串传递。

如果要从任何函数设置全局变量,则可以执行以下操作: 首先参考webview。

<WebView
     ref={ref => (this.webview = ref)}
     ...
/>

然后,无论何时要注入js代码,请执行以下操作:

this.webview.injectJavaScript('window.testMessage = "hello world"; void(0);');

请查看链接以供参考。

https://snack.expo.io/Hke6dJFAW

inoutwhy 5 年前

请尝试以下操作:

<WebView
    ref={c => this._webview = c}
    javaScriptEnabled={true}
    injectedJavaScript={`window.testMessage = "hello world"`}
/>

injectedJavaScript 道具注入 JS进入web视图, 一旦 ,加载时。这就是你想要的。

怎样 injectJavascript 另一方面是否使用?通过在webview的ref上调用它,可以动态地以编程方式注入更多的JS。在这种情况下,它可能看起来像这样,例如:

this.webview.injectJavascript(`window.reactComponent.forceUpdate();true;`)

Idan 4 年前

你可以用 injectedJavaScript webview中的属性:

export default class app extends Component {
  constructor(props) {
    super(props);
    this.state = { webViewUrl: 'https://reactnative.dev' };
  }

render() {
    const jsCode = `document.querySelector('.HeaderHero').style.backgroundColor = 'purple';`;
    return (
      <View style={styles.container}>
        <WebView
          ref={ref => {
            this.webview = ref;
          }}
          source={{ uri: this.state.webViewUrl }}
          originWhitelist={['*']}
          javaScriptEnabledAndroid={true}
          injectedJavaScript={jsCode}
        />
      </View>
    );
  }
}

有关代码示例的完整解释: link_from_medium

推荐文章

glor · 如何在报价单中的r中使用全局变量

7 年前

Mabadai · 将一个int数组复制到另一个C++

7 年前

kjunz · 函数内的全局值不变

7 年前

infinite · 即使没有声明也在使用全局定义

7 年前

Rakesh · 全局变量值不反映在函数之间

7 年前

chrislamprey · C中的全局变量链表队列?(初始值设定项元素不是常量)

7 年前

oneMoreDeveloper · Javascript全局数组声明

7 年前

foreverNoob · 我正在尝试使用javascript将h2标记更改为所选歌曲的标题

7 年前

Klayd Pro · 在c中使用本地指针调用并返回函数

7 年前

Rob Matthews · 为模拟信用卡应用程序颁发简单的唯一ID

7 年前