Cross-platform SDK and HTML5 tools for mobile app development
X
 

How to call JavaScript in another HTML file

14 posts / 0 new
Last post
ek
ek's picture
Offline
Joined: 13 Mar 2012
Posts:
How to call JavaScript in another HTML file

I have two HTML files in my project. In the first one I use native ui and have a TabScreen, in one of the tabs I have a WebView which points to my second HTML file.

Now I want to call some JavaScript in the second file, from the first file. How can I do this?

 

xeoshow
xeoshow's picture
Offline
Mobile Wizard
Joined: 5 Jun 2012
Posts:
Micke, Finally works in my

Micke,

Finally works in my own env, really thanks a lot!

Mikael Kindborg
miki's picture
Offline
Mobile Sorcerer
Joined: 29 Jun 2010
Posts:
That is great to hear! Thanks

That is great to hear! Thanks for the update.

Micke :)

Iraklis Rossis
Iraklis Rossis's picture
Offline
Mobile Archmage
Joined: 3 Aug 2011
Posts:
I have been out of touch with

I have been out of touch with recent wormhole developments, I guess someone else should know better.

xeoshow
xeoshow's picture
Offline
Mobile Wizard
Joined: 5 Jun 2012
Posts:
Hi Iraklis, I found there is

Hi Iraklis,

I found there is quite big change in mosync 3.2.1, now seems use HybridMoblet instead, and it provides an api as below, is it something related to the topic in this thread? 

/**

* Initialize the Wormhole JS library. Should be

* called after the page has been displayed.

*/

virtual void openWormhole(MAHandle webViewHandle);

 

I tried below code but seems no use, could you or any one please give some hints? Thanks.

const char* catViewHandleStr = message.getNext();

MAHandle catViewHandle = stringToInteger(catViewHandleStr);

openWormhole(catViewHandle);

The index.html/js part:

<div widgetType="WebView" id="catView" width="-1" height="55" url="category.html"></div>

......

var catViewHandle = mosync.nativeui.getNativeHandleById("catView");

mosync.bridge.send(["catWormhole", catViewHandle + ""]);

......

category.html used a mosync call in a function like below which is available in the main.cpp :

mosync.bridge.send(["closeApp"]);

 

 

Mikael Kindborg
miki's picture
Offline
Mobile Sorcerer
Joined: 29 Jun 2010
Posts:
Hi xeoshow, Yes, there is a

Hi xeoshow,

Yes, there is a new class called HybridMoblet that is now the recommended way to use Wormhole.

The difference is that messages from JavaScript are now handled in the library rather than in your own code in main.cpp. This document describes the new system: http://www.mosync.com/documentation/manualpages/how-communicate-between-javascript-and-c-mosync

Note that openWormhole() is not meant to be called explicitly. It is called internally by the framework.

For a complete example app, create an app using MoSync SDK 3.2.1 from the HTML5/JS/C++ Hybrid template. The code in main.cpp looks like this in this template:

{syntaxhighlighter brush: cpp;fontsize: 100; first-line: 1; }#include <Wormhole/HybridMoblet.h>

#include "MAHeaders.h" // Defines BEEP_WAV

// Namespaces we want to access.
using namespace MAUtil;
using namespace NativeUI;
using namespace Wormhole;

/**
* The application class.
*/
class MyMoblet : public HybridMoblet
{
public:
MyMoblet()
{
// Show the start page.
showPage("index.html");

// Set the sound used by the PhoneGap beep notification API.
// BEEP_WAV is defined in file Resources/Resources.lst.
// Below we add our own beep message, to illustrate how to
// invoke custom C++ code from JavaScript. Do not confuse these
// two ways of playing a beep sound.
setBeepSound(BEEP_WAV);

// Register functions to handle custom messages sent
// from JavaScript.
addMessageFun(
"Vibrate",
(FunTable::MessageHandlerFun)&MyMoblet::vibrate);
addMessageFun(
"Beep",
(FunTable::MessageHandlerFun)&MyMoblet::beep);
}

void vibrate(Wormhole::MessageStream& message)
{
int duration = MAUtil::stringToInteger(message.getNext());
maVibrate(duration);
}

void beep(Wormhole::MessageStream& message)
{
// This is how to play a sound using MoSync API.
maSoundPlay(BEEP_WAV, 0, maGetDataSize(BEEP_WAV));
}
};

/**
* Main function that is called when the program starts.
* Here an instance of the MyMoblet class is created and
* the program enters the main event loop.
*/
extern "C" int MAMain()
{
(new MyMoblet())->enterEventLoop();
return 0;
}
{/syntaxhighlighter}

There are also some small changes in index.html, please check the version of index.html that is in the template app.

There file wormhole.js is also new in MoSync SDK 3.2.1, it is very important to update this file in your existing project. Here are futher details about this: http://www.mosync.com/documentation/manualpages/update-wormhole

To learn more about how to use multiple WebView, the PhotoGallery app is a good staring point, see this document: http://www.mosync.com/documentation/manualpages/building-photo-gallery

Let me know if any further questions arise, and I will try to help.

Very best regards, Micke

xeoshow wrote:

Hi Iraklis,

I found there is quite big change in mosync 3.2.1, now seems use HybridMoblet instead, and it provides an api as below, is it something related to the topic in this thread? 

/**

* Initialize the Wormhole JS library. Should be

* called after the page has been displayed.

*/

virtual void openWormhole(MAHandle webViewHandle);

 

I tried below code but seems no use, could you or any one please give some hints? Thanks.

const char* catViewHandleStr = message.getNext();

MAHandle catViewHandle = stringToInteger(catViewHandleStr);

openWormhole(catViewHandle);

The index.html/js part:

<div widgetType="WebView" id="catView" width="-1" height="55" url="category.html"></div>

......

var catViewHandle = mosync.nativeui.getNativeHandleById("catView");

mosync.bridge.send(["catWormhole", catViewHandle + ""]);

......

category.html used a mosync call in a function like below which is available in the main.cpp :

mosync.bridge.send(["closeApp"]);

 

 

Iraklis Rossis
Iraklis Rossis's picture
Offline
Mobile Archmage
Joined: 3 Aug 2011
Posts:
I think that you also need to

I think that you also need to add your webappmoblet as a target for the webview messages (with the addWebViewListener method)

xeoshow
xeoshow's picture
Offline
Mobile Wizard
Joined: 5 Jun 2012
Posts:
Hi Iraklis, Now in the

Hi Iraklis,

Now in the index.html I add below:

{syntaxhighlighter brush: cpp;fontsize: 100; first-line: 1; }mosync.bridge.send(["Custom", "status"]);{/syntaxhighlighter}

And in the main.cpp I add below:

{syntaxhighlighter brush: cpp;fontsize: 100; first-line: 1; } // Here you can add your own message handing as needed.
else if (0 == strcmp(p, "Custom"))
{
int bufferSize = 1024;
char buffer[bufferSize];

const char* command = stream.getNext();
if (NULL != command && (0 == strcmp(command, "status")))
{
statusDialog = new Screen();
statusWebView = new WebView();
statusWebView->enableWebViewMessages();
statusWebView->setWidth(-1);
statusWebView->setHeight(-1);
statusWebView->openURL("status.html");
statusDialog->addChild(statusWebView);

statusWebView->setProperty("url", "javascript:initme()");
statusDialog->show();
}
if (NULL != command && (0 == strcmp(command, "alert")))
{
......
maAlert(msg, msg, NULL, NULL, NULL);
}
......
{/syntaxhighlighter}

In the initme(), I added a wormhole call like below but seems did not fire (alert logic also shown above):

{syntaxhighlighter brush: cpp;fontsize: 100; first-line: 1; }mosync.bridge.send(["Custom", "alert", "got you a"]);{/syntaxhighlighter}

Anything I missed or did wrong? Thanks!

Iraklis Rossis
Iraklis Rossis's picture
Offline
Mobile Archmage
Joined: 3 Aug 2011
Posts:
No, including wormhole.js is

No, including wormhole.js is not enough, the other webview has to be created through C++ in order to user the wormhole functionality.

xeoshow
xeoshow's picture
Offline
Mobile Wizard
Joined: 5 Jun 2012
Posts:
In the another html file, I

In the another html file, I have already added below, did not quite get your point: I create the another html file itself through JS and test that way? Could you please give some sample code snippets? Thanks!

{syntaxhighlighter brush: cpp;fontsize: 100; first-line: 1; }<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="js/wormhole.js"></script>
......
</head>{/syntaxhighlighter}

Iraklis Rossis
Iraklis Rossis's picture
Offline
Mobile Archmage
Joined: 3 Aug 2011
Posts:
No, it needs to become

No, it needs to become wormhole enabled. Not sure if that is possible if you create it through JS though.

ek
ek's picture
Offline
Joined: 13 Mar 2012
Posts:
Thanks, that did the trick.

Thanks, that did the trick. Smile

 

Iraklis Rossis
Iraklis Rossis's picture
Offline
Mobile Archmage
Joined: 3 Aug 2011
Posts:
Ah, kinda rare thing to try,

Ah, kinda rare thing to try, so there is not much explicit documentation about this process, but it can be done.

If your webview is named, for example "myWebView", you can use the following code:

{syntaxhighlighter brush: cpp;fontsize: 100; first-line: 1; }var myWebView = document.getNativeElementById("myWebView");
myWebView.setProperty("url", "javascript:myFunction()");{/syntaxhighlighter}

Haven't tried it myself, but I think it will work. Unfortunately, I can't think of a way to actually return anything to the main page.

xeoshow
xeoshow's picture
Offline
Mobile Wizard
Joined: 5 Jun 2012
Posts:
Hi Iraklis, If in the another

Hi Iraklis,

If in the another html page, in the myFunction method, If I add below statement, should it can work? I tested and seems not work ...

mosync.bridge.send(["Custom", "test"]);

 

Iraklis Rossis wrote:

Ah, kinda rare thing to try, so there is not much explicit documentation about this process, but it can be done.

If your webview is named, for example "myWebView", you can use the following code:

{syntaxhighlighter brush: cpp;fontsize: 100; first-line: 1; }var myWebView = document.getNativeElementById("myWebView");
myWebView.setProperty("url", "javascript:myFunction()");{/syntaxhighlighter}

Haven't tried it myself, but I think it will work. Unfortunately, I can't think of a way to actually return anything to the main page.

Login or register to post comments