Webview

# URL parameter control

Because the JS API executes after a page loads, some Webview settings that must take effect before the page is displayed (for example, verifying a user's identity for sensitive pages, or showing a custom navbar background before the Webview loads) need to be supplied through the URL. The Fxiaoke client supports controlling certain Webview behaviors and appearance by appending parameters to the requested URL.

Example

http://www.fxiaoke.com/fsask/index.html?fs_auth=true&fs_auth_appName=纷享问问&fs_nav_bgcolor=c6a60000

Parameter description

Parameter	Type	Description
fs_nav_title	String	Controls the navigation bar title text, up to 30 characters.
fs_nav_bgcolor	String	Controls the navigation bar color in RRGGBBAA format, e.g. `FAFAFAFF`.
fs_nav_pbcolor	String	Controls the navigation bar progress color in RRGGBBAA format, e.g. `FAFAFAFF`.
fs_nav_fsmenu	Boolean	Whether to show the Fxiaoke menu: `true` to show, `false` to hide (default: shown).
fs_auth	Boolean	Whether to require user authentication. Set `true` to require auth (default: `false`).
fs_auth_appname	String	Application name for authentication; used only when `fs_auth=true`. URL-encode this value when non-empty.

API Name	Description
webview.back	Go back to the previous page
webview.close	Close the current page
webview.open	Open a page
webview.onBackWebview	Android physical-back callback
webview.onCloseWebview	Page close callback

# Back to previous page

Navigate back to the previous page.

Example

FSOpen.webview.back({

});

Method: FSOpen.webview.back JS Version: 2.0.0 Minimum Client: 5.4.0+

# Close current page

Example

FSOpen.webview.close({
    extras: {
        data: 1
    }
});

Method: FSOpen.webview.close JS Version: 2.0.0 Minimum Client: 5.4.0+

Call parameters:

Parameter	Type	Required	Description
extras	Object	No	If the current page was opened via `webview.open`, you can pass `extras` when closing the page; the `extras` object will be delivered to the `onClose` callback of the opener.

# Open a page

Example

FSOpen.webview.open({
    url: 'https://www.fxiaoke.com/jsapi-demo',
    onClose: function(extras) {
        alert('open new window');
    }
});

Method: FSOpen.webview.open JS Version: 2.0.0 Minimum Client: 5.4.0+

Call parameters:

Parameter	Type	Required	Description
url	String	Yes	The page URL to open
onClose	Function	Yes	Callback invoked when the opened page is closed. If the opened page calls `webview.close` with `extras`, that object will be passed to this `onClose` callback.

# Android physical-back callback

Android only. Called when the Android hardware back button is pressed.

Example

FSOpen.webview.onBackWebview({
    onBack: function() {
        alert('back to previous page！');
        FSOpen.webview.back();
    },
    onSuccess: function() {
        alert('现在请点击物理返回键');
    }
});

Method: FSOpen.webview.onBackWebview JS Version: 2.0.0 Minimum Client: 5.4.0+

Call parameters:

Parameter	Type	Required	Description
onBack	Function	Yes	Callback for the hardware back press. If a developer provides `onBack`, make sure to call `FSOpen.webview.back()` when appropriate; otherwise the Webview will not automatically navigate back. If `onBack` is not provided, the Webview will perform the default back behavior.

# Page close callback

Callback invoked when the Webview window is closed, including the top-bar close button and the Android hardware back button.

Example

FSOpen.webview.onCloseWebview({
    onClose: function() {
        alert('我要关闭了！');
        FSOpen.webview.close();
    },
    onSuccess: function() {
        alert('现在请点击回退按钮退出当前页面');
    }
});

Method: FSOpen.webview.onCloseWebview JS Version: 2.0.0 Minimum Client: 5.4.0+

Call parameters:

Parameter	Type	Required	Description
onClose	Function	Yes	Callback for page close. If a developer provides `onClose`, make sure to call `FSOpen.webview.close()` when appropriate; otherwise the Webview will not automatically close. If `onClose` is not provided, the Webview will close automatically.

# Screen control

API Name	Description
webview.setOrientation	Set orientation

# Set orientation

Example

FSOpen.webview.setOrientation({
    orientation: 'portrait'
});

Method: FSOpen.webview.setOrientation JS Version: 2.0.0 Minimum Client: 5.4.0+

Call parameters:

Parameter	Type	Required	Description
orientation	String	No	`portrait` locks the screen to portrait, `landscape` locks to landscape, `useSysConfig` follows the system setting. Default: `portrait`.

API Name	Description
webview.navbar.setTitle	Set navigation bar title
webview.navbar.setMiddleBtn	Set middle (?) button (help link)
webview.navbar.setLeftBtn	Set left navigation button
webview.navbar.setRightBtns	Set right navigation buttons
webview.navbar.removeRightBtns	Remove all right-side buttons set by API
webview.navbar.showMenu	Show the "More" menu
webview.navbar.hideMenu	Hide the "More" menu

Example

FSOpen.webview.navbar.setTitle({
    title: '纷享JSAPI'
});

Method: FSOpen.webview.navbar.setTitle JS Version: 2.0.0 Minimum Client: 5.4.0+

Call parameters:

Parameter	Type	Required	Description
title	String	No	Title text to display (default: empty)

# Set middle help link

You can show a question-mark icon to the right of the title and define a link to open when it is clicked.

Example

FSOpen.webview.navbar.setMiddleBtn({
    onClick: function() {
        FSOpen.webview.open({
            url: 'https://www.fxiaoke.com/aboutus/index.html'
        });
    }
});

Method: FSOpen.webview.navbar.setMiddleBtn JS Version: 2.0.0 Minimum Client: 5.4.0+

Call parameters:

Parameter	Type	Required	Description
onClick	Function	No	Custom callback for the button

See the middle button example for illustrations: https://open.fxiaoke.com/open/openindex/wiki.html#{navbar.setMiddleBtn}

Example

FSOpen.webview.navbar.setLeftBtn({
    text: '关闭',
    onClick: function() {
        FSOpen.webview.close();
    }
});

Method: FSOpen.webview.navbar.setLeftBtn JS Version: 2.0.0 Minimum Client: 5.4.0+

Call parameters:

Parameter	Type	Required	Description
text	String	Yes	Text for the custom button
onClick	Function	No	Click callback. If provided, make sure to call `FSOpen.webview.close()` when appropriate; otherwise the Webview will automatically close.

# Set right-side buttons

You can display one or more custom buttons on the right side of the navigation bar. When more than two buttons are set, extra buttons will be placed in the "More" menu.

See the middle button example for illustrations: https://open.fxiaoke.com/open/openindex/wiki.html#{navbar.setMiddleBtn}

Example

var btns = [
    {btnId: '1', icon: 'fav', text: '收藏'},
    {btnId: '2', icon: 'add', text: '添加'}
];
FSOpen.webview.navbar.setRightBtns({
    items: btns,
    onClick: function(resp) {
        // {btnId: '1'}
        alert('点击了按钮：' + btns[resp.btnId - 1].text);
    }
});

Method: FSOpen.webview.navbar.setRightBtns JS Version: 2.0.0 Minimum Client: 5.4.0+

Call parameters:

Parameter	Type	Required	Description
items	Array[Object]	Yes	Array of button objects. When combined with `showMenu`, `setRightBtns` may show only the first button on some pages.
onClick	Function	No	Click callback; `btnId` of the clicked item will be passed to the callback.

Item object parameters in items:

Parameter	Type	Required	Description
btnId	String	Yes	Unique identifier for each item
icon	String	Yes	Predefined icon key; icon takes precedence over `text`
text	String	Yes	Text label for the item

Available icon values:

Value	Description
fav	Favorite
add	Add
calendar	Calendar
search	Search
delete	Delete
scan	Scan
structure	Structure
edit	Edit
group	Group
individual	Individual
more	More
setting	Settings
chat	Chat
save	Save

onClick callback parameter:

Parameter	Type	Description
btnId	String	The id of the clicked item

# Remove all right-side buttons

Note: this API only removes buttons set via FSOpen.webview.navbar.setRightBtns; it does not remove items added by FSOpen.webview.navbar.showMenu.

Example

FSOpen.webview.navbar.removeRightBtns();

Method: FSOpen.webview.navbar.removeRightBtns JS Version: 2.0.0 Minimum Client: 5.4.0+

Show a built-in "More" menu provided by Fxiaoke. The menu contains common items such as Favorite, Share to Enterprise Chat, Share to Feed, Share to WeChat, etc.

Typically developers just configure the menu list to display; no implementation is required for each item. For custom behavior, you can implement global callbacks—see the "Webview — More Menu Callbacks" section.

Example

FSOpen.webview.navbar.showMenu({
    menuList: [
        'service:favorite',
        'share:toConversation',
        'share:toFeed',
        'separator',
        'share:toCRMContact',
        'share:toWXFriend',
        'share:toWXMoments',
        'share:toQQFriend',
        'share:viaMail',
        'share:viaSMS',
        'separator', // separator can be used multiple times
        'page:refresh',
        'page:copyURL',
        'page:generateQR',
        'page:openWithBrowser'
    ]
});

Method: FSOpen.webview.navbar.showMenu JS Version: 2.0.0 Minimum Client: 5.4.0+

Call parameters:

Parameter	Type	Required	Description
menuList	Array[String]	Yes	List of menu item keys to display (default: all)

Menu item keys:

Key	Description
service:favorite	Favorite the current page
share:toConversation	Share to Enterprise Chat
share:toFeed	Share to Work Feed
share:toCRMContact	Share to CRM contact
share:toWXFriend	Share to WeChat friend
share:toWXMoments	Share to WeChat Moments
share:toQQFriend	Share to QQ friend
share:viaMail	Share via email
share:viaSMS	Share via SMS
page:refresh	Refresh page
page:copyURL	Copy URL
page:generateQR	Generate QR code
page:openWithBrowser	Open in external browser
separator	Separator used to group menu items

Example

FSOpen.webview.navbar.hideMenu();

Method: FSOpen.webview.navbar.hideMenu JS Version: 2.0.0 Minimum Client: 5.4.0+

Global callbacks for customizing share content when using FSOpen.webview.navbar.showMenu.

API Name	Description
webview.menu.onShareToConversation	Share to Enterprise Chat
webview.menu.onShareToFeed	Share to Work Feed
webview.menu.onShareToCRMContact	Share to CRM Contact
webview.menu.onShareToWXFriend	Share to WeChat Friend
webview.menu.onShareToWXMoments	Share to WeChat Moments
webview.menu.onShareToQQFriend	Share to QQ Friend
webview.menu.onShareViaSMS	Share via SMS
webview.menu.onShareViaMail	Share via Email

FSOpen.webview.menu.onShareToConversation({
    title: 'Fxiaoke',
    desc: 'Mobile Office, Work Freely',
    link: 'http://www.fxiaoke.com',
    imgUrl: 'https://www.fxiaoke.com/static/img/index/logo.png?v=5.1.5',
    onSuccess: function(resp) {
        // Share analytics
    },
    onFail: function(error) {
        if (error.errorCode == 40050) {
            alert('User canceled');
            return;
        }
        alert('Error: ' + error.errorCode);
    }
});

Method: FSOpen.webview.menu.onShareToConversation
JS Version: 2.0.0
Minimum Client: 5.4.0

Parameters:

Param	Type	Required	Description
title	String	No	Defaults to page title
desc	String	No	Defaults to meta description
link	String	No	Defaults to current URL
imgUrl	String	No	Defaults to Fxiaoke icon

FSOpen.webview.menu.onShareToFeed({
    title: 'Fxiaoke',
    desc: 'Mobile Office, Work Freely',
    link: 'http://www.fxiaoke.com',
    imgUrl: 'https://www.fxiaoke.com/static/img/index/logo.png?v=5.1.5',
    onSuccess: function(resp) {
        // Share analytics
    },
    onFail: function(error) {
        if (error.errorCode == 40050) {
            alert('User canceled');
            return;
        }
        alert('Error: ' + error.errorCode);
    }
});

Method: FSOpen.webview.menu.onShareToFeed
JS Version: 2.0.0
Minimum Client: 5.4.0

FSOpen.webview.menu.onShareToCRMContact({
    link: location.href,
    onSuccess: function(resp) {
        // Share analytics
    },
    onFail: function(error) {
        if (error.errorCode == 40050) {
            alert('User canceled');
            return;
        }
        alert('Error: ' + error.errorCode);
    }
});

Method: FSOpen.webview.menu.onShareToCRMContact
JS Version: 2.0.0
Minimum Client: 5.4.0

Parameters:

Param	Type	Required	Description
link	String	No	URL to share

FSOpen.webview.menu.onShareToWXFriend({
    title: 'Fxiaoke',
    link: 'http://www.fxiaoke.com',
    imgUrl: 'https://www.fxiaoke.com/static/img/index/logo.png?v=5.1.5',
    onSuccess: function(resp) {
        // Share analytics
    },
    onFail: function(error) {
        if (error.errorCode == 40050) {
            alert('User canceled');
            return;
        }
        alert('Error: ' + error.errorCode);
    }
});

Method: FSOpen.webview.menu.onShareToWXFriend
JS Version: 2.0.0
Minimum Client: 5.4.0

FSOpen.webview.menu.onShareToWXMoments({
    title: 'Fxiaoke',
    link: 'http://www.fxiaoke.com',
    imgUrl: 'https://www.fxiaoke.com/static/img/index/logo.png?v=5.1.5',
    onSuccess: function(resp) {
        // Share analytics
    },
    onFail: function(error) {
        if (error.errorCode == 40050) {
            alert('User canceled');
            return;
        }
        alert('Error: ' + error.errorCode);
    }
});

Method: FSOpen.webview.menu.onShareToWXMoments
JS Version: 2.0.0
Minimum Client: 5.4.0

FSOpen.webview.menu.onShareToQQFriend({
    title: 'Fxiaoke',
    desc: 'Mobile Office, Work Freely',
    link: 'http://www.fxiaoke.com',
    imgUrl: 'https://www.fxiaoke.com/static/img/index/logo.png?v=5.1.5',
    onSuccess: function(resp) {
        // Share analytics
    },
    onFail: function(error) {
        if (error.errorCode == 40050) {
            alert('User canceled');
            return;
        }
        alert('Error: ' + error.errorCode);
    }
});

Method: FSOpen.webview.menu.onShareToQQFriend
JS Version: 2.0.0
Minimum Client: 5.4.0

FSOpen.webview.menu.onShareViaSMS({
    content: 'Mobile Office {url}',
    onSuccess: function(resp) {
        // Share analytics
    },
    onFail: function(error) {
        if (error.errorCode == 40050) {
            alert('User canceled');
            return;
        }
        alert('Error: ' + error.errorCode);
    }
});

Method: FSOpen.webview.menu.onShareViaSMS
JS Version: 2.0.0
Minimum Client: 5.4.0

Parameters:

Param	Type	Required	Description
content	String	No	Max 140 chars, {url} for page link

FSOpen.webview.menu.onShareViaMail({
    title: 'Fxiaoke',
    content: 'Mobile Office {url}',
    onSuccess: function(resp) {
        // Share analytics
    },
    onFail: function(error) {
        if (error.errorCode == 40050) {
            alert('User canceled');
            return;
        }
        alert('Error: ' + error.errorCode);
    }
});

Method: FSOpen.webview.menu.onShareViaMail
JS Version: 2.0.0
Minimum Client: 5.4.0

Parameters:

Param	Type	Required	Description
title	String	No	Email subject
content	String	No	{url} for page link

# Page Operations

API Name	Description
webview.page.copyURL	Copy page URL
webview.page.generateQR	Generate QR code
webview.page.openWithBrowser	Open in browser
webview.page.refresh	Refresh page

# Copy Page URL

FSOpen.webview.page.copyURL();

Method: FSOpen.webview.page.copyURL
JS Version: 2.0.0
Minimum Client: 5.4.0

# Generate QR Code

FSOpen.webview.page.generateQR();

Method: FSOpen.webview.page.generateQR
JS Version: 2.0.0
Minimum Client: 5.4.0

# Open in Browser

FSOpen.webview.page.openWithBrowser();

Method: FSOpen.webview.page.openWithBrowser
JS Version: 2.0.0
Minimum Client: 5.4.0

# Refresh Page

FSOpen.webview.page.refresh();

Method: FSOpen.webview.page.refresh
JS Version: 2.0.0
Minimum Client: 5.4.0

# Bounce (iOS Only)

API Name	Description
webview.bounce.enable	Enable bounce effect
webview.bounce.disable	Disable bounce effect

# Enable Bounce

FSOpen.webview.bounce.enable();

Method: FSOpen.webview.bounce.enable
JS Version: 2.0.0
Minimum Client: 5.4.0

# Disable Bounce

FSOpen.webview.bounce.disable();

Method: FSOpen.webview.bounce.disable
JS Version: 2.0.0
Minimum Client: 5.4.0

# Pull-to-Refresh

API Name	Description
webview.pullRefresh.enable	Enable pull-to-refresh
webview.pullRefresh.disable	Disable pull-to-refresh
webview.pullRefresh.stop	Stop refresh animation

# Enable Pull-to-Refresh

FSOpen.webview.pullRefresh.enable({
    onPullRefresh: function() {
        setTimeout(function() {
            alert('Data loaded');
            FSOpen.webview.pullRefresh.stop();
        }, 3000);
    },
    onSuccess: function() {
        alert('Try pulling down');
    }
});

Method: FSOpen.webview.pullRefresh.enable
JS Version: 2.0.0
Minimum Client: 5.4.0

Parameters:

Param	Type	Required	Description
onPullRefresh	Function	No	Callback when refresh triggered

# Disable Pull-to-Refresh

FSOpen.webview.pullRefresh.disable();

Method: FSOpen.webview.pullRefresh.disable
JS Version: 2.0.0
Minimum Client: 5.4.0

# Stop Refresh Animation

FSOpen.webview.pullRefresh.stop();

Method: FSOpen.webview.pullRefresh.stop
JS Version: 2.0.0
Minimum Client: 5.4.0

← Launcher Modal →

Webview

# URL parameter control

# Webview navigation actions

# Back to previous page

# Close current page

# Open a page

# Android physical-back callback

# Page close callback

# Screen control

# Set orientation

# Navigation bar

# Set navigation bar title

# Set middle help link

# Set left navigation button

# Set right-side buttons

# Remove all right-side buttons

# Show the "More" menu

# Hide the "More" menu

# More Menu Callbacks

# Page Operations

# Copy Page URL

# Generate QR Code

# Open in Browser

# Refresh Page

# Bounce (iOS Only)

# Enable Bounce

# Disable Bounce

# Pull-to-Refresh

# Enable Pull-to-Refresh

# Disable Pull-to-Refresh

# Stop Refresh Animation

Webview

# URL parameter control

# Webview navigation actions

# Back to previous page

# Close current page

# Open a page

# Android physical-back callback

# Page close callback

# Screen control

# Set orientation

# Navigation bar

# Set navigation bar title

# Set middle help link

# Set left navigation button

# Set right-side buttons

# Remove all right-side buttons

# Show the "More" menu

# Hide the "More" menu

# More Menu Callbacks

# Share to Enterprise Chat

# Share to Work Feed

# Share to CRM Contact

# Share to WeChat Friend

# Share to WeChat Moments

# Share to QQ Friend

# Share via SMS

# Share via Email

# Page Operations

# Copy Page URL

# Generate QR Code

# Open in Browser

# Refresh Page

# Bounce (iOS Only)

# Enable Bounce

# Disable Bounce

# Pull-to-Refresh

# Enable Pull-to-Refresh

# Disable Pull-to-Refresh

# Stop Refresh Animation