Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
Posts: 828
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

evaluateJavaScript

is there some secret that I'm just not getting?... I cannot get this to run the function, i've even tried adding it to a button in qml to ensure the page has loaded and it still does nothing.

 

.qml

Button {
   onClicked {
     var script = "testing()";
     myWebview.evaluateJavaScript(script);
   }
}

 .js

function testing() {
	var myString = 'it worked';/*I wish*/

};

 

I've looked through other examples and it appears I'm doing things correctly, I don't understand why the function will not run.

 

 

 

 

 

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: evaluateJavaScript

Hi!
AFAIK it won't load local js file. This function will execute the code in webpage context.

I think it will work if you load this .js file manually and pass it's contents to evaluateJavaScript() first.

Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 828
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: evaluateJavaScript

[ Edited ]

Thanks, I did just get it working (sort-of) but it wont call any functions in my .js file, only what I explicitly add from qml which doesn't solve my issue of adjusting the code in my .js.

 

How would you reccomend going about loading the .js file in qml so evaluateJavaScript() can handle it

 

the file is loaded from the html page as 

<script src="script.js"></script>

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: evaluateJavaScript

WebView runs in a protected environment. I'm not sure if it's possible to access the local filesystem directly from it.

 

But a possible workaround is creating a helper C++ function and using it to load the file from assets:

http://supportforums.blackberry.com/t5/Native-Development/how-to-load-javascript-file-in-webview/m-p...

And passing this string to evaluateJavaScript.

 


Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 828
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: evaluateJavaScript

[ Edited ]

Thanks again for the pointer, 1 final question.

 

I have the .js file loaded into a string now, I'm still unsure how to edit a function inside of it though.

 

tried a few different methods but no results it's probably something simple but there's absolutely nothing out there that explains this in simple detail.

 

var codeToInject = "var ele = document.createElement('mscript');ele=" + cpp.mJS + ";document.head.appendChild(ele); function doFoo(){testing(); alert('You did the foo!');}";
mWeb.evaluateJavaScript(codeToInject);
var codeToInject2 = "var ele = document.createElement('mscript');ele=" + cpp.mJS + ";document.head.appendChild(ele); doFoo();";

 my goal is to get the testing(); function that's now in my cpp.mJS string to run

Developer
Posts: 1,168
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: evaluateJavaScript

Hey Kyle, as stated earlier there is no way to call evaluateJavaScript() against an external .js file since the function executes again the DOM of the loaded page. I extended WebView with a new functiion called executeJavaScriptFile() which reads the file into a string then executes it with executeJavaScript().

 

Alternately you could add a "script" element to the DOM with executeJavaScript() and then call any functions in that script as needed.



Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.  multiFEED Icon

Play nice: Clicking Like Button on posts that helped you not only encourages others to continue sharing their experience, but also improves your own rating on this board. Also, don't forget to accept a post if it solves your problem or answers your question.
Developer
Posts: 1,168
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: evaluateJavaScript

If you don't want to just execute each line in the js file directly, you can just define the function then immediately call it. Something like:

 

function myFunc() {//---Your stuff}; myFunc();

 


slashkyle wrote:

Thanks again for the pointer, 1 final question.

 

I have the .js file loaded into a string now, I'm still unsure how to edit a function inside of it though.

 

tried a few different methods but no results it's probably something simple but there's absolutely nothing out there that explains this in simple detail.

 

var codeToInject = "var ele = document.createElement('mscript');ele=" + cpp.mJS + ";document.head.appendChild(ele); function doFoo(){testing(); alert('You did the foo!');}";
mWeb.evaluateJavaScript(codeToInject);
var codeToInject2 = "var ele = document.createElement('mscript');ele=" + cpp.mJS + ";document.head.appendChild(ele); doFoo();";

 my goal is to get the testing(); function that's now in my cpp.mJS string to run






Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.  multiFEED Icon

Play nice: Clicking Like Button on posts that helped you not only encourages others to continue sharing their experience, but also improves your own rating on this board. Also, don't forget to accept a post if it solves your problem or answers your question.
Developer
Posts: 828
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: evaluateJavaScript

[ Edited ]

Not sure that I entirely understand.   Somehow in this example they're calling evaluateJavaScript which then runs any number of -> function myFunc() they have setup in their qml page. and its own individual .js file

 

http://blackberry.github.io/Cascades-Samples/webmapview.html

 

 

All I want to do is when the rotation of the deivce changes, update the text of a label in my .js to to reflect the current orientation. (havent been able to get web orientation code to provide orientation results) and this method will allow me to communicate the multiple additional things I will need to eventually, but I just really don't get how they pulled it off without such headache.

Developer
Posts: 1,168
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: evaluateJavaScript

What I am saying is that the page that is loaded in the WebView is in a different scope than anything in a js file or QML. If you aren't loading pages you have defined yourself so they contain a <script> tag that points to the js file, you must add the script element to the page's DOM using evaluateJavaScript() before you can call any of the functions in the js file.

 

Here is a link that discusses adding a script elelment to the DOM. The example given adds inline code to the element, but you can adapt this to load code from a js file instead. Use evaluateJavaScript() to execute the code to add the element, then once the script element has been added to the DOM you can call any functions in the js file at will.



Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.  multiFEED Icon

Play nice: Clicking Like Button on posts that helped you not only encourages others to continue sharing their experience, but also improves your own rating on this board. Also, don't forget to accept a post if it solves your problem or answers your question.
Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: evaluateJavaScript

[ Edited ]

I've checked the sample and found that they're ultimately passing this webpage to WebView:

 

    <!DOCTYPE html>
    <html>
        <head>
            <script src="local:///assets/google_map.js"></script>
...

So, it seems that it's possible to open local files. I did not knew that.

Could you try this style of url?

 

upd:if you're using the method above, make sure that the page is completely loaded by checking loadingChanged state before executing commands:

 

onLoadingChanged: {
    if (loadRequest.status == WebLoadStatus.Succeeded) {
       // evaluateJavascript should find the function if called after receiving this event
    }
}

 


 

I think this should also work:

 

// If mJS contains the text from the .js file:

mWeb.evaluateJavaScript(cpp.mJS); // Execute JavaScript code in mJS

mWeb.evaluateJavaScript("doFoo();"); // Run a function previously defined by executing the text in mJS

 


Andrey Fidrya, @zmeyc on twitter