How do I receive the Callback of Javascript from WebView in cocos2d-x?

cocos2d-x C++
1

Not returned callback also press the button on the webview.
Because I don’t know, please tell me the simple example ?

test.html

<!DOCTYPE html>
<html lang="ja">
<head>
		<meta charset="utf-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<meta name="robots" content="none" />
	</head>
	<body>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script src="js/sp.js"></script>
		<ul class="slideshow">
			<li>
                     <a href="#" onclick='sp.call("test1")'>
			<img src="img/test1.jpg" width="100%"/>
			</li>
		</ul>
		<style>
			.bx-default-pager {
				display: none;
			}
			.bx-viewport {
				border: none !important;
			}
		</style>
	</body>
</html>

sp.js

(function(){
	var sp = {};
	var isAndroid = navigator.userAgent.match(/Android/);
	var isIOs = navigator.userAgent.match(/iPhone/) || navigator.userAgent.match(/iPod/) || navigator.userAgent.match(/iPad/);
	sp.call = function(text){
		if(isAndroid){
			window.Cocos2dx.call(text);
		} else if (isIOs) {
   			window.location.href = "cocos2dx:" + text;
    		} else {
    			window.location.href = text;
    		}
    	};
    	window.sp = sp;
})();

HelloWorld.cpp

    bool HelloWorld::init()
    {
       auto webView = cocos2d::experimental::ui::WebView::create();
       webView->loadURL("https://test.html);
       webView->setOnJSCallback(CC_CALLBACK_1(HelloWorld::callbackFromJS,this));
       webView->setAnchorPoint(Point(0,0));
       webView->setPosition(Point(0,150));
       webView->setContentSize(Size(WINSIZE.width,WINSIZE.height-150));
       this->addChild(webView);
    }

void HelloWorld::callbackFromJS(cocos2d::experimental::ui::WebView* webview, std::string* &msg)
{
    CCLOG("callbackFromJS");
}
2

The JSCallback works like this.

It checks everytime a url is loaded, if that contains the JavascriptInterfaceScheme name if any defined for the webview. If it is there it wont load that url instead call the JSCallBack function. If not it will normally load the url. In @Plusmiles case you have not set any JavascriptInterfaceScheme name.

Below is the code which worked for me

cocos2d::experimental::ui::WebView * Practice::_webView;
_webView = experimental::ui::WebView::create();
_webView->setContentSize(Size(1200, 1200));
_webView->setPosition(Vec2(900,768));
_webView->setJavascriptInterfaceScheme("cocos2dx");
_webView->loadURL("http://test.schoolcountry.com/Mathaly/Practice.htm");
_webView->setOnJSCallback(&Practice::callbackFromJS);
this->addChild(_webView, 1);


void Practice::callbackFromJS(cocos2d::experimental::ui::WebView* webview, const std::string &answer) {
     std::string response = answer;
}

to call from html file you need to set

window.location.href = "cocos2dx:" + text;

where cocos2dx is the JavascriptInterfaceScheme name set in the webview. Whenever it find this name in the url it will call the function with webview object as first parameter and url as second. So you need to avoid this webview in url if you want the url to load rather than calling JSCallback function.

I hope this answer will help.

1 Like