Skip to main content
Version: v11.12.0

Web View

WebView renders web content in a native view, such as In-app-browser. This allows communication between the WaveMaker app and Web Apps. Also, inject Script and CSS to Web Apps.

Add Script to WebView​

To execute JavaScript in WebView, call the executeScript function and receive the result.

Page.Widgets.webview1.executeScript(`function() {
        // code to execute and return the result to recieve back
        return window.location.href; 
    }()`).then(function(result) {
        // code to deal with result
        // Refresh the page
        Page.refresh();
    });

Styling WebView​

To inject CSS into WebView, call the injectCSS function, as shown below.

 Page.Widgets.webview1.insertCSS(`
        .wm-app .app-label {
            background-color: green;
            color: red;
        }
    `);

Communicate between WebView and React Native​

Execute the below code in WebView to send the string data to React Native app, wherein React Native is a WaveMaker app, and WebView is a Web App.

Script to add in Webview​

window.ReactNativeWebView && window.ReactNativeWebView.postMessage('Message from web');

Script to add in React Native​

In React Native app, add a JavaScript function for onMessage event, then handle the data that is sent from WebView.

Page.webview1Message = function(event, widget) {
    var data = event.nativeEvent && event.nativeEvent.data;
    // process data
};

Example​

The following example shows adding script and CSS to Web App. It also shows how to communicate from Web App to React Native App.

Web App​

Markup​

<wm-page name="mainpage" pagetitle="Main">
    <wm-header content="header" name="header" height="auto"></wm-header>
    <wm-top-nav name="topnav" content="topnav"></wm-top-nav>
    <wm-content name="content">
        <wm-left-panel columnwidth="2" name="leftpanel" content="leftnav"></wm-left-panel>
        <wm-page-content columnwidth="8" name="mainContent" padding="unset 15px">
            <wm-button class="btn-default" caption="" type="button" margin="unset 0.5em" name="subtract" iconclass="wm-sl-l sl-subtract" on-click="subtractClick($event, widget)"></wm-button>
            <wm-label padding="unset 0.5em" name="count" caption="0"></wm-label>
            <wm-button class="btn-default" caption="" type="button" margin="unset 0.5em" name="add" iconclass="wm-sl-l sl-add" on-click="addClick($event, widget)"></wm-button>
            <wm-label padding="unset 0.5em" name="labelMessageSent" caption=""></wm-label>
            <wm-button class="btn-default" caption="Send Message" type="button" margin="unset 0.5em" name="button4" on-click="button4Click($event, widget)"></wm-button>
        </wm-page-content>
        <wm-right-panel columnwidth="2" name="rightpanel" content="rightnav"></wm-right-panel>
    </wm-content>
    <wm-footer name="footer" content="footer"></wm-footer>
</wm-page>

Script​

Page.onReady = function() {};

Page.subtractClick = function($event, widget) {
    Page.Widgets.count.caption = parseInt(Page.Widgets.count.caption) - 1;
};
Page.addClick = function($event, widget) {
    Page.Widgets.count.caption = parseInt(Page.Widgets.count.caption) + 1;
};
Page.button4Click = function($event, widget) {
    window.ReactNativeWebView && window.ReactNativeWebView.postMessage(`Post message from web count is: ${Page.Widgets.count.caption}*`);
};

React Native App​

Markup​

<wm-page name="mainpage">
    <wm-content name="content1">
        <wm-page-content columnwidth="12" name="page_content1" backgroundcolor="#717171">
            <wm-webview name="webview1" webviewsrc="https://stage-studio.wavemakeronline.com/run-tlgl6v1wz7/ent1253c0349106/ServicesApp_master/#/Main" width="100%" height="300" on-load="webview1Load($event, widget)" on-message="webview1Message($event, widget)"></wm-webview>
            <wm-button class="btn-default" caption="update count" type="button" name="button1" width="100%" on-tap="button1Tap($event, widget)"></wm-button>
            <wm-linearlayout direction="row" spacing="4" padding="4px" name="linearlayout1">
                <wm-linearlayoutitem name="linearlayoutitem1" flexgrow="7" horizontalalign="right">
                    <wm-label padding="unset 4px" name="label1" class="h4" caption="Count Value"></wm-label>
                </wm-linearlayoutitem>
                <wm-linearlayoutitem name="linearlayoutitem3" flexgrow="6" horizontalalign="left">
                    <wm-label padding="unset 4px" name="labelCountValue" class="h4" textalign="left"></wm-label>
                </wm-linearlayoutitem>
            </wm-linearlayout>
            <wm-button class="btn-default" caption="Update CSS" type="button" name="button2" width="100%" on-tap="button2Tap($event, widget)"></wm-button>
            <wm-linearlayout direction="row" spacing="4" padding="4px" name="linearlayout2">
                <wm-linearlayoutitem name="linearlayoutitem3_1" flexgrow="4" horizontalalign="right">
                    <wm-label padding="unset 4px" name="label3" class="h4" caption="Message"></wm-label>
                </wm-linearlayoutitem>
                <wm-linearlayoutitem flexgrow="9" name="linearlayoutitem4" horizontalalign="left">
                    <wm-label padding="unset 4px" name="labelMessage" class="h4"></wm-label>
                </wm-linearlayoutitem>
            </wm-linearlayout>
            <wm-button class="btn-default" caption="Inject Post Message" type="button" name="button3" width="100%" on-tap="button3Tap($event, widget)"></wm-button>
        </wm-page-content>
    </wm-content>
</wm-page>

Script​

Page.count = 0;
Page.onReady = function() {};
Page.webview1Load = function($event, widget) {};
Page.button1Tap = function($event, widget) {
    Page.Widgets.webview1.executeScript(`function() {
        return document.querySelector('p[name="count"]').textContent;
    }()`).then(function(result) {
        Page.Widgets.labelCountValue.caption = result;
        Page.refresh();
    });

};
Page.button2Tap = function($event, widget) {
    if (Page.count % 2 === 0) {
        Page.Widgets.webview1.insertCSS(`
        .wm-app .app-label {
            color: red;
        }
    `);
    } else {
        Page.Widgets.webview1.insertCSS(`
        .wm-app .app-label {
            color: green;
        }
    `);
    }
    Page.count = Page.count + 1;
};
Page.webview1Message = function($event, widget) {
    var data = $event.nativeEvent && $event.nativeEvent.data;
    Page.Widgets.labelMessage.caption = data.split(":").pop();
};

Preview​