在React Native ios WebView的所有iframe中注入javascript

Question

在React Native ios WebView的所有iframe中注入javascript

Mut*_*nan 5 android ios wkwebview react-native

我正在使用react-native-webview加载具有多个 iframe 的 URL。我正在使用该方法将 javascript 注入到加载的网站中injectedJavaScript。该代码仅注入顶部框架中，而不注入 iframe 中。

对于 android，我重写了public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request)拦截 HTML 并将所需的 Javascript 添加到其中的方法。

对于 iOS，经过一些谷歌搜索后，我发现一些结果指向设置forMainFrameOnly为“否”。我对 Objective C 完全是菜鸟，完全不知道如何设置它。我查看了 RNCWKWenView.m 文件，其中有forMainFrameOnly:YES2 个位置。我将 YES 替换为 NO，然后在 xcode 中重建我的 iOS 项目。但仍然无法在 iframe 中获取我的 javascript。

重现： App.js 文件

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

const WEBVIEW_REF = 'webview';

export default class App extends Component {

    webView = {
        canGoBack: false,
        ref: null
    }

    onAndroidBackPress = () => {
        if (this.webView.canGoBack) {
            this.refs[WEBVIEW_REF].goBack();
            return true;
        }
        return false;
    }

    /**
     * generate the javascript needed to be embedded inside the react native code. 
     */
    generateJSCode() {

        var jsCode = "console.log('my script shows');";

        return jsCode;
    }

    componentDidMount() {
        if (Platform.OS === 'android') {
            BackHandler.addEventListener('hardwareBackPress', this.onAndroidBackPress);
        }
    }

    componentWillUnmount() {
        if (Platform.OS === 'android') {
            BackHandler.removeEventListener('hardwareBackPress');
        }
    }

    render() {

        const uri = "http://localhost:8000";

        return (
            <WebView
              ref={WEBVIEW_REF}
              source={{uri}}
              useWebkit={true}
              injectedJavaScript={this.generateJSCode()}
              javaScriptEnabled={true}
              onNavigationStateChange={(navState) => { this.webView.canGoBack = navState.canGoBack; }}
            />
        );
    }
}

Run Code Online (Sandbox Code Playgroud)

HTML 文件：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
    <h1>this is a sample page</h1>
    <iframe src="https://wikipedia.org/" style="width:100%;min-height: 400px;"></iframe>
    <iframe src="https://wikipedia.org/" style="width:100%;min-height: 400px;"></iframe>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

预期行为：

在 iOS 上：当我设置forMainFrameOnly:YES为时forMainFrameOnly:NO，我希望脚本也能注入到我的 iframe 中。

环境： - 操作系统：MacOS - 操作系统版本： - React-native 版本：0.60.5 - React-native-webview 版本：6.9.0

Answer 1

man*_*ani 0

您需要进行设置injectedJavaScriptForMainFrameOnly={false}才能WebView使其在 iOS 上运行。会将其react-native-webview传递给本机插件并设置底层forMainFrameOnly:false.

将您的用法更新WebView为：

<WebView
  injectedJavaScriptForMainFrameOnly={false}

  ref={WEBVIEW_REF}
  source={{uri}}
  useWebkit={true}
  injectedJavaScript={this.generateJSCode()}
  javaScriptEnabled={true}
  onNavigationStateChange={(navState) => { this.webView.canGoBack = navState.canGoBack; }}
/>

Run Code Online (Sandbox Code Playgroud)

指南中的更多详细信息：https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md

归档时间：	6 年，2 月前
查看次数：	1755 次
最近记录：	3 年，2 月前