Client
Languages, features, plug-ins, platform and back-end
This is an example regarding client management:
<!DOCTYPE html>
<html>
<head>
<!-- This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="canonical" href="https://crossbrowdy.com/examples/client/languages_features_plugins_platform_backend/try" />
<title>Loading... - Example</title>
<!-- Loads the needed CSS files: -->
<link rel="stylesheet" type="text/css" href="main.css" />
<!-- Loads CrossBrowdy.js (main file): -->
<!-- Note: it is recommended to download CrossBrowdy instead of hotlinking the online version. This is just for the example! -->
<script src="https://crossbrowdy.com/CrossBrowdy/CrossBrowdy.js" type="text/javascript" language="javascript"></script><!-- "type" and "language" parameters for legacy clients. -->
<!-- Loads the other needed script files: -->
<script src="main.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<!-- Information containers: -->
Document title: <span id="document_title">Unknown</span><br />
<br />
Client name: <span id="client_name">Unknown</span><br />
Client version: <span id="client_version">Unknown</span><br />
Client version (main): <span id="client_version_main">Unknown</span><br />
<br />
Canvas element support (natively, with no emulation): <span id="canvas_support">Unknown</span><br />
CSS3 Transform support: <span id="css3_transform_support">Unknown</span><br />
<br />
Flash plug-in: <span id="flash_plugin">Unknown</span><br />
Silverlight plug-in: <span id="silverlight_plugin">Unknown</span><br />
<br />
Node.js: <span id="nodejs_available">Unknown</span><br />
PHP: <span id="php_available">Unknown</span><br />
<br />
Running on Electron: <span id="electron_detected">Unknown</span><br />
Running on NW.js (node-webkit): <span id="nwjs_detected">Unknown</span><br />
<br />
Preferred language (from server if possible): <span id="preferred_language">Unknown</span><br />
Preferred language (from 'navigator' if possible): <span id="preferred_language_navigator">Unknown</span><br />
Preferred language (from client, without using 'navigator'): <span id="preferred_language_client">Unknown</span><br />
Preferred languages, in order of preference (from server if possible): <span id="preferred_languages">Unknown</span><br />
Preferred languages, in order of preference (from 'navigator' if possible): <span id="preferred_languages_navigator">Unknown</span><br />
Preferred languages, in order of preference (from client, without using 'navigator'): <span id="preferred_languages_client">Unknown</span>
<br />
<!-- The "CB_console" element will be used automatically in the case that the client does not support console: -->
<div id="CB_console" style="display:none; visibility:hidden; overflow:scroll;">
<span style="font-weight:bold;">Console:</span><br />
</div>
<div id="crossbrowdy_info"><a href="https://crossbrowdy.com/examples/client/languages_features_plugins_platform_backend" target="_blank">CrossBrowdy.com example</a></div>
</body>
</html>/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */
body { background-color:#aaddee; word-wrap:break-word; }
#crossbrowdy_info { position:fixed; bottom:2px; right:2px; }
#crossbrowdy_info a { color:#00aadd; }
#crossbrowdy_info a:hover { color:#0033aa; }
span { color:#aa0000; }/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */
CB_init(main); //It will call the "main" function when ready.
//This function will be called when CrossBrowdy is ready:
function main()
{
//Sets the desired text as the document title:
CB_Client.setTitle("Client: Languages, features, plug-ins, platform and back-end - Example");
//Shows general client information:
CB_Elements.insertContentById("document_title", CB_Client.getTitle());
CB_Elements.insertContentById("client_name", CB_Client.get());
CB_Elements.insertContentById("client_version", CB_Client.getVersion());
CB_Elements.insertContentById("client_version_main", CB_Client.getVersionMain()); //Just the first number.
//Support of native "canvas" element (with no emulation):
CB_Elements.insertContentById("canvas_support", CB_Client.supportsCanvas() ? "Yes" : "No");
//Support of CSS3 transform:
CB_Elements.insertContentById("css3_transform_support", CB_Client.supportsCSS3Transform() ? "Yes" : "No");
//Flash plug-in detection:
CB_Elements.insertContentById("flash_plugin", CB_Client.supportsFlash() ? CB_Client.getFlashVersion(true) : "No"); //Using "true" to force it to return a string.
//Silverlight plug-in detection:
CB_Elements.insertContentById("silverlight_plugin", CB_Client.supportsSilverlight() ? CB_Client.getSilverlightVersion(true) : "No"); //Using "true" to force it to return a string.
//Node.js detection:
CB_Elements.insertContentById("nodejs_available", CB_Client.supportsNodeJS() ? CB_Client.getNodeJSVersion(true) : "No"); //Using "true" to force it to return a string.
//PHP detection:
CB_Elements.insertContentById("php_available", CB_Client.getPHPVersion() ? CB_Client.getPHPVersion(true) : "No"); //Using "true" to force it to return a string.
//Electron detection:
CB_Elements.insertContentById("electron_detected", CB_Client.isRunningOnElectron() ? "Yes" : "No");
//NW.js (formerly node-webkit) detection:
CB_Elements.insertContentById("nwjs_detected", CB_Client.isRunningOnNWjs() ? "Yes" : "No");
//Shows language information:
showLanguageInformation();
//Setting a function to call whenever the client language is changed:
CB_Client.onLanguageChanges(function(e) { CB_console("Language changed!"); showLanguageInformation(e); });
}
//Shows language information:
function showLanguageInformation(e)
{
//String with the first preferred language detected, with the default options:
CB_Elements.insertContentById("preferred_language", CB_Client.getLanguage());
//String with the first preferred language detected, using 'window.navigator.languages' if possible:
CB_Elements.insertContentById("preferred_language_navigator", CB_Client.getLanguage(true, false));
//String with the first preferred language detected, without using 'window.navigator.languages' but still using client language:
CB_Elements.insertContentById("preferred_language_client", CB_Client.getLanguage(false, false));
//Array of strings with the supported languages detected, with the default options:
CB_Elements.insertContentById("preferred_languages", CB_Client.getLanguages());
//Array of strings with the supported languages detected, using 'window.navigator.languages' if possible:
CB_Elements.insertContentById("preferred_languages_navigator", CB_Client.getLanguages(true, false));
//Array of strings with the supported languages detected, without using 'window.navigator.languages' but still using client languages:
CB_Elements.insertContentById("preferred_languages_client", CB_Client.getLanguages(false, false));
}You can check the Guides & Tutorials category as well as the API documentation in the case you need more information.
All the examples together can be downloaded here.
