<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: #eee; font: 13px "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">

<script src="smoke.min.js"></script>

<script>

window.originalAlert = window.alert

window.alert = smoke.alert;

</script>

<link href="smoke.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="#developer-tools">Developer Tools</a></li>

<li><a href="#downloads">Downloads</a></li>

<li><a href="#html-controls">HTML controls</a></li>

<li><a href="#browser-object">Browser object</a></li>

<li><a href="#frame-object">Frame object</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>

<li><a href="javascript:window.open('https://www.google.com/')">

window.open('https://www.google.com/')</a>

</li>

There are problems with keyboard in wxPython when popup windows are created

by CEF (<a href="https://github.com/cztomczak/cefpython/issues/80">

Issue 80</a>). To create the popup window of our own, the

LifespanHandler::OnBeforePopup callback was implemented. Note that this has

its implications, the popup window and parent window will not be able to

script each other. There will be no "window.opener" property available

in the popup window.

See its source:

<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="developer-tools"></a>

<h2>Developer Tools</h2>

You can open devtools popup window in a few different ways:

<li>Call Browser.ShowDevTools() method:

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

external.ShowDevTools()</a></li>

<li>Through mouse context menu</li>

<li>Through F12 key which is handled in KeyboardHandler.OnKeyEvent</li>

<a name="downloads"></a>

<h2>Downloads</h2>

Download sample Ubuntu wallpapers:<br>

<a href="https://cefpython.googlecode.com/files/ubuntu-wallpapers2.zip">

https://cefpython.googlecode.com/files/ubuntu-wallpapers2.zip</a>

Notes: On Linux it seems that OnLoadError with errorCode = ERR_ABORTED

is called even for successful downloads, you can ignore this behavior.

The proper console messages about successful/aborted download originate

from C++ Browser process code, these are:

<pre>Browser: About to download file: ubuntu-wallpapers2.zip

Browser: Download completed, saved to: /Downloads/ubuntu-wallpapers2.zip

If download was aborted the messages will be:

<pre>Browser: About to download file: ubuntu-wallpapers2.zip

Browser: Download was cancelled

Additionally on Linux there are more errors reported by Chromium

about org.gnome.SessionManager.inhibit. These can be safely ignored as well.

A download handler with callbacks like `OnBeforeDownload` and

`OnDownloadUpdated` may be exposed to CEF Python in the future.

<a name="html-controls"></a>

<h2>HTML controls</h2>

<h3>Textarea</h3>

<textarea cols="40" rows="5"></textarea>

<h3>Inputs</h3>

Text: <input type="text"><br>

Password: <input type="password"><br>

<h3>Select</h3>

<select><option>Option 1</option><option>Option 2</option></select>

<h3>Buttons</h3>

Submit: <input type="submit"><br>

Button: <input type="button" value="Button"><br>

<a name="browser-object"></a>

<h2>Browser object</h2>

Tests for the Browser object methods.

<h3>GoBack</h3>

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

<h3>GoForward</h3>

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

<h3>LoadUrl, GetUrl</h3>

<a href="javascript:window.open('data:text/html,Test#Browser.LoadUrl')">

window.open('data:text/html,Test#Browser.LoadUrl')</a>

<h3>SetZoomLevel</h3>

(You must set ApplicationSettings.auto_zooming = "" for SetZoomLevel calls

to work)<br>

<a href="javascript:external.SetZoomLevel(2.0)">external.SetZoomLevel(2.0)</a><br>

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

<h3>ReloadIgnoreCache, StopLoad</h3>

Press F5 to reload page and ignore cache.<br>

Press Esc during webpage loading to abort.<br>

Also, when Esc is pressed OnLoadError may get called. See how abort

of page loading or file download is handled:

<a name="frame-object"></a>

<h2>Frame object</h2>

Tests for the Frame object methods. TODO.

<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', 0, [1,2])">

external.ExecuteFunction('JavascriptAlert',

'python called from js and then js called from python', 0, [1,2])</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 magnet link to download a torrent:

<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 that url:<br>

<a href="https://testssl-expire.disig.sk/index.en.html">

https://testssl-expire.disig.sk/index.en.html</a>

This url will be allowed:<br>

<a href="https://testssl-expire.disig.sk/index.en.html?allow=1">

https://testssl-expire.disig.sk/index.en.html?allow=1</a>

After you've clicked the second url, the first one will now be allowed,

as this is the same domain and it's cached now.

<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>

</li>

<li>Open cookietester in a popup - a separate cookie manager is used:<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 on html-kit.com:

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

Go see the cookie that was created:

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

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

<h3>DeleteCookies</h3>

Delete the single cookie previously created via SetCookie():

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

external.DeleteCookies()</a>

Go check if cookie was deleted:

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

http://www.html-kit.com/tools/cookietester/</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>

After you see the custom error message you have to hit

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

Try this:

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

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

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

<h2>Javascript Dialog Handler</h2>

See messages in the console.

<h3>OnJavascriptDialog</h3>

<a href="javascript:window.originalAlert('test js dialog handler')">

window.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>HTTPS caching with SSL certificate errors</h3>

Set ApplicationSettings["ignore_certificate_errors"] to True.

<li><a href="https://192.168.0.17/test.html">

https://192.168.0.17/test.html</a></li>

<li><a href="javascript:window.open('https://192.168.0.17/test.html')">

window.open('https://192.168.0.17/test.html')</a></li>

<li><a href="javascript:external.CreateAnotherBrowser('https://192.168.0.17/test.html')">

external.CreateAnotherBrowser('https://192.168.0.17/test.html')</a>

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

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