WebView internal pages call external code

Cocos Creator
#1

I have a webview that shows an image and I would like to capture events from taps on the image. So, for example: when the image is shown and the user taps on it, I need to capture that tap and close the webview. When I test on a browser on a laptop, it works, but it does not work on a real Android and iOS device.

This is the way I have tried:

https://docs.cocos.com/creator/manual/en/ui-system/components/editor/webview.html#webview-internal-pages-call-external-code

I’m facing the issue with below snippet

function jsCallback (target, url) {
            // The return value here is the URL value of the internal page, and it needs to parse the data it needs.
            let str = url.replace(scheme + '://', ''); // str === 'a=1&b=2'
            // webview target
            console.log(target);
        }

        this.webview.setJavascriptInterfaceScheme(scheme);
        this.webview.setOnJSCallback(jsCallback);

The function this.webview.setOnJSCallback(jsCallback); expects non-parameterized method for callback, Even if I remove the parameters, but I’m not able to catch the callback events from webview.

In addition, I’m working with Cocos Creator with Typescript and the article is having JavaScript code. If anyone faced the same type of issue and can provide a lead, that will much appreciable.

Thanks in Advance

#2

Do you mean that it worked on Desktop browser but didn’t work on Mobile browser?
Or do you mean that it didn’t work on Android and iOS native platform?

#3

When I test on a browser on a laptop, it works, but when we generate a build in cocos creator for android and iOS it does not work on a real Android and iOS device.

#4

OK, our team will track this issue.

#5

@dumganhar Thanks for your response, let me know if we can connect on a call to share my screen and provide you the further details about the implementation.

#6

From your description, it seems that the webview on iOS&Android cannot responde your click event to and close the webview. But I’m not sure for your specific usage at present. Can you upload your demo and let me check. I will follow up your issue :slight_smile:

#7

@mmyduckx actually, I am developing a plugin for show ads on scene, and that ads are in HTML format which we are loading on webview, at the HTML ads we have a close button to be close that ad, and also links which I want to be load on device browser when that clicked.
For reference, attached a video here to present how the ads are closing.
Video Reference : https://drive.google.com/file/d/1eqF70FLJh0iyHERnRGmsJB5BDosXdJrD/view?usp=sharing

#8

I can’t clearly understand what your video conveys. Could you please attach your demo and reproducible steps to me. Thank you very much.

#9

@mmyduckx
Here is the code in the zip,
https://drive.google.com/file/d/1q6LMNb11kKTCyKvqr7twFa_1IInRlJyf/view?usp=sharing

although in this video I have explained more about the issue,
https://drive.google.com/file/d/10v81vcEL2bZyHVKxF29w8YgomZ5DhWKw/view?usp=sharing

#10

企业微信截图_9778000c-9e4b-4cf6-92ea-99d249f0183e
企业微信截图_9778000c-9e4b-4cf6-92ea-99d249f0183e1169×894 151 KB

In your demo, window is an object on the web, so ios&android,which is native platform , DO NOT support this usage. Maybe you could directly call the close related method through other methods (eg. by click event or some general custom event-related interface) for your implementation.
If this cannot meet your requirement or you need some specfic webview related event which we do not provide yet, please let me know.

#11

@mmyduckx

I want to know about an event where I can get the clicks on web view content,

image
image1629×933 157 KB

https://docs.cocos.com/creator/manual/en/ui-system/components/editor/webview.html

Here on the above-mentioned link, I can see only 3 events with web-view reference, i.e. Loading, Loaded, and Error, but not any click event is mentioned there. If you have any demo code where I can see how the click event be implemented, or might be if you can add that event to the shared code, be great helpful.

Thanks in advance.

#12

image
image1335×1246 129 KB

I’m not sure about your intention, but I think maybe you can refer to this part to achieve your function.

#13

@mmyduckx I have already checked this code, but it’s not working, I am sharing in a while after updating this code on my demo code.

#14

Your demo does not seem to be the above usage, or I have not received the demo related above usage that you said do not work.

#15

@mmyduckx
Actually it’s a minimum demo code, which I have shared, in this short demo I am updating the scheme code, and I am sharing another zip for that code too, in next 30 min.

#16

I can’t find the zip, could you upload again?

#17

@mmyduckx Not yet uploaded, I will update here to you once it’s upload done.

#18

@mmyduckx here I have uploaded the zip,
https://drive.google.com/file/d/1bEdARwAKnxh6uFm_hfT3qQA5Zpxd8HB9/view?usp=sharing

#19

Because I can’t see your html code, I’m not sure whether your code is written according to the requirements of the document. You may need to confirm that your usage meet requirement according to the document. WebView Component Reference · Cocos Creator

#20

@mmyduckx
view-source:https://rohit-5ex.github.io/cocos-page/testpage.html

image
image1861×402 44.8 KB

here you can get the HTML page code, although here I am pasting the HTML page code,

<body style="background-color:'white';">
	<center>
    <div>
        <input id="trigger-button" type="button" value="Trigger" onclick="onClick()"/>
    </div>
    <div>
        <a href="https://example.com"><img src="https://bulma.io/images/placeholders/480x800.png" alt="Poster Image"></a>
    </div>
    </center>

    <div id="close-button" onclick="javascript:window.parent.postMessage({type: 'close'}, '*');">Close</div>

    
</body>
	<script>
		    function onClick () {
		        // One of them sets up the URL scheme
		        document.location = 'testkey://a=1&b=2';
		    }
	</script>