Need help with web view content

[TunTin]

Currently I have 1 problem: I need to add an image to the content of the web view so that when zooming the web view, that image is also zoomed, please help me, thanks

[KojiNakamaru]

It seems rather an issue about html and not webview. How do you add an image to your content?

[TunTin]

I use WebView just to load an SVG file that exists in the Local Device. I have a PDNoteNode class that inherits from the UIImageView class (this is the Image I want to add to the WebView): see Img_1.png.

In the PDViewNote class that inherits from the WKWebView class I have a property of type UIView named contentView: see Img_2.png.

In the constructor of the PDViewNote class I will have the contentView property point to the scrollView.subviews.firstObject of the PDViewNote (which is also the WKWebView): see Img_3.png.

As a result, when I add Image (which is PDNoteNode) to contentView, My Image will have the same effect as SVG file, when I zoom WKWebView, SVG file and Dark's Image are zoomed along: see Img_4.png.

Can you help me to do the same with WebView on Unity?, thanks.

[KojiNakamaru]

Is your implementation based on this plugin? It seems different one.

Also, if you need to place small images over the svg, I think it is better to add them as html elements. Then you won't need to worry about zooming. For example, thhe sample app of this plugin with the following diff shows a small image at (20, 30) as below.

diff --git a/sample/Assets/Scripts/SampleWebView.cs b/sample/Assets/Scripts/SampleWebView.cs
index d4fd613..05a1bd6 100644
--- a/sample/Assets/Scripts/SampleWebView.cs
+++ b/sample/Assets/Scripts/SampleWebView.cs
@@ -108,6 +108,7 @@ public class SampleWebView : MonoBehaviour
                     "};");
 #endif
                 webViewObject.EvaluateJS(@"Unity.call('ua=' + navigator.userAgent)");
+                webViewObject.EvaluateJS(@"PutSmallImage(20, 30)");
             },
             //transparent: false,
             //zoom: true,
diff --git a/sample/Assets/StreamingAssets/sample.js b/sample/Assets/StreamingAssets/sample.js
index 8dc3fc4..1892ac2 100644
--- a/sample/Assets/StreamingAssets/sample.js
+++ b/sample/Assets/StreamingAssets/sample.js
@@ -9,4 +9,15 @@ window.addEventListener(
                 msg.textContent = '(NOTE: the background color was changed by sample.js, for checking whether the external js code works)';
             },
             3000);
+        window.PutSmallImage = function(x, y) {
+            Unity.call("here");
+            var img = document.createElement('img');
+            img.src = "sample.jpg";
+            img.width = 32;
+            img.height = 32;
+            img.style.position = "absolute";
+            img.style.left = x + "px";
+            img.style.top = y + "px";
+            document.body.appendChild(img);
+        };
     });

[TunTin]

Thank you very much for your solution, but can you tell me more if I use your plan, can I move that thumbnail to another location or delete it because my application is written in Objective-C iOS has those functions, thank you very much

[KojiNakamaru]

If you use unity-webview, you can utilize EvaluateJS() to evaluate any javascript code, so that you can dynamically add/move/delete images. If you don't utilize unity-webview and implement your app with objc, you can utilize https://developer.apple.com/documentation/webkit/wkwebview/1415017-evaluatejavascript?language=objc .

[TunTin]

Great, I will try your solution and give feedback later, many thanks

[TunTin]

Thanks, I'll check it out.

===== Gửi từ Gmail của Nguyễn Tùng Anh =====

Vào 1:14 CH, Th 5, 3 thg 6, 2021 Koji Nakamaru @.***> đã viết:

If you use unity-webview, you can utilize EvaluateJS() to evaluate any javascript code, so that you can dynamically add/move/delete images. If you don't utilize unity-webview and implement your app with objc, you can utilize https://developer.apple.com/documentation/webkit/wkwebview/1415017-evaluatejavascript?language=objc .

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gree/unity-webview/issues/694#issuecomment-853597043, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC2FY5CHPWB7DBLYQ5HX7SLTQ4MT7ANCNFSM454NHIMA .

[TunTin]

Currently I have 1 problem as follows: I need to catch click event on WebView with code like below, please see image below but I can't do it, do you have any solution to help me , thank you

[KojiNakamaru]

This plugin just overlays native webviews over unity's rendering view, so any click on webviews cannot be directly detected by unity (cf. NOTE described at https://github.com/gree/unity-webview/tree/ed0ceef5a366b1185da49ef4ec50088b2a3516e2#unity-webview ). Therefore, you should receive click events with javascript and send information of them to the unity side with Unity.call(). The following might be helpful:

https://github.com/gree/unity-webview/issues/693#issuecomment-852585937

[TunTin]

Thanks, I'll check it out.

===== Gửi từ Gmail của Nguyễn Tùng Anh =====

Vào 4:12 CH, Th 5, 17 thg 6, 2021 Koji Nakamaru @.***> đã viết:

This plugin just overlays native webviews over unity's rendering view, so any click on webviews cannot be directly detected by unity (cf. NOTE described at https://github.com/gree/unity-webview/tree/ed0ceef5a366b1185da49ef4ec50088b2a3516e2#unity-webview ). Therefore, you should receive click events with javascript and send information of them to the unity side with Unity.call(). The following might be helpful:

693 (comment)

https://github.com/gree/unity-webview/issues/693#issuecomment-852585937

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gree/unity-webview/issues/694#issuecomment-863072603, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC2FY5F4YWUGEO6B6WQNVGDTTG36BANCNFSM454NHIMA .

[TunTin]

I catch click event on WebView as follows: I catch Unity.call('clicked') as follows: My Clicked function is as follows: But when I click on WebView my Clicked function is not run, and how I get the click coordinates, is it the evt parameter of function(evt), Can you help me to solve it, thanks

[KojiNakamaru]

Maybe you did something wrong. The following change for the sample app works correctly. Please also refer https://www.w3schools.com/jsref/obj_mouseevent.asp about events.

diff --git a/sample/Assets/Scripts/SampleWebView.cs b/sample/Assets/Scripts/SampleWebView.cs
index e8aa466..bec989c 100644
--- a/sample/Assets/Scripts/SampleWebView.cs
+++ b/sample/Assets/Scripts/SampleWebView.cs
@@ -108,6 +108,12 @@ public class SampleWebView : MonoBehaviour
                     "};");
 #endif
                 webViewObject.EvaluateJS(@"Unity.call('ua=' + navigator.userAgent)");
+                webViewObject.EvaluateJS(@"document.addEventListener(
+                                             'click',
+                                             function(evt) {
+                                               Unity.call(evt.offsetX + ',' + evt.offsetY);
+                                             },
+                                             false);");
             },
             //transparent: false,
             //zoom: true,

[TunTin]

I followed your suggestions and now I am having 2 problems: 1: If I use WebView to display an HTML file like the image below, I have succeeded in adding a small image to the position I click on the WebView but when I use WebView to display an SVG file like the image below, things are not like that.

2: I don't understand why but I can only use the available image file sample.jpg to display thumbnails on WebView but when using an image I manually add to the Project like Note_Solid.png, the thumbnail cannot be displayed. OK.

All of my code is in SampleWebView.cs and I will send you below along with all the Assets I use for You to test. Assets.zip

Hope You can suggest me a solution, thanks

[KojiNakamaru]

The sample app won't load a svg file directly. The following part extracts jpg/js/html files from StreamingAssets and loads the html file by LoadURL().

https://github.com/gree/unity-webview/blob/ed0ceef5a366b1185da49ef4ec50088b2a3516e2/sample/Assets/Scripts/SampleWebView.cs#L144-L173

An easy solution would be to rename your svg file to sample.svg and embed it in sample.html. If you utilize the sample app as is, you also need to add ".svg" to exts. Similarly about 2 you can rename your png file to sampe.png and add ".png" to exts.

[TunTin]

Thanks, I'll check it out.

===== Gửi từ Gmail của Nguyễn Tùng Anh =====

Vào 9:19 SA, Th 3, 22 thg 6, 2021 Koji Nakamaru @.***> đã viết:

The sample app won't load a svg file directly. The following part extracts jpg/js/html files from StreamingAssets and loads the html file by LoadURL().

https://github.com/gree/unity-webview/blob/ed0ceef5a366b1185da49ef4ec50088b2a3516e2/sample/Assets/Scripts/SampleWebView.cs#L144-L173

An easy solution would be to rename your svg file to sample.svg and embed it in sample.html. If you utilize the sample app as is, you also need to add ".svg" to exts. Similarly about 2 you can rename your png file to sampe.png and add ".png" to exts.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gree/unity-webview/issues/694#issuecomment-865469685, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC2FY5D3K2LSXPETHKSJLBLTT7XMDANCNFSM454NHIMA .

[TunTin]

The above problem I will solve according to your suggestion, many thanks. Currently I have another problem that I have a Scene I call it DialogScene which will display a list of SVG files for the user to choose from but every time I use LoadScene function to load DialogScene, DialogScene is always hidden under WebView, Do you have any solution to help me, thanks

[KojiNakamaru]

You cannot overlay any unity rendering over webviews, as discussed in https://github.com/gree/unity-webview/issues/694#issuecomment-863072603 . You could realize such a list of UI in javascript/html or hide the webview while a user is picking a svg.

[TunTin]

Thanks, I'll check it out.

===== Gửi từ Gmail của Nguyễn Tùng Anh =====

Vào 8:55 CH, Th 3, 22 thg 6, 2021 Koji Nakamaru @.***> đã viết:

You cannot overlay any unity rendering over webviews, as discussed in #694 (comment) https://github.com/gree/unity-webview/issues/694#issuecomment-863072603 . You could realize such a list of UI in javascript/html or hide the webview while a user is picking a svg.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gree/unity-webview/issues/694#issuecomment-866005609, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC2FY5EZAFDGLSOD6LQ5LELTUCI5LANCNFSM454NHIMA .

[TunTin]

The above problems I have solved according to your advice and very successful, thank you very much and now I have 1 more problem that needs your suggestion, my application has 1 StatusBar with Height = 60px is on top and WebView will display below it, when initializing WebView I have set TopMargin = 60px but on devices with different screen sizes TopMargin of WebView is showing different, please see image under. Can you suggest me the solution to solve this problem, thanks

[KojiNakamaru]

Your status bar might be scaled depending on the screen resolution. SetMargin() sets margins in device pixel units, so if you specify the top margin 60, the status bar's height should always be 60 in device pixel units. If you realize the status bar as a uGUI image, its rect transform should be as below:

[TunTin]

Thank you for the clarification.

===== Gửi từ Gmail của Nguyễn Tùng Anh =====

Vào 9:51 CH, Th 4, 23 thg 6, 2021 Koji Nakamaru @.***> đã viết:

Your status bar might be scaled depending on the screen resolution. SetMargin() sets margins in device pixel units, so if you specify the top margin 60, the status bar's height should always be 60 in device pixel units. If you realize the status bar as a uGUI image, its rect transform should be as below:

[image: image] https://user-images.githubusercontent.com/2645978/123118733-d8e7c300-d47d-11eb-9514-b38bfa9d3d43.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gree/unity-webview/issues/694#issuecomment-866906799, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC2FY5FJ3ZTX3F7QXYNWFHDTUHYIFANCNFSM454NHIMA .

[TunTin]

Currently I have a problem in calling a function that passes a string parameter from C# to JS and vice versa: C# I call up the JS like this: WebVwObj.EvaluateJS(string.Format(@"AddBackgroundForViewNote('{0}', '{1}')", "Title", "Value")); JS I have a function like this: window.AddBackgroundForViewNote = function(id, url) { // Unity.call('Anh.NT: AddBackgroundForViewNote - id = ' + id + ', url = ' + url); var BackgroundViewNote = document.createElement('img'); BackgroundViewNote.id = id; BackgroundViewNote.src = url; BackgroundViewNote.style.position = "absolute"; document.body.appendChild(BackgroundViewNote); }; And the unfortunate thing is that on Android it runs OK but not on iOS, Can you suggest a solution for me, thanks

[KojiNakamaru]

Unity.call() is natively defined for Android but not for iOS. For iOS, it is defined in the ld: callback:

https://github.com/gree/unity-webview/blob/166cb032a96da97bfa86fd2ac568b7063ec1239f/sample/Assets/Scripts/SampleWebView.cs#L58-L80

If you can edit the html, you can define Unity.call() in the html:

<html>
  <head>
    ...
    <script>
      if (window && window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.unityControl) {
          window.Unity = {
              call: function(msg) {
                  window.webkit.messageHandlers.unityControl.postMessage(msg);
              }
          }
      } else {
          window.Unity = {
              call: function(msg) {
                  window.location = 'unity:' + msg;
              }
          }
      }
    </script>
    ...
  </head>
  ...
</html>

then you don't need to define it in the ld: callback.

[TunTin]

Thanks, I'll check it out.

===== Gửi từ Gmail của Nguyễn Tùng Anh =====

Vào 9:16 SA, Th 2, 12 thg 7, 2021 Koji Nakamaru @.***> đã viết:

Unity.call() is natively defined for Android but not for iOS. For iOS, it is defined in the ld: callback:

https://github.com/gree/unity-webview/blob/166cb032a96da97bfa86fd2ac568b7063ec1239f/sample/Assets/Scripts/SampleWebView.cs#L58-L80

If you can edit the html, you can define Unity.call() in the html:

... ... ...

then you don't need to define it in the ld: callback.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gree/unity-webview/issues/694#issuecomment-877920036, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC2FY5ERS4QS6DIWIWQHYDDTXJF6RANCNFSM454NHIMA .

[TunTin]

Thank you very much for the suggestion but sorry to bother you again because I have checked and found that Unity.call is still running OK on iOS, as evidenced when I click on the WebView on iOS I called Unity.call and transmit Click coordinates from HTML + JS to Unity + C# as Log below I copied from XCode: 2021-07-13 19:25:19.182611+0700 PlazaDeux2021UnityVer[3217:1220003] Received event Anh.NT: OnPointerClick|357|326 Anh.NT: CallFromJS[Anh.NT: OnPointerClick|357|326] EditVC:b__107_0(String) System.Action`1:Invoke(T)

Above all, my problem right now is that I can call back and forth between HTML + JS and Unity + C# if there is no String data in the parameter list, but if so, my code will just run. on Android but not on iOS and here is how I code, please refer below and give me your opinion, thanks Unity + C# code: WebVwObj.EvaluateJS(string.Format(@"AddBackgroundForViewNote('{0}', '{1}')", "ID for Obj", "Image for Obj"));

HTML + JS code: trong đó _id + _url là 2 tham số kiểu String window.AddBackgroundForViewNote = function (_id, _url) { var BackgroundViewNote = document.createElement('img'); BackgroundViewNote.id = _id; BackgroundViewNote.src = _url; BackgroundViewNote.style.position = "absolute"; document.body.appendChild(BackgroundViewNote); };

I will attach to you the HTML + JS file I use for your convenience Debug ViewNote.zip

[KojiNakamaru]

For the sample app, I put your ViewNote.html and ViewNote.js under StreamingAssets and copied sample.jpg to ViewNote.jpg:

set Url to ViewNote.html:

and changed SampleWebView.cs:

diff --git a/sample/Assets/Scripts/SampleWebView.cs b/sample/Assets/Scripts/SampleWebView.cs
index e8aa466..46a62e8 100644
--- a/sample/Assets/Scripts/SampleWebView.cs
+++ b/sample/Assets/Scripts/SampleWebView.cs
@@ -30,6 +30,7 @@ public class SampleWebView : MonoBehaviour
     public string Url;
     public Text status;
     WebViewObject webViewObject;
+    int id;

     IEnumerator Start()
     {
@@ -40,6 +41,15 @@ public class SampleWebView : MonoBehaviour
                 Debug.Log(string.Format("CallFromJS[{0}]", msg));
                 status.text = msg;
                 status.GetComponent<Animation>().Play();
+                if (msg.StartsWith("Anh.NT: OnPointerClick"))
+                {
+                    var pos = msg.Replace("Anh.NT: OnPointerClick|", "").Split('|');
+                    Debug.Log(string.Format(@"({0}, {1})", pos[0], pos[1]));
+                    var nid = "note" + id++;
+                    webViewObject.EvaluateJS(string.Format(@"AddBackgroundForViewNote('{0}', '{1}')", nid, "ViewNote.jpg"));
+                    webViewObject.EvaluateJS(string.Format(@"document.getElementById('{0}').style.left='{1}px'", nid, pos[0]));
+                    webViewObject.EvaluateJS(string.Format(@"document.getElementById('{0}').style.top='{1}px'", nid, pos[1]));
+                }
             },
             err: (msg) =>
             {

With this modified sample app, I can tap on iPhone screen to add ViewNote.jpg:

[TunTin]

Thanks, I'll check it out.

===== Gửi từ Gmail của Nguyễn Tùng Anh =====

Vào 12:05 CH, Th 4, 14 thg 7, 2021 Koji Nakamaru @.***> đã viết:

For the sample app, I put your ViewNote.html and ViewNote.js under StreamingAssets and copied sample.jpg to ViewNote.jpg:

[image: image] https://user-images.githubusercontent.com/2645978/125564013-31b9ec7a-e24a-4016-bc83-9b2b16165eb8.png

set Url to ViewNote.html:

[image: image] https://user-images.githubusercontent.com/2645978/125564064-c735fa88-20a9-49e4-8a72-3be4d855e12a.png

and changed SampleWebView.cs:

diff --git a/sample/Assets/Scripts/SampleWebView.cs b/sample/Assets/Scripts/SampleWebView.cs index e8aa466..46a62e8 100644--- a/sample/Assets/Scripts/SampleWebView.cs+++ b/sample/Assets/Scripts/SampleWebView.cs@@ -30,6 +30,7 @@ public class SampleWebView : MonoBehaviour public string Url; public Text status; WebViewObject webViewObject;+ int id;

 IEnumerator Start()
 {@@ -40,6 +41,15 @@ public class SampleWebView : MonoBehaviour
             Debug.Log(string.Format("CallFromJS[{0}]", msg));
             status.text = msg;
             status.GetComponent<Animation>().Play();+                if (msg.StartsWith("Anh.NT: OnPointerClick"))+                {+                    var pos = msg.Replace("Anh.NT: OnPointerClick|", "").Split('|');+                    Debug.Log(string.Format(@"({0}, {1})", pos[0], pos[1]));+                    var nid = "note" + id++;+                    webViewObject.EvaluateJS(string.Format(@"AddBackgroundForViewNote('{0}', '{1}')", nid, "ViewNote.jpg"));+                    webViewObject.EvaluateJS(string.Format(@"document.getElementById('{0}').style.left='{1}px'", nid, pos[0]));+                    webViewObject.EvaluateJS(string.Format(@"document.getElementById('{0}').style.top='{1}px'", nid, pos[1]));+                }
         },
         err: (msg) =>
         {

With this modified sample app, I can tap on iPhone screen to add ViewNote.jpg:

[image: sc] https://user-images.githubusercontent.com/2645978/125564479-2a03a408-bb3f-4387-b77c-72545f0d1b9a.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gree/unity-webview/issues/694#issuecomment-879590862, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC2FY5GJGMNRNDP3AI6F2LTTXULLPANCNFSM454NHIMA .

[TunTin]

Thanks for help. I tried on Sample Project same as You and yes My Code is ok on both Android and iOS but when I try again on My own Project everything is same, on Android OK but iOS not and I detect Out of all the lines of code that I write in Unity + C# to call HTML + JS, I would like to ask you if there is any special setup required for Project to be able to call HTML + JS from Unity + C# , thank you!

[KojiNakamaru]

There is no special setup to invoke EvalulateJS() (unity+c# -> html+js). You should track down the issue step by step and figure out which part doesn't work. If Unity.call() (html+js -> unity+c#) seems not working, you may miss its definition, which I discussed before: https://github.com/gree/unity-webview/issues/694#issuecomment-877920036 .

[TunTin]

Thanks, I'll check it out.

===== Gửi từ Gmail của Nguyễn Tùng Anh =====

Vào 11:09 CH, Th 4, 14 thg 7, 2021 Koji Nakamaru @.***> đã viết:

There is no special setup to invoke EvalulateJS() (unity+c# -> html+js). You should track down the issue step by step and figure out which part doesn't work. If Unity.call() (html+js -> unity+c#) seems not working, you may miss its definition, which I discussed before: #694 (comment) https://github.com/gree/unity-webview/issues/694#issuecomment-877920036 .

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gree/unity-webview/issues/694#issuecomment-880022632, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC2FY5DD5Q5PIOKTBV7GIBLTXWZDRANCNFSM454NHIMA .

[TunTin]

The above problems thanks to your suggestion I have solved them well, thank you very much. Currently I am having one more problem when manipulating WebView that I need to drag and drop on WebView, but with WKWebView on iOS, something like the picture below happens when I hold down on WebView, on Android it doesn't happen. , Do you have any solution to help me remove that functionality of WKWebView? Thank you.

[KojiNakamaru]

This should be caused by 3D Touch. You can disable it by modifying WebView.mm as below:

--- a/sample/Assets/Plugins/iOS/WebView.mm
+++ b/sample/Assets/Plugins/iOS/WebView.mm
@@ -186,6 +186,7 @@ static NSMutableArray *_instances = [[NSMutableArray alloc] init];
     }
     webView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
     webView.hidden = YES;
+    ((WKWebView *)webView).allowsLinkPreview = NO;

     [webView addObserver:self forKeyPath: @"loading" options: NSKeyValueObservingOptionNew context:nil];

cf. https://stackoverflow.com/questions/50045276/disable-3d-touch-for-ios-application/50045730#50045730

[KojiNakamaru]

I introduced wkAllowsLinkPreview argument for WebViewObject.Init() in #734 . Please set it false to disable 3D Touch.

[TunTin]

Thank you for the above solution, it worked. But when I hold down on WKWebview the select event happens like the image below and I can't drag/drop, Can you give me a solution to disable this event? Thank you.

[TunTin]

Thank you for the above solution, it worked. But when I hold down on WKWebview the select event happens like the image below and I can't drag/drop, Can you give me a solution to disable this event? Thank you.

[KojiNakamaru]

You can utilize user-select to disable selection.

body {
    -webkit-user-select: none;
}

cf. https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

[TunTin]

Thanks, I'll check it out.

===== Gửi từ Gmail của Nguyễn Tùng Anh =====

Vào 7:45 CH, Th 3, 7 thg 9, 2021 Koji Nakamaru @.***> đã viết:

You can utilize user-select to disable selection.

body { -webkit-user-select: none; }

cf. https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gree/unity-webview/issues/694#issuecomment-914275373, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC2FY5BTKW6CNGYBZIOG2EDUAYCN3ANCNFSM454NHIMA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[TunTin]

Your solution above works very well, thanks, but now I have another problem that I need your help, that is when I press and hold on WKWebView, something like the picture below appears and I don't know what it is, can you help me to ignore it? Thank you

[KojiNakamaru]

I cannot see which part is wrong. Do you mean the human face and/or the black square? I guess those are caused by your html/js and will be reproduced on Safari.

[TunTin]

I mean black square?

[TunTin]

When I long press on human face (img tag with source SVG file) a black square appears above the human face so I can't Drag/Drop human face, sorry for the above I didn't describe it properly Thank you for your quick reply

[KojiNakamaru]

You should try on Safari. At least there was no such thing when I tested sample.html with -webkit-user-select: none;.

[TunTin]

Thanks, I'll check it out.

===== Gửi từ Gmail của Nguyễn Tùng Anh =====

Vào 5:04 CH, Th 4, 8 thg 9, 2021 Koji Nakamaru @.***> đã viết:

You should try on Safari. At least there was no such thing when I tested sample.html with -webkit-user-select: none;.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gree/unity-webview/issues/694#issuecomment-915100356, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC2FY5G2FYBDQCIJ7MD5HZLUA4YJDANCNFSM454NHIMA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[TunTin]

This is the HTML code I use to Disable Selection on HTML, can you take a look and tell me maybe where am I wrong? Thank you.

[KojiNakamaru]

This part is okay and I don't think this affects your "black square" issue. The black square should be displayed by your javascript code and/or any javascript library that you use.

[TunTin]

Many thanks, I will continue to try on your Sample Project and will depend on the results that may have to ask You for further assistance.

[KojiNakamaru]

Here is a minimum sample.html which demonstrates how to drag an image.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Unity WebView</title>
    <style>
      * {
          -webkit-user-select: none;
      }
    </style>
    <script>
      window.addEventListener(
          'load',
          function() {
              var img = document.querySelector('img');
              var x0;
              var y0;
              var r0;
             img.addEventListener(
                  'touchstart',
                  function(event) {
                      event.preventDefault();
                      var t = event.touches[0];
                      x0 = t.pageX;
                      y0 = t.pageY;
                      r0 = event.target.getBoundingClientRect();
                  },
                  false);
             img.addEventListener(
                  'touchmove',
                  function(event) {
                      event.preventDefault();
                      var t = event.touches[0];
                      var x1 = t.pageX;
                      var y1 = t.pageY;
                      event.target.style.left = (r0.x + x1 - x0) + 'px';
                      event.target.style.top = (r0.y + y1 - y0) + 'px';
                  },
                  false);
             img.addEventListener(
                  'touchend',
                  function(event) {
                      event.preventDefault();
                  },
                  false);
          },
          false);
    </script>
  </head>
  <body>
    <img src="sample.jpg" style="position: absolute;" />
  </body>
</html>

[TunTin]

Awesome, thanks!

===== Gửi từ Gmail của Nguyễn Tùng Anh =====

Vào 11:01 CH, Th 5, 9 thg 9, 2021 Koji Nakamaru @.***> đã viết:

Here is a minimum sample.html which demonstrates how to drag an image.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gree/unity-webview/issues/694#issuecomment-916230992, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC2FY5H2N32WTTGSIBMQ2LDUBDK5NANCNFSM454NHIMA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[TunTin]

I think the black square is the Drag/Drop function available on WKWebView, when I hold down an img tag, it will immediately appear a black square with the same avatar as the img tag and when I move my finger, the black square will appear. scroll like the image below so I want to ask you if you have any way to disable Drag/Drop function on WKWebView? Thank you.

[KojiNakamaru]

Did you try the sample.html described in https://github.com/gree/unity-webview/issues/694#issuecomment-916230992 ? It shows no black square when you drag the image.

iOS WKWebView itself doesn't have any drag-specific function which displays such a black square. As noted before, it should be caused by your javascript, javascript libraries you utilize, and/or html/css.