WebViewGadget()

Syntax

Ergebnis = WebViewGadget(#Gadget, x, y, Breite, Höhe [, Flags])

Erstellt ein neues Webview-Gadget in der aktuellen Gadget-Liste. Bei Bedarf kann mit WebViewProxy() ein Proxy eingerichtet werden.

Parameter

#Gadget	Eine Nummer zur Identifizierung des neuen Gadgets. #PB_Any kann verwendet werden, um diese Nummer automatisch zu generieren.
x, y, Breite, Höhe	Die Position und Abmessungen des neuen Gadgets.
Flags (optional)	Flags zum Ändern des Gadget-Verhaltens. Es kann (mit dem Operator '|') aus einer der folgenden Konstanten zusammengesetzt sein: #PB_WebView_Debug: Aktiviert den Menüpunkt "Inspizieren" (englisch 'inspect') im Kontextmenü, um den Web-Inspektor und die Konsole anzuzeigen.

Rückgabewert

Bei Erfolg ungleich Null, ansonsten Null. Wenn #PB_Any als #Gadget-Parameter verwendet wurde, beinhaltet der Rückgabewert die automatisch generierte Gadget-Nummer bei Erfolg.

Anmerkungen

Verwenden Sie nach der Erstellung BindWebViewCallback(), um mit dem JavaScript-Code der Benutzeroberfläche zu interagieren. Darüber hinaus können auch gängige Gadget-Befehle wie ResizeGadget() oder HideGadget() mit dem Steuerelement verwendet werden.

Die folgenden Funktionen können verwendet werden, um das WebViewGadget zu beeinflussen:

- SetGadgetText(): Ändert die aktuelle URL. Es kann sich um eine lokale Datei-URL wie 'file://c:/purebasic/svn/webview.html' oder eine reguläre HTTP-URL handeln. Wenn Sie eine lokale Datei-URL verwenden, muss es sich um den vollständigen Pfadnamen handeln. Sie können die lokale URL einfach erstellen, indem Sie 'file://' zum Pfadnamen hinzufügen.

- SetGadgetItemText(): Mit #PB_WebView_HtmlCode als 'Eintrag' kann HTML-Code in das Gadget gestreamt werden. Das HTML wird als nicht vertrauenswürdiger lokaler Inhalt behandelt und einige Berechtigungen sind nicht zulässig.

Beispiel: mit lokalen HTML- und CSS-Dateien

  Procedure IncrementJS(JsonParameters$)
    Static i
    Debug "IncrementJS "+JsonParameters$
    i+1
    ProcedureReturn UTF8(~"{ \"count\": "+Str(i)+ "}")
  EndProcedure

  Procedure ComputeJS(JsonParameters$)
    Debug "ComputeJS "+JsonParameters$
    ProcedureReturn UTF8(~"150")
  EndProcedure

  OpenWindow(0, 100, 100, 400, 400, "Hello", #PB_Window_SystemMenu)

  WebViewGadget(0, 0, 0, 400, 400)
  SetGadgetText(0, "file://" + #PB_Compiler_Home + "examples/sources/Data/WebView/webview.html")
    
  BindWebViewCallback(0, "increment", @IncrementJS())
  BindWebViewCallback(0, "compute", @ComputeJS())

  Repeat 
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow

Beispiel: mit Inline-HTML-Code

  Procedure IncrementJS(JsonParameters$)
    Static i
    Debug "IncrementJS "+JsonParameters$
    i+1
    ProcedureReturn UTF8(~"{ \"count\": "+Str(i)+ "}")
  EndProcedure

  Procedure ComputeJS(JsonParameters$)
    Debug "ComputeJS "+JsonParameters$
    ProcedureReturn UTF8(~"150")
  EndProcedure

  OpenWindow(0, 100, 100, 400, 400, "Hello", #PB_Window_SystemMenu)

  WebViewGadget(0, 0, 0, 400, 400)

  SetGadgetItemText(0, #PB_WebView_HtmlCode, 
                    ~"<button id=\"increment\">Tap me</button>\n"+
                    ~"<div>You tapped <span id=\"count\">0</span> time(s).</div>\n"+
                    ~"<button id=\"compute\">Compute</button>\n"+
                    ~"<div>Result of computation: <span id=\"compute-result\">0</span></div>\n"+
                    ~"<script>\n"+
                    ~"  const [incrementElement, countElement, computeElement, "+
                    ~"computeResultElement] =\n"+
                    ~"    document.querySelectorAll(\"#increment, #count, #compute, "+
                    ~"#compute-result\");\n"+
                    ~"  document.addEventListener(\"DOMContentLoaded\", () => {\n"+
                    ~"    incrementElement.addEventListener(\"click\", () => {\n"+
                    ~"      window.increment().then(result => {\n"+
                    ~"        countElement.textContent = result.count;\n"+
                    ~"      });\n"+
                    ~"    });\n"+
                    ~"    computeElement.addEventListener(\"click\", () => {\n"+
                    ~"      computeElement.disabled = true;\n"+
                    ~"      window.compute(6, 7).then(result => {\n"+
                    ~"        computeResultElement.textContent = result;\n"+
                    ~"        computeElement.disabled = false;\n"+
                    ~"      });\n"+
                    ~"    });\n"+
                    ~"  });\n"+
                    ~"</script>")
    
  BindWebViewCallback(0, "increment", @IncrementJS())
  BindWebViewCallback(0, "compute", @ComputeJS())

  Repeat 
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow

Beispiel: mit deaktiviertem Rechtsklick-Menü

  Html$ = ~"<html style=\"margin:0px;height:100%;width:100%\">"+
          ~"<body oncontextmenu=\"return false;\" style=\"margin:0px;min-height:100%;width:100%\">"+
          ~"<button id=\"displayInfo\">Display Info</button>"+
          ~"</body></html>\n"
  
  OpenWindow(0, 100, 100, 400, 400, "No right click UI", #PB_Window_SystemMenu)

  WebViewGadget(0, 0, 0, 400, 400)
  SetGadgetItemText(0, #PB_WebView_HtmlCode, Html$)

  Repeat 
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow

Siehe auch

WebViewExecuteScript(), BindWebViewCallback(), WebViewProxy()

Unterstützte OS

Alle