Adding custom button on top of the webview
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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