WebViewGadget()

Syntax

Result = WebViewGadget(#Gadget, x, y, Width, Height [, Flags])

Creates a new web view gadget in the current GadgetList. If needed a proxy can be set with WebViewProxy().

Parameters

#Gadget	A number to identify the new gadget. #PB_Any can be used to auto-generate this number.
x, y, Width, Height	The position and dimensions of the new gadget.
Flags (optional)	Flags to modify the gadget behavior. It can be composed (using the '|' operator) of one of the following constants: #PB_WebView_Debug: Enable the 'inspect' menu item in the context menu to display the web inspector and console.

Return value

Nonzero on success, zero otherwise. If #PB_Any was used as the #Gadget parameter then the return-value is the auto-generated gadget number on success.

Remarks

After creation, use BindWebViewCallback() to interact with the JavaScript code of the UI. In addition common gadget commands like ResizeGadget() or HideGadget() may be used with the control as well.

The following functions can be used to act on a WebViewGadget:

- SetGadgetText(): Change the current URL. It can be a local file URL like 'file://c:/purebasic/svn/webview.html' or a regular HTTP URL. When using a local file URL, it needs to be the full pathname. You can easily construct the local URL by adding 'file://' to the pathname.

- SetGadgetItemText(): With #PB_WebView_HtmlCode as 'Item' html code can be streamed into the gadget. The html is treated as untrusted local content and some permission are not allowed.

- GetGadgetAttribute() : With #PB_WebView_ICoreController as 'attribute' allows you to use the functions of ICoreWebView2 (Windows only).


Note: the WebViewGadget() is not supported on QT subsystem.

Example: using local HTML and CSS files

  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

Example: using 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

Example: with disabled right-click menu

  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

Example: In using the ICoreWebView2Controller (Windows only)

  OpenWindow(0, 100, 100, 800, 600, "Hello", #PB_Window_SystemMenu)
  
  TrackBarGadget(1, 0 , 0, 800, 30, 10, 400):SetGadgetState(1, 100) 
  WebViewGadget(0, 0, 30, 800, 600, #PB_WebView_Debug)
  
  ; Get the ICoreController interface 
  ;
  Controller.ICoreWebView2Controller = GetGadgetAttribute(0, #PB_WebView_ICoreController)
  
  ; Get the ICoreWebView2 interface 
  ;
  Controller\get_CoreWebView2(@Core.ICoreWebView2)
  Core\Navigate("https://www.purebasic.com")
  
  ; core\
  DataSection
    IID_ICoreWebView2Controller2:
    Data.l $C979903E
    Data.w $D4CA, $4228
    Data.b $92, $EB, $47, $EE, $3F, $A9, $6E, $AB
  EndDataSection
  
  If Controller\QueryInterface(?IID_ICoreWebView2Controller2, @Controller2.ICoreWebView2Controller2) = #S_OK
    Debug "ICoreWebView2Controller2 found: " + Controller2
  Else
    Debug "Can't query ICoreWebView2Controller2"
  EndIf
  
  Repeat 
    Event = WaitWindowEvent()
    If event = #PB_Event_Gadget And EventGadget() = 1
      Controller\put_ZoomFactor(GetGadgetState(1)/100)
    EndIf
  Until Event = #PB_Event_CloseWindow

See Also

WebViewExecuteScript(), BindWebViewCallback(), WebViewProxy()

Supported OS

All