Skip to main content

Webview samples

A demo​

local html = [=[
<!DOCTYPE html>
<html>
    <head>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.json.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#toast_content").val("toast content");
        $("#close_page").click(function(){
            $.post(
                "/proc_queue_push",
                '{"key": "msg from webview","value": "close"}',
                function(){}
            );
        });

        $("#show_toast").click(function(){
            $.post(
                "/proc_put",
                $.toJSON({
                    key:"toast content",
                    value:$("#toast_content").val()
                }),
                function(){}
            );
            $.post(
                "/proc_queue_push",
                '{"key": "msg from webview","value": "show toast"}',
                function(){}
            );
        });

        $("#slide_down").click(function(){
            $.post(
                "/proc_queue_push",
                '{"key": "msg from webview","value": "slide down"}',
                function(){}
            );
            $(this).hide();
        });

        $("#full_vertical").click(function(){
            $.post(
                "/proc_queue_push",
                '{"key": "msg from webview","value": "portrait full"}',
                function(){}
            );
        });

        $("#full_landscape").click(function(){
            $.post(
                "/proc_queue_push",
                '{"key": "msg from webview","value": "landscape full"}',
                function(){}
            );
        });
    });
    </script>
    </head>
    <body>
        <p>webview demo</p>
        <p><button id="close_page" type="button">close page</button></p>
        <p><button id="show_toast" type="button">show toast</button><input type="text" id="toast_content" /></p>
        <p><button id="full_vertical" type="button">portrait full</button><button id="full_landscape" type="button">landscape full</button></p>
        <p><button id="slide_down" type="button">slide down</button></p>
        <select>
            <option value="o1">option 1</option>
            <option value="o2">option 2</option>
            <option value="o3">option 3</option>
            <option value="o4">option 4</option>
        </select>
    </body>
</html>
]=]
--
local w, h = screen.size()
--
local factor = 1 -- default factor for 2x devices
if w == 1242 or w == 1080 then
    factor = 1.5 -- iPhone 6(S)+ are 3x
elseif w == 320 or w == 768 then
    factor = 0.5 -- iPhone <=3Gs are 1x
end
--
webview.show{ -- reset to top-left
    x = 0,
    y = 0,
    width = w - 40 * factor,
    height = (500) * factor,
    alpha = 0,
    animation_duration = 0,
}
--
webview.show{ -- slide in from top-left in 0.3s
    html = html,
    x = 20 * factor,
    y = 50 * factor,
    width = (w - 40 * factor),
    height = (500) * factor,
    corner_radius = 10,
    alpha = 0.7,
    animation_duration = 0.3,
}
--
proc_queue_clear("msg from webview", "")
local eid = thread.register_event(
    "msg from webview",
    function(val)
        if val == "close" then
            webview.show{
                x = 20 * factor,
                y = 500 * factor * 2,
                width = (w - 40 * factor),
                height = (500 - 70) * factor,
                corner_radius = 10,
                alpha = 0,
                animation_duration = 0.8,
            }
            sys.msleep(800)
            webview.destroy()
            sys.toast("page thread ended")
            return true
        elseif val == "slide down" then
            webview.show{
                x = 20 * factor,
                y = (50 + 300) * factor,
                width = (w - 40  * factor),
                height = (500 - 70) * factor,
                corner_radius = 10,
                alpha = 0.7,
                animation_duration = 0.5,
            }
        elseif val == "portrait full" then
            webview.show{}
        elseif val == "landscape full" then
            webview.show{rotate=90}
        elseif val == "show toast" then
            sys.toast(proc_get("toast content"))
        end
    end
)
--
sys.msleep(3000)
sys.toast("main thread ended")

Note: uses non-chapter APIs screen.size, proc_queue_clear, thread.register_event, proc_get, sys.toast, sys.msleep