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

[TunTin]

I tried on Your Sample Project and when I Run the Sample.html file on Safari, I tap and hold on the img tag (src = SVG file) the thing in the red circled area like the image below appears and I think when running on iOS it it's Black Square but when I run it on iOS, img tag can't load SVG file like when I open Sample.html file on Safari, Can you tell me where am I missing, I don't edit much Sample Project Yours except disabling wkAllowsLinkPreview on WKWebView and Selectable on HTML like what We discussed above.

[TunTin]

On iOS it looks like this:

[KojiNakamaru]

Please try the sample app as is except sample/Assets/StreamingAssets/sample.html which should be replaced with the one described in https://github.com/gree/unity-webview/issues/694#issuecomment-916230992 .

[TunTin]

When I comment Your Drag/Drop code and long press on img the default Drag/Drop function on WKWebView will be activated like the picture You see below, so can you help me to bypass the Drag/Drop function default on WKWebView? Thank you.

[KojiNakamaru]

It happens only on PC and is not related to WKWebView on iOS. You can also find various information on the net, such as https://stackoverflow.com/questions/704564/disable-drag-and-drop-on-html-elements .

[TunTin]

I used event.preventDefault() in touchstart() event and it worked, thanks for your quick support.

[TunTin]

Thanks, I'll check it out.

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

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

It happens only on PC and is not related to WKWebView on iOS. You can also find various information on the net, such as https://stackoverflow.com/questions/704564/disable-drag-and-drop-on-html-elements .

— 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-920624174, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC2FY5G6GJKGHAVMRBUJ3WDUCGHFVANCNFSM454NHIMA . 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 need to hide horizontal and vertical scrollbar on WebView, in both Android and iOS platforms, Can you give me a solution? Thank you.

[KojiNakamaru]

As there was no convenient way for hiding scrollbars, I added SetScrollbarsVisibility(bool visibility) in #750 and updated binaries. Could you please try the latest?

[TunTin]

Will do, thanks!

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

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

As there was no convenient way for hiding scrollbars, I added SetScrollbarsVisibility(bool visibility) in #750 https://github.com/gree/unity-webview/pull/750 and updated binaries. Could you please try the latest?

— 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-962477052, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC2FY5E4QA3QSFLAQT64JO3UKVK5NANCNFSM454NHIMA . 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 above solution works great, thanks. Now I have another problem that I need your help with, I need to disable scrolling on WebView, is there any way to solve it?

[KojiNakamaru]

Adding the following should prevent scrolling.

      body {
          overflow: hidden;
          position: fixed;
          width: 100%;
      }

The following is a complete demo based on https://github.com/gree/unity-webview/issues/694#issuecomment-916230992 .

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Unity WebView</title>
    <style>
      * {
          -webkit-user-select: none;
      }
      body {
          overflow: hidden;
          position: fixed;
          width: 100%;
      }
    </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]

I have 1 problem asked you a long time ago and You told me there is no way to solve it, that is I want to display a scene on top of WebView but I can't because WebView is always on top but when I use Input Field on Unity and check off the [Hide Mobile Input] property, when I focus on it, the keyboard will appear as shown below with [Mobile Input] the part I circled in red and I understand that it is a UI created by Unity and it is showing above the WebView, do you know how to make [Mobile Input] do that?

[KojiNakamaru]

As described in https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/script-InputField.html,

|Hide Mobile Input (iOS only) ||Hides the native input field attached to the onscreen keyboard on mobile devices. Note that this only works on iOS devices.| | | | |

It is the native input field attached to the onscreen keyboard. It is not directly displayed by uGUI.

[TunTin]

But the photo above I took on an Android device?

[KojiNakamaru]

Turning "Hide Mobile Input" on is only allowed for iOS. The state of "Hide Mobile Input" turned off is default for both platforms and you said you turned it off.

[TunTin]

Turn on Hide Mobile Input on Android device:

[KojiNakamaru]

Okay, although its behavior differs from the description on the manual and recently it might also be supported for Android. But then, what is your question? The part you circled in red is the native input field attached to the onscreen keyboard. This point doesn't change.

[TunTin]

My problem is still I can't display anything on WebView (eg Scene, UI Element: Panel, Button, ...) and I see [Mobile Input] display on WebView so I want to ask Do you know how [Mobile Input] can do that?

[KojiNakamaru]

This is done by OS's software keyboard function, so it is called "native" input field. As the software keyboard is over webview, the native input field, which is the part of the software keyboard, is also over webview. It is not rendered by Unity.

[TunTin]

I found your article [https://github.com/gree/unity-webview/issues/587] and I thought it would solve my problem, but when I check on [Render Over Native UI] in [Player Setting] the WebView can't be displayed anymore? Can you help me to solve this issue?

[KojiNakamaru]

As noted in https://github.com/gree/unity-webview/pull/584, a user cannot interact with webview. It is basically useless.

[TunTin]

Can you help me Screen Shot WebView? Using Unity's Screen Shot function can't Screen Shot WebView?

[KojiNakamaru]

Unity's ScreenCapture.CaptureScreenshot() captures only unity's rendering view. In Asset Store, there might be an asset that allows to capture the whole screen.