Develop Reference

Trick To Get Qt QWebView Bridge Accessible from Webkit IFRAME (Local Pages)

My Qt C++ (Qt 5.5) application uses a QWebView widget. After a lot of confusion and hard work, I have managed to get the QtWebKit Bridge technique to work and now have my Webkit document (local pages, no web server) to be able to call the C++ functions. The resources for you on that are:
http://doc.qt.io/qt-5/qtwebkit-bridge.html
https://stackoverflow.com/a/4979636/105539
Now, however, I have introduced an IFRAME into the page, and so have a child document. Trouble is, I'm not able to get the child document to connect to that C++ bridge.
Webkit seems to have a whole lot of security controls when doing Javascript communication between child and parent documents when local files are used instead of web servers. All manner of parent and child calling via Javascript failed to work until I stumbled on the complexities of using the postMessage() API of HTML5. At that point, I could get communication established, but it's through messages and not native Javascript function calls.
Is there a technique in Qt where I can establish a bridge between C++ and a document loaded inside an IFRAME inside the QWebView widget, and without using the HTML5 postMessage() API?
Note that one thing I've been able to do is access the IFRAME in code like the following, but the cpp object never appears in Javascript in the iframe, even if I load it from jQuery as $(document).ready(function(){ setTimeout('testIfCPPLoaded();',100); });.
void MainWindow::on_webView_loadFinished(bool arg1)
{
if (arg1 == true) {
QWebFrame *iframe = ui->webView->page()->mainFrame()->findFirstElement("iframe").webFrame();
if (iframe) {
connect(iframe,&QWebFrame::javaScriptWindowObjectCleared,this,&MainWindow::attachJavascript);
}
}
}
void MainWindow::attachJavascript()
{
QWebFrame *frame = ui->webView->page()->mainFrame();
QWebFrame *iframe = ui->webView->page()->mainFrame()->findFirstElement("iframe").webFrame();
frame->addToJavaScriptWindowObject(QString("cpp"), this);
if (iframe) {
iframe->addToJavaScriptWindowObject(QString("cpp"),this);
}
}
void MainWindow::on_webView_urlChanged(const QUrl &arg1)
{
QWebFrame *frame = ui->webView->page()->mainFrame();
QWebFrame *iframe = ui->webView->page()->mainFrame()->findFirstElement("iframe").webFrame();
connect(frame, &QWebFrame::javaScriptWindowObjectCleared, this, &MainWindow::attachJavascript);
if (iframe) {
connect(iframe,&QWebFrame::javaScriptWindowObjectCleared, this, &MainWindow::attachJavascript);
}
}

There are three different techniques for a compromise:
Option A
HTML5 supports a postMessage() API to transfer messages from children IFRAME documents to their parent documents, and it works even with local pages (like with file://). This is a little slower because it's an indirect technique of message passing and interpretation.
Option B
Unlike your Chrome browser with its security controls on pages accessed with file://, Qt's version of WebKit will let you call window.parent.foo() if the parent document contains a function foo(). From there, you can call the cpp object to do tasks. This is slightly indirect, but not as indirect as the postMessage() API.
Option C
If the parent document has an object called cpp (your C++ injected object that you created, as an example), Qt's version of WebKit will let you call var cpp = window.parent.cpp; in order for the IFRAME to have access to the cpp.
One extra suggestion I would have is, if you're testing a WebKit interface in Chrome before being deployed through Qt, you could use an if (window.parent.cpp) (iframe document) and an if (cpp) (parent document) in order to determine if this is loading through Qt or Chrome, and then, if loaded through Chrome, fake a result through a Javascript file (like a kind of polyfill) just so that your Chrome GUI tests work okay until you're ready to hook it up to the C++ in Qt.

Execute javascript without webview in Android

I'm trying to execute a JS fonction in my Android app.
The function is in a .js file on a website.
I'm not using webview, I want to execute the JS function because it sends the request i want.
In the Console in my browser i just have to do question.vote(0);, how can I do it in my app ?

UPDATE 2018: AndroidJSCore has been superseded by LiquidCore, which is based on V8. Not only does it include the V8 engine, but all of Node.js is available as well.
You can execute JavaScript without a WebView. You can use AndroidJSCore. Here is a quick example how you might do it:
HttpClient client = new DefaultHttpClient();
HttpGet request = new HttpGet("http://your_website_here/file.js");
HttpResponse response = client.execute(request);
String js = EntityUtils.toString(response.getEntity());
JSContext context = new JSContext();
context.evaluateScript(js);
context.evaluateScript("question.vote(0);");
However, this most likely won't work outside of a WebView, because I presume you are not only relying on JavaScript, but AJAX, which is not part of pure JavaScript. It requires a browser implementation.
Is there a reason you don't use a hidden WebView and simply inject your code?
// Create a WebView and load a page that includes your JS file
webView.evaluateJavascript("question.vote(0);", null);

For the future reference, there is a library by square for this purpose.
https://github.com/square/duktape-android
This library is a wrapper for Duktape, embeddable JavaScript engine.
You can run javascript without toying with WebView.
Duktape is Ecmascript E5/E5.1 compliant, so basic stuff can be done with this.

Android: Calling javascript from WebView

We're coding an app for Android. It's a WebView that contains Html5 pages. We're using loadUrl() webview's method, in order to push some native OS variables to html, such as:
webview.loadUrl("javascript:myJavascriptFunc('" + myAndroidOSVar + "');");
It works pretty fine. But if we are typing on an input from page while loadUrl() is called, we lose focus of our input fields, even if javascript function called just changes a flag on cache.
Do you know other way to call a Javascript function from WebView instead of loadUrl()?

This is the closest you can get to avoiding the issue: WebView hides soft keyboard during loadUrl(), which means a keyboard cannot stay open while calling javascript
Basically you are avoiding the loadUrl call by queuing up commands on the native side and at an interval letting the JS bridge get the commands and execute using JS eval() or something.

I'm not sure exactly how it will respond if you have multiple fields in the webview, but I came up with a workaround to keep the keyboard shown: https://stackoverflow.com/a/18776064/513038. It may be worth trying.

yes, there is a way by adding a JavaScriptInterface to your WebView , refer this tutorial for more explanation and details

What are some methods to debug Javascript inside of a UIWebView?

I'm trying to figure out why something with Javascript isn't working inside of a UIWebView. To my knowledge, there is no way to set a breakpoint inside of XCode for a js file. No problemo, I'll just go back to 2004 and use alert statemen-- oh wait they don't seem to work inside of a UIWebView either!
The only thing I could think of is by exporting my HTML And JS files to my desktop and then just doing my debugging inside of Safari. And that works! But of course, the bug I'm fighting with in the UIWebView doesn't occur in Safari.
Are there any other ways for debugging inside of a UIWebView, or any tricks that I can use akin to using the old-school alert method?

If you're using iOS >= 6 and you have mountain lion (10.8) or Safari >= 6, you can just:
Open the application in the simulator (or your device in XCode >= 4.5.x).
Open Safari (go to Preferences -> Advanced and make sure "Show Develop Menu in Menubar" is on.
From the Menu-bar (of Safari) select Develop -> iPhone Simulator -> [your webview page].
That's it !

This query tops google, so worth linking to the remoteInspector hidden in iOS5 - by far the best way found so far to debug your UIWebViews - just conditional compile out before you send to Apple.

alert() certainly works for me.
However, you can also do lots of other things, like make your own DHTML alert that pops up in a layer. This can be nice because you can do multiple alerts to a single div, without stopping your app. You should also be able to write a stack trace to it (the stack trace is in the exception object, and you can always throw your own exceptions).
Alternatively, if running on the simulator your custom "alert()" could call into objective C, and display the string in the iPhone simulator's console window:
document.location.href = "http://debugger/" +
encodeURIComponent(outputString);
and on the objective C side:
//--------------------------------------------------------------------
- (BOOL)webView:(UIWebView*)webView
shouldStartLoadWithRequest: (NSURLRequest*)req
navigationType:(UIWebViewNavigationType)navigationType {
if ([[[req URL] host] isEqualToString:#"debugger"]){
// do stuff with [[req URL] path]
}
}
That said, I have an app that is heavy on the UiWebView / javascript stuff, and I tend to do most javascript dev in Chrome (simulating what is necessary from the iPhone environment)

I get the awesome way to debug UIWebView Or
SFSafariViewController.
I hope It will Help.
Step 1:
Open Safari VC In Your Mac (hahaha Don't make your face, If I am saying in your Macbook just follow this my steps)

Step2: Go at Safari preferences And Click on Advance. 

You will Get this setting on your MacBook Screen.
Now enable the Show to develop menu in menu bar.

 Now Your All work is done. 

Are you thinking I am kidding :P :P no man...


Step3: Run your application in Device or Simulator. (Don’t Think Just run )
And go in your application where you are opening your Webview or SFSafariViewController.
Till now you did not understand I know. Be cool and see my next step.

Step4: Open Safari In your MacBook and Click on Develop Option from the Menu bar. 

Did you get something your MacBook, iPad/ iPhone is Displaying Right?????


Step5: Its Done. click your device and click on URL New popup will come out like This.



Step6: what are you looking now its over here all the steps.
Now debug your Webpage on this console.
Be happy and enjoy your day while doing coding With a cup of tea or
Coffee.
IMP: Don't forget to enable See Below Image









I haven't tried this yet, but take a look at this Weinre
Looks very promising.

This is an old question. But I'll still like to share my two cents.
I have been using jsconsole.com for remote debugging. It's easy. Just include a script tag and use console logs to debug by printing. This can also be used for debugging on a real device.

Old question, but I think I found the best solution, in my case you need to debug uiwebview, but I had no access to the IOS app and only to the html content and I had to view some JS logs, I added the following code to load the light firebug JS and show it automatically:
calling it from JS
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://getfirebug.com/firebug-lite-debug.js';
document.head.appendChild(script);
or load it from html
<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>

You can set up a system like that used in PhoneGap to send messages from JavaScript to Objective-C and log from there. In a nutshell, they are setting document.location with a custom scheme and blocking that scheme in the delegate callback.
You can take advantage of the fact that a UIWebView is most of the delegates for a WebView. WebKit is technically undocumented for iPhone, but mostly the same as specified in the desktop WebKit headers, possibly including the WebScriptObject. I use this for debugging, but be sure to strip this code out before submitting to Apple.
To get a WebView from a UIWebView, implement a delegate method like -(void) webView:(id)inWebView didFinishLoadForFrame:(id)inWebFrame in a subclass of UIWebView. Call super if you use that one.

How to call user32.dll methods from javascript

I have a javascript running on a browser. Is it possible to call a function/method in user32.dll.
This is possible from C# by using pInvoke calls. How do I do the same in JavaScript?
Thanks,
Datte

Because of the JavaScript sandbox, you can't do it without a middle layer requiring elevated security permissions, such as a Netscape-style browser plug-in (widely supported), ActiveX control (pretty much IE-only), or .Net control (I assume that's possible; again probably IE-only). In each case, the JavaScript would talk to the control, which would in turn make the USER32 call for you.
None of that will work without the user having granted your application elevated permissions, but I'm guessing as you're requiring Windows, this is for some kind of intranet application where that may be possible.

You definitely need a plug-in, extension or ActiveX of your own installed on the client.
In the case of a firefox extension, you can use jsctypes to wrap the calls easily.
If you use the Jetpack API included with Firefox 4, it will be all JavaScript and won't even require a browser restart.
Here's an exemple from mozilla.org for a basic Hello World :
/* Load JS Ctypes Javascript module */
require("chrome").Cu.import("resource://gre/modules/ctypes.jsm");
/* Load windows api dll */
var lib = ctypes.open("user32.dll");
/* Declare the signature of the function we are going to call */
var msgBox = lib.declare("MessageBoxW",
ctypes.stdcall_abi,
ctypes.int32_t,
ctypes.int32_t,
ctypes.ustring,
ctypes.ustring,
ctypes.int32_t);
var MB_OK = 3;
/* Do it! */
var ret = msgBox(0, "Hello world", "title", MB_OK);
/* Display the returned value */
alert("MessageBox result : "+ret);
lib.close();

On the client - it is not possible for security reasons (imagine every site could run system commands on your computer... end of the world - maybe possible with an ActiveX, but that's IE only, but then again, the DLL is windows only).
If you want to run it on the server you'll need to go trough AJAX and C#.

Run dll methods on the client machine using javascript from a web page? That's what is gonna trigger apocalypse.

If you build your own web browser in C#, you can intercept JavaScript calls and translate them to whatever you want in your browser. Though that won't work if you want it to be available to other browsers.

Write a com object that wraps your call to user32. Invoke it in IE/javascript.
Your DynamicWrapperX object would work for this (it would BE that com object, allowing you to just call your dlls as you wish).