iOS Question How to get javascript alerts working in B4xpage Webview?

JohnC · Dec 4, 2022

I am using webview in a B4xpages iOS app.

It appears to work fine except when a webpage tries to open a javascript alert pop-up - nothing will happen.

I came across this post, but it looks like it will only work for non-b4xpages:

WKWebView show Javascript alert()

Im trying to show an alert(); message in WKWebView. On stackoverflow i found this answer saying that the WebView is missing a "Delegate". But I don't know how to implement the solution with B4i. Maybe someone has already fixed this issue with B4i or knows enough about ObjC to fix it.

www.b4x.com

Does anyone know how to get javascript alerts working in a B4xpage app?

Erel · Dec 5, 2022

B4X:

Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private WebView1 As WebView
    Private WKUIDelegate As NativeObject
    Private hud As HUD
End Sub

Public Sub Initialize
'    B4XPages.GetManager.LogEvents = True
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    WKUIDelegate = WKUIDelegate.Initialize("B4IWebViewUIDelegate").RunMethod("new", Null)
    WebView1.As(NativeObject).SetField("UIDelegate", WKUIDelegate)
End Sub


Private Sub Button1_Click
    WebView1.EvaluateJavaScript($"alert ("test");"$)
End Sub

Private Sub WebView1_Alert(Message As String)
    Log(Message)
    hud.ToastMessageShow(Message, True)
End Sub

#if OBJC
@end
@interface B4IWebViewUIDelegate:NSObject<WKUIDelegate>
@end
@implementation B4IWebViewUIDelegate
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
    [B4IObjectWrapper raiseUIEvent:webView :@"_alert:" :@[message]];
    completionHandler();
}
#End If

JohnC · Dec 5, 2022

Thank you!

JohnC · Dec 6, 2022

You are probably going to kill me, but apparently the website uses the other two java dialogs "Confirm" and "Prompt".

I am definitely not a Objective C programmer - so I have no idea how to implement those other two methods - Any chance you might have time to?

To help a little, here is a test webpage I put together from some sample code at w3schools.com that uses all three methods:

B4X:

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Javascript Tests</title>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="content-language" content="en-us" />
<META http-equiv="Pragma" content="no-cache">
</head>

<body>

<h2>JavaScript Alert</h2>

<button onclick="myFunction1()">Try it</button>

<script>
function myFunction1() {
  alert("I am an alert box!");
}
</script>

<h2>JavaScript Confirm Box</h2>

<button onclick="myFunction2()">Try it</button>

<p id="demo1"></p>

<script>
function myFunction2() {
  var txt;
  if (confirm("Press a button!")) {
    txt = "You pressed OK!";
  } else {
    txt = "You pressed Cancel!";
  }
  document.getElementById("demo1").innerHTML = txt;
}
</script>

<h2>JavaScript Prompt</h2>

<button onclick="myFunction3()">Try it</button>

<p id="demo2"></p>

<script>
function myFunction3() {
  let text;
  let person = prompt("Please enter your name:", "Harry Potter");
  if (person == null || person == "") {
    text = "User cancelled the prompt.";
  } else {
    text = "Hello " + person + "! How are you today?";
  }
  document.getElementById("demo2").innerHTML = text;
}
</script>

</body>
</html>

Erel · Dec 7, 2022

Doesn't it raise the same event?

JohnC · Dec 7, 2022

It doesn't trigger the "webview_Alert" event.

When I press the "Try it" button for the "Confirm Box" test, the B4i event is not called, and the example webpage javascript code I posted immediately displays "You pressed Cancel!"

When I press the "Try it" button for the "Prompt" test, the B4i event is not called, and the example webpage javascript code I posted immediately displays "User cancelled the prompt"

Also, how would I return a value to the webage javascript from B4i when the user acts upon each of the other two dialogs?

For example, the "Prompt" method would require the event handler to have two incoming parameters, the Message Text and the Pre-Filled Text for the textbox to display to the user. And then return the text from the textbox (user clicked OK) or return a null string (indicating the user clicked "Cancel")

Erel · Dec 8, 2022

It will require some work. I currently can't do it. Sorry.

JohnC · Dec 8, 2022

I understand

Hopefully I will be able to hire someone on fiverr or upwork so I can finish this project for a client.

iOS Question How to get javascript alerts working in B4xpage Webview?

JohnC

Expert

WKWebView show Javascript alert()

Erel

B4X founder

JohnC

Expert

JohnC

Expert

Erel

B4X founder

JohnC

Expert

Erel

B4X founder

JohnC

Expert

Similar Threads