CrossBrowdy - Examples

Client

Exiting the app and address management

This is an example that shows how to manage the current address, redirections and closing the app:

index.html:

<!DOCTYPE html>
<html>
	<head>
		<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" />
		<title>Client: Exiting the app and address management - Example</title>
		<!-- Loads the needed CSS files: -->
		<link rel="stylesheet" type="text/css" href="main.css" />
		<!-- Loads CrossBrowdy.js (main file): -->
		<script src="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: -->
		Current location: <span id="location_current">Unknown</span><br />
		Current location (without file): <span id="location_current_no_file">Unknown</span><br />
		<br />
		Running locally (through "file:" protocol): <span id="running_locally">Unknown</span><br />
		<br />
		<button onClick="exit();">Exit app</button><br />
		<br />
		<button onClick="redirectTo();">Redirect without URI data</button><br />
		<br />
		<button onClick="redirectTo('data=1&amp;data2=2');">Redirect with URI data</button>
		<br />
		<!-- The "CB_console" element will be used automatically in the case that the client does not support console: -->
		<div id="CB_console" style="visibility:hidden; overflow:scroll;">
			<span style="font-weight:bold;">Console:</span><br />
		</div>
		<div id="crossbrowdy_info"><a href="/guides#examples" target="_blank">CrossBrowdy.com</a> example</div>
	</body>
</html>

main.css:

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; }
button { color:#006600; }
button:hover { color:#660000; cursor:pointer; }

main.js:

CB_init(main); //It will call the "main" function when ready.


//This function will be called when CrossBrowdy is ready:
function main()
{
	//Gets the current address (location):
	CB_Elements.insertContentById("location_current", CB_Client.getLocation());
	CB_Elements.insertContentById("location_current_no_file", CB_Client.getLocationWithoutFile());
	
	//Tells whether it is running locally (using the "file:" protocol):
	CB_Elements.insertContentById("running_locally", CB_Client.isRunningLocally() ? "Yes" : "No");
}


//Exits the app:
function exit()
{
	CB_Client.exit(); //By default, it will use internal fallbacks and workarounds if standard methods fail.
}


//Redirects the app:
function redirectTo(data)
{
	//If the first URI already has data, the data given will be attached to it (stripping/adding "&" and "?" symbols automatically):
	CB_Client.redirectTo("http://crossbrowdy.com/", data);
}

Try this example

You can check the Guides & Tutorials category as well as the API documentation in the case you need more information.

Go back to Guides & Tutorials

« PrevReturnNext »
CrossBrowdy by Joan Alba Maldonado