Load multiple JavaScript files with PyWebView

I want to use multiple JavaScripts in PyWebView

In PyWebView, when you want to load JavaScript in a window, use the method window # evaluate_js ().

When this method is called multiple times, each JavaScript is recognized as a separate file and processed. Therefore, if you create the following method, you can create a PyWebView GUI with a feeling closer to HTML5 application development. I will.

def webview_load_elems(window):
  """
Load the following CSS and JS libraries into any window specified by the argument
・ Bootstrap.css
・ Bootstrap.js/popper.js/jquery.js
・ Index for original development.css/index.js
  """
  css = ["index.css"]
  js = ["index.js", "classes.js"]
  nm = "node_modules"
  dist = nm / "bootstrap-honoka" / "dist"
  distjs = dist / "js"

  css.insert(0, dist / "css" / "bootstrap.css")
  js.insert(0, nm / "popper.js" / "dist" / "popper.js")
  js.insert(0, distjs / "bootstrap.js")
  js.insert(0, nm / "jquery" / "dist" / "jquery.js")

  for file in css:
    with open(file, mode="r", encoding="utf-8") as f:
      window.load_css(f.read())
  for file in js:
    with open(file, mode="r", encoding="utf-8") as f:
      window.evaluate_js(f.read())

index.js


let test = TestClass()
/* ... */

classes.js


class TestClass {
  /* ... */
}

Problem with the above code

If you load the file as above, you will not be able to use the classes declared in classes.js in index.js. I get a ReferenceError.

In recent JavaScript, there are ʻexport statements etc., but the file handled on PyWebView is treated as a local file (by default), the file is not read in the first place, and the JavaScript code is directly browsered. You can't use the ʻexport statement because it's loaded into the engine

Add as a property of a global variable

In such cases, there is a hint at the beginning of files such as jQuery.

jquery.js


( function( global, factory ) {

	"use strict";

	if ( typeof module === "object" && typeof module.exports === "object" ) {

		// For CommonJS and CommonJS-like environments where a proper `window`
		// is present, execute the factory and get jQuery.
		// For environments that do not have a `window` with a `document`
		// (such as Node.js), expose a factory as module.exports.
		// This accentuates the need for the creation of a real `window`.
		// e.g. var jQuery = require("jquery")(window);
		// See ticket #14549 for more info.
		module.exports = global.document ?
			factory( global, true ) :
			function( w ) {
				if ( !w.document ) {
					throw new Error( "jQuery requires a window with a document" );
				}
				return factory( w );
			};
	} else {
		factory( global );
	}

// Pass this if window is not defined yet
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {

jQuery makes it possible to call jQuery from other JavaScript files by registering itself in global variables and export areas for each JavaScript execution environment.

In the PyWebView execution environment, the global variable that can be used is window. Therefore, it is OK if you register the declared class as a property of window.

classes.js


class TestClass {
  /* ... */
}

window.TestClass = TestClass;

Now you can use the classes.js class from ʻindex.js`.

Bonus: I want to see the JavaScript file from the developer console of the PyWebView window

If you set gui of thewebview.start ()method to a browser engine that can use the developer console (cef etc.) and debug to True, you can open the developer console from the right-click menu of the browser window. Will be.

If you want to see the JavaScript file loaded from this developer console. The JavaScript code you load is not in file format, so you can't see its contents from the Source tab.

In such a case, it is good to put console.log ("filename ") etc. in the first line of the JavaScript file.

image.png

You can browse the loaded JavaScript code by clicking the "VMnn: Number of Lines" link on the right side of the screen.

Recommended Posts

Load multiple JavaScript files with PyWebView
Recursively search all files with multiple specified extensions
Configure a module with multiple files in Django
Convert multiple proto files at once with python
Upload files with Django
Multiple selections with Jupyter
How to load files in Google Drive with Google Colaboratory
Write multiple records to DynamoDB with Lambda (Python, JavaScript)
Remove headings from multiple format CSV files with python
LOAD DATA with PyMysql
[Python] Send gmail with python: Send one by one with multiple image files attached
Load nested json with pandas
Rsync multiple files at once
Generating permutation combinations with JavaScript
Sorting image files with Python (2)
Sort huge files with python
Sorting image files with Python (3)
Manipulate multiple proxies with Squid
Dictionary comprehension with JavaScript (ES6)
Sorting image files with Python
Transfer files with teraterm [Note]
Integrate PDF files with Python
Reading .txt files with Python
Decompress multiple compressed files (Python)
Load test Websocket with Locust
Handle JSON files with Matlab
Animate multiple graphs with matplotlib
Control multiple robots with jupyter-lab
Upload multiple files in Flask