1

My webview contain (embed, code, ...) so because i used onMessage and injectedJavascript, i'm try console event in onMessage in ios and vitual android returns results, only physical android not return result, please let me keyword and why?? Thank you very much!

<WebView
    {...otherProps}
    javaScriptEnable={true}
    domStorageEnabled={true}
    mixedContentMode={'compatibility'}
    source={{ html: templates[this.props.template]({html, fontSizeContent, fontSizeContentPre, highlightThemes, enableNightMode}) }}
    onLoad={this.onLoad.bind(this)}
    injectedJavaScript={this.injectedJavaScript()}
    onMessage={this.onMessage.bind(this)}
    scrollEnabled={false}
    style={{
            height: Math.max(realContentHeight, minHeight), 
            backgroundColor: enableNightMode ? COLORS.COLOR_NIGHT_MODE : COLORS.COLOR_UN_NIGHT_MODE
          }}
    />

hackBefore() {
    return Platform.OS === 'ios' ?
    `
        (function(){
            var originalPostMessage = window.postMessage;
            var patchedPostMessage = function(message, targetOrigin, transfer) {
                originalPostMessage(message, targetOrigin, transfer);
            };
            patchedPostMessage.toString = function() {
                return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
            };
            window.postMessage = patchedPostMessage; `
    :
    `
        if (window.postMessage.length !== 1) {
            window.postMessage = function(msg) {
                setTimeout(function () {
                window.postMessage(msg);
                }, 5000);
            }
        }
    `
}

hackAfter() {
    return Platform.OS === 'ios' ? '})();' : ''
}

injectedJavaScript() {
    return ` 
        ${this.hackBefore()}
        NodeList.prototype.forEach = Array.prototype.forEach;

        if (!Element.prototype.matches)
        Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;

        if (!Element.prototype.closest)
        Element.prototype.closest = function(s) {
            var el = this;
            if (!document.documentElement.contains(el)) return null;
            do {
                if (el.matches(s)) return el;
                el = el.parentElement || el.parentNode;
            } while (el !== null && el.nodeType === 1); 
            return null;
        };

        function dispatchAction(action, params) {
            window.postMessage(JSON.stringify({
                action,
                params,
            }));
        };


        ${this.hackAfter()}
    `
};

onMessage(event) {
    console.log('event', event)
    const { action, params } = JSON.parse(event.nativeEvent.data);

    console.log('action', action)
    console.log('params', params)

    switch (action) {
    case 'heightCaculated': {
        return this.setState({
            realContentHeight: params.height,
            isRendering: false,
        });
    };
    case 'addImages': {
        this.props.resetImages();
        params.imgs.map(img => Image.prefetch(img));
        return this.props.addImages(params.imgs);
    };
    case 'openGallery': {
        return navigator.navigate('Gallery', {
            index: params.index,
        })
    };
    default:
        return null;
    };
};
4
  • please help me!!
    – longnk
    Commented Jan 28, 2019 at 2:26
  • I'm also stuck in this thing please help @longnk
    – Codesingh
    Commented Aug 2, 2019 at 6:48
  • @Codesingh you can read my solution github.com/facebook/react-native/issues/24143, this solution woking if you use react native < v0.59, use WebView in react-native, good luck :D
    – longnk
    Commented Aug 5, 2019 at 8:38
  • Thanks man but i'm using react native 0.60.0
    – Codesingh
    Commented Aug 5, 2019 at 13:31

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.