[PYTHON] Laden Sie mehrere JavaScript-Dateien mit PyWebView

Ich möchte mehrere JavaScripts in PyWebView verwenden

Wenn Sie in PyWebView JavaScript in ein Fenster laden möchten, verwenden Sie die Methode window # evalu_js ().

Wenn diese Methode mehrmals aufgerufen wird, wird jedes JavaScript als separate Datei erkannt und verarbeitet. Wenn Sie also die folgende Methode erstellen, können Sie eine PyWebView-GUI erstellen, die der HTML5-Anwendungsentwicklung näher kommt. Ich werde.

def webview_load_elems(window):
  """
Laden Sie die folgenden CSS- und JS-Bibliotheken in ein beliebiges Fenster, das durch das Argument angegeben wird
・ Bootstrap.css
・ Bootstrap.js/popper.js/jquery.js
・ Index für die ursprüngliche Entwicklung.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 mit dem obigen Code

Wenn Sie die Datei wie oben beschrieben laden, können Sie die in classes.js in index.js deklarierten Klassen nicht verwenden. Ich erhalte einen ReferenceError.

In neuerem JavaScript gibt es "Export" -Anweisungen usw., aber die in PyWebView verarbeiteten Dateien werden (standardmäßig) als lokale Dateien behandelt, die Dateien werden überhaupt nicht gelesen und der JavaScript-Code wird direkt durchsucht. Die Anweisung export kann nicht verwendet werden, da sie in die Engine geladen wird

Als Eigenschaft einer globalen Variablen hinzufügen

In solchen Fällen gibt es einen Hinweis auf den Anfang von Dateien wie 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 ) {

Mit jQuery können Sie jQuery aus anderen JavaScript-Dateien aufrufen, indem Sie sich in den globalen Variablen und im Exportbereich für jede JavaScript-Ausführungsumgebung registrieren.

In der PyWebView-Ausführungsumgebung kann als globale Variable "window" verwendet werden. Daher ist es in Ordnung, wenn Sie die deklarierte Klasse als Eigenschaft von window registrieren.

classes.js

class TestClass {
  /* ... */
}

window.TestClass = TestClass;

Jetzt können Sie die Klassen von "classes.js" sogar aus "index.js" verwenden.

Bonus: Ich möchte die JavaScript-Datei von der Entwicklerkonsole des PyWebView-Fensters aus sehen

Wenn Sie "gui" der Methode "webview.start ()" auf eine Browser-Engine setzen, die die Entwicklerkonsole (cef usw.) verwenden kann, und "debug" auf "True", können Sie die Entwicklerkonsole über das Kontextmenü des Browserfensters öffnen. Wird sein.

Wenn Sie möchten, dass die JavaScript-Datei von dieser Entwicklerkonsole geladen wird. Der geladene JavaScript-Code hat kein Dateiformat, sodass Sie den Inhalt auf der Registerkarte Quelle nicht sehen können.

In einem solchen Fall ist es gut, "console.log (" Dateiname ")" usw. in die erste Zeile der JavaScript-Datei zu setzen.

Sie können den geladenen JavaScript-Code durchsuchen, indem Sie auf den Link "VMnn: Anzahl der Zeilen" auf der rechten Seite des Bildschirms klicken.