gree / gree/unity-webview

Adding custom button on top of the webview

Open
#1,087 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Objective-C++
Stars
2.7k
Forks
734
Avg merge
11h 39m
Merged PRs (30d)
1

Description

Hi, I tried to add close button on top of the webview. As I cannot use unity UI canvas objects on top of the webview, I tried editing js code this way:

var buttonSize = 0.417f;
_webViewObject.EvaluateJS($@"
(function() {{
var button = document.createElement('button');
button.style.position = 'fixed';
button.style.left = '{buttonSize / 2f}in';
button.style.top = '{8}px';
button.style.zIndex = 2147483647;
button.style.width = '{buttonSize}in';
button.style.height = '{buttonSize}in';
button.style.backgroundColor = 'transparent';
button.style.color = '#413e3e';
button.style.border = 'none';
button.style.borderRadius = '50%';
button.style.fontSize = '24px';
button.style.cursor = 'pointer';
button.style.display = 'flex';
button.style.alignItems = 'center';
button.style.justifyContent = 'center';
button.style.textAlign = 'center';

  var img = document.createElement('img');
  img.src = 'https://fonts.gstatic.com/s/i/materialiconsoutlined/close/v1/24px.svg';
  img.style.filter = 'invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%)';
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.objectFit = 'cover';
  img.style.borderRadius = '50%';
  img.style.backgroundColor = 'transparent';
  img.style.color = '#413e3e';
  button.appendChild(img);

  button.onclick = function() {{
    {onClickFunction};
  }};
  document.body.appendChild(button);
}})()");

This function is called when the webview is loaded(ld). In Android it works fine, I see the close button with the correct icon. But in IOS devices, the close button does not even show. So what can affect to it in IOS devices? And maybe there are better ways to add custom button on top of the webview?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the EvaluateJS snippet in the issue and the ld webview-loaded callback, then compare the documented Unity WebView behavior on Android and iOS. Done means identifying why the injected button is absent on iOS and documenting or implementing a supported way to place a close button above the webview.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, javascript, unity
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.