react-native-webview的stopLoading方法导致网站死机 [英] The method stopLoading of react-native-webview causes the website to freeze

问题描述

我想在 react-native 中拦截我的 webview 中链接的点击并执行自定义操作，而不是按照官方 指南.这就是我所做的:

I want to intercept clicks on a link in my webview in react-native and perform a custom action instead of navigating to the target of the link as described in the official guide. Here's what I do:

import React from 'react';
import {View, Linking} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import {WebView} from 'react-native-webview';

export default class WebViewScreen extends React.Component {
    static navigationOptions = {
        title: 'Produck',
    };

    constructor(props) {
        super(props);
    }

    /**
     * Defines content and look of the WebViewScreen.
     */
    render() {
        const DEFAULT_URL = "https://www.myurl.de/index.html";

        return (
            <View style={{ flex: 1 }}>
                <WebView
                    ref = {webview => {
                        this.myWebView = webview;
                    }}
                    renderLoading = {this.renderLoading}
                    startInLoadingState = {true}
                    automaticallyAdjustContentInsets = {true}
                    source = {{ uri: DEFAULT_URL }}
                    javaScriptEnabled = {true}
                    domStorageEnabled = {true}
                    cacheEnabled = {false}
                    useWebKit = {true} // use WKWebView on iOS (http://facebook.github.io/react-native/blog/2018/08/27/wkwebview)
                    onNavigationStateChange={this.handleWebViewNavigationStateChange.bind(this)}
                />
            </View>
        );
    }

    handleWebViewNavigationStateChange = newNavState => {
        const {url} = newNavState;
        if (!url) return;

        if (isExternal(url)) {
            this.myWebView.stopLoading();

            // do something else, e.g.
            Linking.openURL(url);
        }
    };

}

如果我点击该 webview 中的链接，URL 将按预期在系统浏览器中打开.然而，问题是之后 webview 被冻结了.我无法点击更多链接，甚至无法滚动页面.当然，这不是应该的.重点是在其他地方打开一个链接，以便 webview 中的页面保持可用.结果将保持不变，即使我删除了 Linking 部分.然后页面会在点击链接时冻结.

If I click on a link in that webview the URL will be opened in a the systems Browser as expected. The problem is however that afterwards the webview is frozen. I can't click any more Links or even scroll the page. Of course this is not as it should be. The whole point is to open a link somewhere else so that the page in the webview remains usable. The result will remain the same, even if I remove the Linking-part. Then the page just freezes on a link-click.

有人知道该怎么做吗?我想 stopLoading-method 不仅仅是中止加载.它是否也可能取消当前页面上正在运行的任何 Javascript?如果是这样，我可以阻止吗?

Does anyone know what to do? I guess the stopLoading-method does a little more than just abort loading. Does it maybe also cancel any running Javascript on the current page? If so, can I prevent that?

推荐答案

感谢 this 拉取请求.我没有使用 onNavigationStateChange 和 stopLoading，而是转向 onShouldStartLoadWithRequest.在此事件的回调方法中，您可以简单地通过返回 false 或 true 来定义是否应该放弃当前 webview 的请求.所以你会得到这样的东西:

I have found a solution at least for my case thanks to this pull request. Instead of using onNavigationStateChange and stopLoading I turned to onShouldStartLoadWithRequest. In the callback method for this event you can define whether or not the request should be discarded as far as the current webview is concerned or not simply by returning false or true. So you get something like this:

render() {
    ...
    return(...
        <WebView
            ...
            onShouldStartLoadWithRequest={this.handleWebViewRequest.bind(this)}
            ...
        />
    );
}

handleWebViewRequest = request => {
    const {url} = request;
    if (!url) return false;

    if (isExternal(url)) {
        Linking.openURL(url);
        return false;
    } else {
        return true;
    }
}

做什么"部分到此为止.好吧，我也想回答我的其他问题并深入研究 react-native-webview 的代码(这一点都不有趣......评论怎么样?->让代码说话"->好吧，它没有).在从一个委托目标跳转到下一个委托目标一段时间后，stopLoading 调用似乎被移交给了本机 WebView.因此，Android 和 iOS 的行为也可能完全不同(我目前仅针对 Android 进行开发).至于我能不能阻止"——整个问题的一部分，我可以说:不".当然，最有趣的部分是stopLoading 到底做了什么?我在某处读到它确实阻止了当前页面上的链接被点击.但这只是一个未经证实的声明.当我到达本机 Android-WebView-documentation 时，我发现非常非常很好的解释停止当前负载."(去谷歌，是的)然后我失去了深入挖掘的动力.好吧，除非有人比我更开明，可以提出更详细的解释，否则我可能会接受我自己的答案，因为它至少是我面临的开发问题的解决方案.

So far for the "what to do"-part. Well I also wanted to answer my other questions and dug into the code of react-native-webview (which was no fun at all... what about comments? -> 'let the code speak' -> well it doesn't). After spending some time jumping from one delegation target to the next, somewhere the stopLoading-call seems to be handed over to the native WebView. So the behaviour may also be completely different for Android and iOS (I'm developing only for Android currently). As for the "can I prevent"-part of the whole question I can say: "No". Of course the most interesting part would have been "what does stopLoading actually do? Somewhere I read that it prevents Links on the current page from being clicked, indeed. But that was just a non-proven statement. As I got to the native Android-WebView-documentation I found the very very good explanation "Stops the current load." (go Google, yay). Then I lost all motivation to dig deeper. Well, unless someone more enlightned than me, can come up with a more elaborate explanation I will problably accept my own answer, since it is at least a solution to the dev-problem I faced.

这篇关于react-native-webview的stopLoading方法导致网站死机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！