[PYTHON] Charger plusieurs fichiers JavaScript avec PyWebView

Je souhaite utiliser plusieurs JavaScripts dans PyWebView

Dans PyWebView, lorsque vous souhaitez charger JavaScript dans une fenêtre, utilisez la méthode window # evaluer_js ().

Lorsque cette méthode est appelée plusieurs fois, chaque JavaScript est reconnu comme un fichier distinct et traité. Par conséquent, si vous créez la méthode suivante, vous pouvez créer une interface graphique PyWebView avec une sensation plus proche du développement d'applications HTML5. Je vais.

def webview_load_elems(window):
  """
Chargez les bibliothèques CSS et JS suivantes dans n'importe quelle fenêtre spécifiée par l'argument
· Amorcer.css
· Amorcer.js/popper.js/jquery.js
・ Index pour le développement original.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 {
  /* ... */
}

Problème avec le code ci-dessus

Si vous chargez le fichier comme ci-dessus, vous ne pourrez pas utiliser les classes déclarées dans classes.js dans index.js. J'obtiens une ReferenceError.

Dans JavaScript récent, il y a des instructions ʻexport etc., mais le fichier géré sur PyWebView est traité comme un fichier local (par défaut), le fichier n'est pas lu en premier lieu, et le code JavaScript est directement parcouru. Vous ne pouvez pas utiliser l'instruction ʻexport car elle est chargée dans le moteur

Ajouter en tant que propriété d'une variable globale

Dans de tels cas, il y a un indice au début des fichiers tels que 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 permet d'appeler jQuery à partir d'autres fichiers JavaScript en s'enregistrant dans les variables globales et dans la zone d'exportation pour chaque environnement d'exécution JavaScript.

Dans l'environnement d'exécution PyWebView, la variable globale qui peut être utilisée est window. Par conséquent, c'est OK si vous enregistrez la classe déclarée comme propriété de window.

classes.js

class TestClass {
  /* ... */
}

window.TestClass = TestClass;

Vous pouvez maintenant utiliser la classe classes.js de ʻindex.js`.

Bonus: je veux voir le fichier JavaScript depuis la console développeur de la fenêtre PyWebView

Si vous définissez gui de la méthode webview.start () sur un moteur de navigateur qui peut utiliser la console développeur (cef etc.) et debug sur True, vous pouvez ouvrir la console développeur à partir du menu contextuel de la fenêtre du navigateur. Sera.

Si vous souhaitez voir le fichier JavaScript chargé depuis cette console développeur. Le code JavaScript chargé n'est pas au format de fichier, vous ne pouvez donc pas voir son contenu dans l'onglet Source.

Dans un tel cas, il est bon de mettre console.log (" nom de fichier ") etc. dans la première ligne du fichier JavaScript.

Vous pouvez afficher le code JavaScript chargé en cliquant sur le lien "VMnn: Nombre de lignes" sur le côté droit de l'écran.