<meta charset=utf-8>

<title>wxPython CEF 3 example (utf-8: ąś)</title>

<style>

body { font: 13px Segoe UI, Arial; line-height: 1.4em; }

pre { background: #ddd; font: 12px Consolas, Courier New; }

</style>

<script>

function ShowSource(func) {

if (!("sources" in window) || !(func in window.sources)) {

document.write("<pre style='color:red'>Source not found: "+

""+func+"</pre>");

return;

}

source = window.sources[func];

if (source.match(/^( )/)) {

source = source.replace(/^( )/g, "");

source = source.replace(/([\r\n])( )/g, "$1");

}

source = source.replace(/</g, "&lt;");

source = source.replace(/>/g, "&gt;");

document.write("<pre><code class='language-python'>"+

""+source+"</pre></code>");

}

</script>

<link href="prism.css" rel="stylesheet">

Use the mouse context menu to go Back/Forward in history navigation.

<h2>Table of contents</h2>

<li><a href="#google-search">Google search</a></li>

<li><a href="#user-agent">User agent</a></li>

<li><a href="#popups">Popups</a></li>

<li><a href="#html5-video">HTML 5 video</a></li>

<li><a href="#javascript-bindings">Javascript bindings</a></li>

<li><a href="#javascript-callbacks">Javascript callbacks</a></li>

<li><a href="#python-callbacks">Python callbacks</a></li>

<li><a href="#display-handler">Display handler</a></li>

<li><a href="#keyboard-handler">Keyboard handler</a></li>

<li><a href="#request-handler">Request handler</a></li>

<li><a href="#cookie-tests">Cookie tests</a></li>

<li><a href="#load-handler">Load handler</a></li>

<li><a href="#javascript-dialog-handler">Javascript Dialog handler</a></li>

<li><a href="#other-tests">Other tests</a></li>

<a name="google-search"></a>

<h2>Google search</h2>

<a href="http://www.google.com/">http://www.google.com/</a>

<a name="user-agent"></a>

<h2>User agent</h2>

<a name="popups"></a>

<h2>Popups</h2>

<li><a href="javascript:window.open('wxpython.html')">

window.open('wxpython.html')</a>

</li>

<li><a target=_blank href="wxpython.html">

href="wxpython.html"</a>

</li>

<h3>CreateAnotherBrowser</h3>

This will create a window on its own and embed browser in it.

When using "window.open" the window is created implicitilly

by CEF. You can intercept such popup creation using the

OnBeforePopup callback in LifespanHandler. You can return

True in OnBeforePopup and create popup window on your own

using the CreateAnotherBrowser function.

<a href="javascript:external.CreateAnotherBrowser()">

external.CreateAnotherBrowser()</a>

<a name="html5-video"></a>

<h2>HTML5 video and accelerated content</h2>

<a href="http://www.youtube.com/watch?v=siOHh0uzcuY&html5=True">

HTML 5 video</a><br>

<a href="http://mudcu.be/labs/JS1k/BreathingGalaxies.html">

Accelerated canvas</a><br>

<a href="http://www.webkit.org/blog-files/3d-transforms/poster-circle.html">

Accelerated layers</a><br>

<a name="javascript-bindings"></a>

<h2>Javascript bindings</h2>

<h3>PyPrint</h3>

<a href="javascript:window.PyPrint('printing in python console from js')">

window.PyPrint('printing in python console from js')</a>

<h3>Window properties</h3>

<pre><code class="language-python">jsBindings.SetProperty("pyProperty", "This was set in Python")

jsBindings.SetProperty("pyConfig", ["This was set in Python",

{"name": "Nested dictionary", "isNested": True},

[1,"2", None]])

<a href="javascript:window.alert(window.pyProperty)">

window.alert(window.pyProperty)</a><br>

<a href="javascript:window.alert(JSON.stringify(window.pyConfig))">

window.alert(JSON.stringify(window.pyConfig))</a>

<h3>Print</h3>

<a href="javascript:external.Print('printing again from js')">

external.Print('printing again from js')</a>

<h3>TestAllTypes</h3>

<a href="javascript:external.TestAllTypes(undefined, null, true, 1,

[1, 2], [1, [2.1, 'nested array']], [{key1: [{}]}])">

external.TestAllTypes</a>

<small>(undefined, null, true, 1,

((1&lt;&lt;31)>>>0), 2.14, 'Date not yet supported', 'string',

{key1: 1, key2: 2}, {key1: {'key1.1': 'nested object'}, 'key1.2': [1]},

[1, 2], [1, [2.1, 'nested array']], [{key1: [{}]}])</small>

<h3>ExecuteFunction</h3>

function JavascriptAlert(message) { window.alert(message); }

<pre><code class="language-javascript">&lt;script&gt;

function JavascriptAlert(message) { window.alert(message); }

&lt;/script&gt;

<a href="javascript:external.ExecuteFunction('JavascriptAlert',

'python called from js and then js called from python')">

external.ExecuteFunction('JavascriptAlert',

'python called from js and then js called from python')</a>

<h3>GetSource, GetText</h3>

<a href="javascript:external.GetSource()">

external.GetSource()</a>

<a href="javascript:external.GetText()">

external.GetText()</a>

<a name="javascript-callbacks"></a>

<h2>Javascript callbacks</h2>

<h3>TestJSCallback</h3>

function JSCallback(arg1) {

window.alert(arg1)

<pre><code class="language-javascript">&lt;script&gt;

function JSCallback(arg1) {

window.alert(arg1)

}

&lt;/script&gt;

<a href="javascript:external.TestJSCallback(JSCallback)">

external.TestJSCallback(JSCallback)</a>

<h3>TestJSCallbackComplexArguments</h3>

function JSCallback2() {

window.alert(JSON.stringify(arguments))

<pre><code class="language-javascript">&lt;script&gt;

function JSCallback2() {

window.alert(JSON.stringify(arguments))

}

&lt;/script&gt;

<a href="javascript:external.TestJSCallbackComplexArguments(

{'myCallback':JSCallback2})">

external.TestJSCallbackComplexArguments({"myCallback": JSCallback2})

</a>

<a name="python-callbacks"></a>

<h2>Python callbacks</h2>

<h3>TestPythonCallback</h3>

function JSCallback3(pyCallback) {

pyCallback(1, 2.14, "string", [1, [2, {"key": "value"}]], {"list": [1,2]});

<pre><code class="language-javascript">&lt;script&gt;

function JSCallback3(pyCallback) {

pyCallback(1, 2.14, "string", [1, [2, {"key": "value"}]], {"list": [1,2]});

}

&lt;/script&gt;

<a href="javascript:external.TestPythonCallback(JSCallback3)">

external.TestPythonCallback(JSCallback3)</a>

<a name="display-handler"></a>

<h2>Display handler</h2>

<h3>OnAddressChange</h3>

See messages in the console during loading of a webpage.

<h3>OnTitleChange</h3>

See messages in the console during loading of a webpage.

<h3>OnTooltip</h3>

See messages in the console when hovering over a google logo:

<a href="http://www.google.com/">http://www.google.com/</a>

<h3>OnStatusMessage</h3>

See messages in the console when hovering over links.

<h3>OnConsoleMessage</h3>

Try this:

<a href="http://patik.com/code/console-log-polyfill/">

http://patik.com/code/console-log-polyfill/</a>

<a name="keyboard-handler"></a>

<h2>Keyboard handler</h2>

Press F5 to reload the page.<br>

On Linux it is required to click anywhere in the window first

so that keyboard focus is set. See Issue 77 in the CEF Python

Issue Tracker.

<a name="request-handler"></a>

<h2>Request handler</h2>

<h3>OnBeforeResourceLoad</h3>

See messages in the console.

<h3>OnResourceRedirect</h3>

Try this:

<a href="http://tinyurl.com/google404redirect">

http://tinyurl.com/google404redirect</a>

<h3>GetAuthCredentials</h3>

Try this:

<a href="http://browserspy.dk/password-ok.php">

http://browserspy.dk/password-ok.php</a>

<h3>OnQuotaRequest</h3>

function DoRequestQuota() {

// Request Quota (only for File System API)

try {

navigator.webkitPersistentStorage.requestQuota(PERSISTENT, 1024*1024,

function(bytes){ window.alert("Granted bytes: "+bytes);},

function(error){ window.alert(error); });

} catch(e) {

navigator.webkitPersistentStorage.requestQuota(1024*1024,

function(bytes){ window.alert("Granted bytes: "+bytes);},

function(error){ window.alert(error); });

}

<pre><code class="language-javascript">&lt;script&gt;

function DoRequestQuota() {

// Request Quota (only for File System API)

try {

navigator.webkitPersistentStorage.requestQuota(PERSISTENT, 1024*1024,

function(bytes){ window.alert("Granted bytes: "+bytes);},

function(error){ window.alert(error); });

} catch(e) {

navigator.webkitPersistentStorage.requestQuota(1024*1024,

function(bytes){ window.alert("Granted bytes: "+bytes);},

function(error){ window.alert(error); });

}

}

&lt;/script&gt;

Try this:

<a href="https://googledrive.com/host/0B1di2XiBBfacMnhRRkI1YlotUEk/requestquota.html">

https://googledrive.com/host/0B1di2XiBBfacMnhRRkI1YlotUEk/requestquota.html</a>

<h3>OnProtocolExecution</h3>

Try this:

<a href="magnet:?xt=urn:btih:a4224b45b27f436374391379cc5c7e629e2e5189">

magnet:?xt=urn:btih:a4224b45b27f436374391379cc5c7e629e2e5189</a>

<h3>_OnBeforePluginLoad</h3>

Try OnBeforePluginLoad() with Flash:

<a href="http://www.adobe.com/software/flash/about/">

http://www.adobe.com/software/flash/about/</a>

<h3>_OnCertificateError</h3>

The url below won't be allowed. Click twice "Back" from context menu to return back

here after visiting the url:<br>

<a href="https://tv.eurosport.com/do-not-allow">

https://tv.eurosport.com/do-not-allow</a>

This url will be allowed:<br>

<a href="https://tv.eurosport.com/">

https://tv.eurosport.com/</a>

<h3>OnRendererProcessTerminated</h3>

Try to terminate the "subprocess.exe" renderer process through

task manager.

<h3>OnPluginCrashed</h3>

No test for that yet.

<a name="cookie-tests"></a>

<h2>Cookie tests</h2>

See messages in the console.

<h3>GetCookieManager</h3>

RequestHandler.GetCookieManager() - an example of having an unique

cookie manager for each browser.

<li>Visit the url below and set some cookies. Use "Back" from

context menu to get back here (you might have to click "Back"

multiple times).<br>

Visit it in the current browser:<br>

<a href="http://www.html-kit.com/tools/cookietester/">

http://www.html-kit.com/tools/cookietester/</a>

<br>

Or visit it in a js popup:<br>

<a href="javascript:window.open('http://www.html-kit.com/tools/cookietester/')">

javascript:window.open('http://www.html-kit.com/tools/cookietester/')</a>

</li>

<li>Open cookietester in a popup:<br>

<a href="javascript:external.CreateAnotherBrowser('http://www.html-kit.com/tools/cookietester/')">

javascript:external.CreateAnotherBrowser('http://www.html-kit.com/tools/cookietester/')</a>

</li>

Popup browsers created javascript's window.open share

the same renderer process and request context. If you want

to have separate cookie managers for popups created using

window.open then you have to implement the

LifespanHandler.`OnBeforePopup` callback. Return True in that

callback to cancel popup creation and instead create the

window on your own and embed browser in it. The CreateAnotherBrowser()

function from the wxpython example does that.

<h3>VisitAllCookies</h3>

Visit all cookies:

<a href="javascript:external.VisitAllCookies()">external.VisitAllCookies()</a>

Note: visit some http:// webpage first, otherwise cookie manager is not

yet created.

<h3>VisitUrlCookies</h3>

Visit a subset of cookies for the given url:

<a href="javascript:external.VisitUrlCookies()">

external.VisitUrlCookies("http://www.html-kit.com/tools/cookietester/")</a>

<h3>SetCookie</h3>

Set a cookie:

<a href="javascript:external.SetCookie()">external.SetCookie()</a>

<h3>DeleteCookies</h3>

Delete the single cookie previously created via SetCookie():

<a href="javascript:external.DeleteCookies()">

external.DeleteCookies()</a>

<a name="load-handler"></a>

<h2>Load Handler</h2>

See messages in the console during loading of a webpage.

<h3>OnLoadingStateChange</h3>

<h3>OnLoadStart</h3>

<h3>OnLoadEnd</h3>

<h3>OnLoadError</h3>

Try this:

<a href="http://www.non-existent.nono/">

http://www.non-existent.nono/</a>

Note: after you see the custom error message you have to hit

twice the Back from the context menu, to get back to this page.

<a name="javascript-dialog-handler"></a>

<h2>Javascript Dialog Handler</h2>

See messages in the console.

<h3>OnJavascriptDialog</h3>

<a href="javascript:alert('test js dialog handler')">

alert('Test js dialog handler')

<h3>OnBeforeUnloadJavascriptDialog</h3>

function TestOnBeforeUnloadJavascriptDialog() {

window.onbeforeunload = function() {

return 'Testing the OnBeforeUnloadJavascriptDialog() callback';

}

location.href = "wxpython.html";

<pre><code class="language-javascript">&lt;script&gt;

function TestOnBeforeUnloadJavascriptDialog() {

window.onbeforeunload = function() {

return 'Testing the OnBeforeUnloadJavascriptDialog() callback';

}

location.href = "wxpython.html";

}

&lt;/script&gt;

<a href="javascript:TestOnBeforeUnloadJavascriptDialog()">

TestOnBeforeUnloadJavascriptDialog()

<h3>OnResetJavascriptDialogState</h3>

<h3>OnJavascriptDialogClosed</h3>

<a name="other-tests"></a>

<h2>Other tests</h2>

<h3>GoBack</h3>

<a href="javascript:external.GoBack()">external.GoBack()</a>

<h3>GoForward</h3>

<a href="javascript:external.GoForward()">external.GoForward()</a>

<a name="test-hash"></a>

<script src="prism.js"></script>