1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206
|
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Javascript API | pywebview</title>
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="Build GUI for your Python program with JavaScript, HTML, and CSS">
<link rel="preload" href="/3.7/assets/css/0.styles.28a501df.css" as="style"><link rel="preload" href="/3.7/assets/js/app.10a559eb.js" as="script"><link rel="preload" href="/3.7/assets/js/2.0ff7ef1d.js" as="script"><link rel="preload" href="/3.7/assets/js/33.6ff70f11.js" as="script"><link rel="prefetch" href="/3.7/assets/js/10.f125ec08.js"><link rel="prefetch" href="/3.7/assets/js/11.81fead78.js"><link rel="prefetch" href="/3.7/assets/js/12.0a86c191.js"><link rel="prefetch" href="/3.7/assets/js/13.c09145fc.js"><link rel="prefetch" href="/3.7/assets/js/14.2a7dc35b.js"><link rel="prefetch" href="/3.7/assets/js/15.90c9f36a.js"><link rel="prefetch" href="/3.7/assets/js/16.69b1f4b4.js"><link rel="prefetch" href="/3.7/assets/js/17.956ed884.js"><link rel="prefetch" href="/3.7/assets/js/18.bd6678a0.js"><link rel="prefetch" href="/3.7/assets/js/19.b31e62b7.js"><link rel="prefetch" href="/3.7/assets/js/20.cebc4a71.js"><link rel="prefetch" href="/3.7/assets/js/21.d2041966.js"><link rel="prefetch" href="/3.7/assets/js/22.2a3916f2.js"><link rel="prefetch" href="/3.7/assets/js/23.712fbf84.js"><link rel="prefetch" href="/3.7/assets/js/24.f768e66b.js"><link rel="prefetch" href="/3.7/assets/js/25.69b3e415.js"><link rel="prefetch" href="/3.7/assets/js/26.6619f84a.js"><link rel="prefetch" href="/3.7/assets/js/27.e2a4e1bf.js"><link rel="prefetch" href="/3.7/assets/js/28.abcc819c.js"><link rel="prefetch" href="/3.7/assets/js/29.c379d080.js"><link rel="prefetch" href="/3.7/assets/js/3.749f6582.js"><link rel="prefetch" href="/3.7/assets/js/30.771e8640.js"><link rel="prefetch" href="/3.7/assets/js/31.547a8393.js"><link rel="prefetch" href="/3.7/assets/js/32.778a82c7.js"><link rel="prefetch" href="/3.7/assets/js/34.ae1b5fb4.js"><link rel="prefetch" href="/3.7/assets/js/35.c5555b94.js"><link rel="prefetch" href="/3.7/assets/js/36.d53c471f.js"><link rel="prefetch" href="/3.7/assets/js/37.bbba2d58.js"><link rel="prefetch" href="/3.7/assets/js/38.5eb30036.js"><link rel="prefetch" href="/3.7/assets/js/39.8cac65fe.js"><link rel="prefetch" href="/3.7/assets/js/4.f2c64e71.js"><link rel="prefetch" href="/3.7/assets/js/40.53182a9c.js"><link rel="prefetch" href="/3.7/assets/js/41.19399765.js"><link rel="prefetch" href="/3.7/assets/js/42.41128068.js"><link rel="prefetch" href="/3.7/assets/js/43.660f3959.js"><link rel="prefetch" href="/3.7/assets/js/44.09d5c6f8.js"><link rel="prefetch" href="/3.7/assets/js/45.4a818eab.js"><link rel="prefetch" href="/3.7/assets/js/46.d1621897.js"><link rel="prefetch" href="/3.7/assets/js/47.7f8f8dec.js"><link rel="prefetch" href="/3.7/assets/js/48.f27d4c39.js"><link rel="prefetch" href="/3.7/assets/js/49.4189d401.js"><link rel="prefetch" href="/3.7/assets/js/5.2a771d7d.js"><link rel="prefetch" href="/3.7/assets/js/50.beff8380.js"><link rel="prefetch" href="/3.7/assets/js/51.8a918a6c.js"><link rel="prefetch" href="/3.7/assets/js/52.92d0105f.js"><link rel="prefetch" href="/3.7/assets/js/53.28701cde.js"><link rel="prefetch" href="/3.7/assets/js/54.2b15d6fb.js"><link rel="prefetch" href="/3.7/assets/js/55.d231c742.js"><link rel="prefetch" href="/3.7/assets/js/56.7e02bbff.js"><link rel="prefetch" href="/3.7/assets/js/57.61e9e46c.js"><link rel="prefetch" href="/3.7/assets/js/58.cc70e253.js"><link rel="prefetch" href="/3.7/assets/js/59.d3f412e7.js"><link rel="prefetch" href="/3.7/assets/js/6.64e1f3ed.js"><link rel="prefetch" href="/3.7/assets/js/60.f4fd7728.js"><link rel="prefetch" href="/3.7/assets/js/61.cd0f1d68.js"><link rel="prefetch" href="/3.7/assets/js/62.bf000bcc.js"><link rel="prefetch" href="/3.7/assets/js/63.807edde1.js"><link rel="prefetch" href="/3.7/assets/js/64.2b6fe843.js"><link rel="prefetch" href="/3.7/assets/js/7.779cbcff.js"><link rel="prefetch" href="/3.7/assets/js/8.66fb3acb.js"><link rel="prefetch" href="/3.7/assets/js/9.84350af9.js">
<link rel="stylesheet" href="/3.7/assets/css/0.styles.28a501df.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/3.7/" class="home-link router-link-active"><img src="/3.7/logo-no-text.png" alt="pywebview" class="logo"> <span class="site-name can-hide">pywebview</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/3.7/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/3.7/examples/" class="nav-link router-link-active">
Examples
</a></div><div class="nav-item"><a href="/3.7/contributing/" class="nav-link">
Contributing
</a></div><div class="nav-item"><a href="/3.7/blog/" class="nav-link">
Blog
</a></div><div class="nav-item"><a href="/3.7/CHANGELOG.html" class="nav-link">
Changelog
</a></div> <a href="https://github.com/r0x0r/pywebview" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/3.7/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/3.7/examples/" class="nav-link router-link-active">
Examples
</a></div><div class="nav-item"><a href="/3.7/contributing/" class="nav-link">
Contributing
</a></div><div class="nav-item"><a href="/3.7/blog/" class="nav-link">
Blog
</a></div><div class="nav-item"><a href="/3.7/CHANGELOG.html" class="nav-link">
Changelog
</a></div> <a href="https://github.com/r0x0r/pywebview" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><a href="/3.7/examples/cef.html" class="sidebar-link">CEF support</a></li><li><a href="/3.7/examples/change_url.html" class="sidebar-link">Change URL</a></li><li><a href="/3.7/examples/css_load.html" class="sidebar-link">CSS load</a></li><li><a href="/3.7/examples/close_confirm.html" class="sidebar-link">Quit confirmation dialog</a></li><li><a href="/3.7/examples/debug.html" class="sidebar-link">Debugging</a></li><li><a href="/3.7/examples/destroy_window.html" class="sidebar-link">Destroy window</a></li><li><a href="/3.7/examples/events.html" class="sidebar-link">Events</a></li><li><a href="/3.7/examples/frameless.html" class="sidebar-link">Frameless window</a></li><li><a href="/3.7/examples/fullscreen.html" class="sidebar-link">Fullscreen window</a></li><li><a href="/3.7/examples/get_elements.html" class="sidebar-link">Get DOM elements</a></li><li><a href="/3.7/examples/get_current_url.html" class="sidebar-link">Get current URL</a></li><li><a href="/3.7/examples/hide_window.html" class="sidebar-link">Hide / show window</a></li><li><a href="/3.7/examples/html_load.html" class="sidebar-link">HTML load</a></li><li><a href="/3.7/examples/js_evaluate.html" class="sidebar-link">Javascript evaluation</a></li><li><a href="/3.7/examples/js_api.html" aria-current="page" class="active sidebar-link">Javascript API</a></li><li><a href="/3.7/examples/loading_animation.html" class="sidebar-link">Loading animation</a></li><li><a href="/3.7/examples/links.html" class="sidebar-link">Link types</a></li><li><a href="/3.7/examples/localization.html" class="sidebar-link">Localization</a></li><li><a href="/3.7/examples/min_size.html" class="sidebar-link">Minimum window size</a></li><li><a href="/3.7/examples/minimize_window.html" class="sidebar-link">Minimize / restore window</a></li><li><a href="/3.7/examples/move_window.html" class="sidebar-link">Move window</a></li><li><a href="/3.7/examples/multiple_windows.html" class="sidebar-link">Multi-window</a></li><li><a href="/3.7/examples/open_file_dialog.html" class="sidebar-link">Open file dialog</a></li><li><a href="/3.7/examples/open_url.html" class="sidebar-link">Open URL</a></li><li><a href="/3.7/examples/resize_window.html" class="sidebar-link">Resize window</a></li><li><a href="/3.7/examples/save_file_dialog.html" class="sidebar-link">Save file dialog</a></li><li><a href="/3.7/examples/screens.html" class="sidebar-link">Screens</a></li><li><a href="/3.7/examples/toggle_fullscreen.html" class="sidebar-link">Toggle full-screen</a></li><li><a href="/3.7/examples/user_agent.html" class="sidebar-link">Change user agent string</a></li><li><a href="/3.7/examples/window_title_change.html" class="sidebar-link">Window title change</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="javascript-api"><a href="#javascript-api" class="header-anchor">#</a> Javascript API</h1> <p>Create an application without a HTTP server. The application uses Javascript API object to communicate between Python and Javascript.</p> <div class="language-python extra-class"><pre class="language-python"><code><span class="token keyword">import</span> threading
<span class="token keyword">import</span> time
<span class="token keyword">import</span> sys
<span class="token keyword">import</span> random
<span class="token keyword">import</span> webview
html <span class="token operator">=</span> <span class="token triple-quoted-string string">"""
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
#response-container {
display: none;
padding: 3rem;
margin: 3rem 5rem;
font-size: 120%;
border: 5px dashed #ccc;
}
label {
margin-left: 0.3rem;
margin-right: 0.3rem;
}
button {
font-size: 100%;
padding: 0.5rem;
margin: 0.3rem;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>JS API Example</h1>
<p id='pywebview-status'><i>pywebview</i> is not ready</p>
<button onClick="initialize()">Hello Python</button><br/>
<button id="heavy-stuff-btn" onClick="doHeavyStuff()">Perform a heavy operation</button><br/>
<button onClick="getRandomNumber()">Get a random number</button><br/>
<label for="name_input">Say hello to:</label><input id="name_input" placeholder="put a name here">
<button onClick="greet()">Greet</button><br/>
<button onClick="catchException()">Catch Exception</button><br/>
<div id="response-container"></div>
<script>
window.addEventListener('pywebviewready', function() {
var container = document.getElementById('pywebview-status')
container.innerHTML = '<i>pywebview</i> is ready'
})
function showResponse(response) {
var container = document.getElementById('response-container')
container.innerText = response.message
container.style.display = 'block'
}
function initialize() {
pywebview.api.init().then(showResponse)
}
function doHeavyStuff() {
var btn = document.getElementById('heavy-stuff-btn')
pywebview.api.doHeavyStuff().then(function(response) {
showResponse(response)
btn.onclick = doHeavyStuff
btn.innerText = 'Perform a heavy operation'
})
showResponse({message: 'Working...'})
btn.innerText = 'Cancel the heavy operation'
btn.onclick = cancelHeavyStuff
}
function cancelHeavyStuff() {
pywebview.api.cancelHeavyStuff()
}
function getRandomNumber() {
pywebview.api.getRandomNumber().then(showResponse)
}
function greet() {
var name_input = document.getElementById('name_input').value;
pywebview.api.sayHelloTo(name_input).then(showResponse)
}
function catchException() {
pywebview.api.error().catch(showResponse)
}
</script>
</body>
</html>
"""</span>
<span class="token keyword">class</span> <span class="token class-name">Api</span><span class="token punctuation">:</span>
<span class="token keyword">def</span> <span class="token function">__init__</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">:</span>
self<span class="token punctuation">.</span>cancel_heavy_stuff_flag <span class="token operator">=</span> <span class="token boolean">False</span>
<span class="token keyword">def</span> <span class="token function">init</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">:</span>
response <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token string">'message'</span><span class="token punctuation">:</span> <span class="token string">'Hello from Python {0}'</span><span class="token punctuation">.</span><span class="token builtin">format</span><span class="token punctuation">(</span>sys<span class="token punctuation">.</span>version<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> response
<span class="token keyword">def</span> <span class="token function">getRandomNumber</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">:</span>
response <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token string">'message'</span><span class="token punctuation">:</span> <span class="token string">'Here is a random number courtesy of randint: {0}'</span><span class="token punctuation">.</span><span class="token builtin">format</span><span class="token punctuation">(</span>random<span class="token punctuation">.</span>randint<span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100000000</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> response
<span class="token keyword">def</span> <span class="token function">doHeavyStuff</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">:</span>
time<span class="token punctuation">.</span>sleep<span class="token punctuation">(</span><span class="token number">0.1</span><span class="token punctuation">)</span> <span class="token comment"># sleep to prevent from the ui thread from freezing for a moment</span>
now <span class="token operator">=</span> time<span class="token punctuation">.</span>time<span class="token punctuation">(</span><span class="token punctuation">)</span>
self<span class="token punctuation">.</span>cancel_heavy_stuff_flag <span class="token operator">=</span> <span class="token boolean">False</span>
<span class="token keyword">for</span> i <span class="token keyword">in</span> <span class="token builtin">range</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1000000</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
_ <span class="token operator">=</span> i <span class="token operator">*</span> random<span class="token punctuation">.</span>randint<span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
<span class="token keyword">if</span> self<span class="token punctuation">.</span>cancel_heavy_stuff_flag<span class="token punctuation">:</span>
response <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token string">'message'</span><span class="token punctuation">:</span> <span class="token string">'Operation cancelled'</span><span class="token punctuation">}</span>
<span class="token keyword">break</span>
<span class="token keyword">else</span><span class="token punctuation">:</span>
then <span class="token operator">=</span> time<span class="token punctuation">.</span>time<span class="token punctuation">(</span><span class="token punctuation">)</span>
response <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token string">'message'</span><span class="token punctuation">:</span> <span class="token string">'Operation took {0:.1f} seconds on the thread {1}'</span><span class="token punctuation">.</span><span class="token builtin">format</span><span class="token punctuation">(</span><span class="token punctuation">(</span>then <span class="token operator">-</span> now<span class="token punctuation">)</span><span class="token punctuation">,</span> threading<span class="token punctuation">.</span>current_thread<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> response
<span class="token keyword">def</span> <span class="token function">cancelHeavyStuff</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">:</span>
time<span class="token punctuation">.</span>sleep<span class="token punctuation">(</span><span class="token number">0.1</span><span class="token punctuation">)</span>
self<span class="token punctuation">.</span>cancel_heavy_stuff_flag <span class="token operator">=</span> <span class="token boolean">True</span>
<span class="token keyword">def</span> <span class="token function">sayHelloTo</span><span class="token punctuation">(</span>self<span class="token punctuation">,</span> name<span class="token punctuation">)</span><span class="token punctuation">:</span>
response <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token string">'message'</span><span class="token punctuation">:</span> <span class="token string">'Hello {0}!'</span><span class="token punctuation">.</span><span class="token builtin">format</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> response
<span class="token keyword">def</span> <span class="token function">error</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">:</span>
<span class="token keyword">raise</span> Exception<span class="token punctuation">(</span><span class="token string">'This is a Python exception'</span><span class="token punctuation">)</span>
<span class="token keyword">if</span> __name__ <span class="token operator">==</span> <span class="token string">'__main__'</span><span class="token punctuation">:</span>
api <span class="token operator">=</span> Api<span class="token punctuation">(</span><span class="token punctuation">)</span>
window <span class="token operator">=</span> webview<span class="token punctuation">.</span>create_window<span class="token punctuation">(</span><span class="token string">'API example'</span><span class="token punctuation">,</span> html<span class="token operator">=</span>html<span class="token punctuation">,</span> js_api<span class="token operator">=</span>api<span class="token punctuation">)</span>
webview<span class="token punctuation">.</span>start<span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/r0x0r/pywebview/edit/docs/docs/examples/js_api.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/3.7/examples/js_evaluate.html" class="prev">
Javascript evaluation
</a></span> <span class="next"><a href="/3.7/examples/loading_animation.html">
Loading animation
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/3.7/assets/js/app.10a559eb.js" defer></script><script src="/3.7/assets/js/2.0ff7ef1d.js" defer></script><script src="/3.7/assets/js/33.6ff70f11.js" defer></script>
</body>
</html>
|