Display web content in windows and implement browser features using WebKit.

Posts under WebKit tag

200 Posts
Sort by:

Post

Replies

Boosts

Views

Activity

Launching a browser in a kids app
I know how to set up a parental gate to keep a child user away from a web portal for parents or guardians. But is it even OK with Apple (or just in general) to open a browser from inside a kids app? I can think of two ways to do this: Launch a browser with UIApplication.shared.open(). This takes the user (presumably an adult) out of the app. Will Apple object to this? Use an in-app browser with WKWebView. (Wrapped in UIViewRepresentable because I'm using SwiftUI.) Option 2 has some problems with Google SSO, which is a requirement for me. Some details in stackoverflow 2016 and stackoverflow 2019 and gitHub. I can't figure out how to apply the solutions in those posts to the SwiftUI architecture or even the UIViewRepresentable.
1
0
285
Jun ’24
How to make a simple back button.
So I am trying to control the wkwebview content within my app. When I try the following code> var backButton: some View { Button(action: { webView.goBack() // Add your back button action here }, label: { Image(systemName: "arrow.uturn.backward") .font(.title) }) .navigationBarBackButtonHidden(true) } I get webView out of scope. This is how I have webView implimented struct WebView: UIViewRepresentable { let url: URL let preferences = WKPreferences() let useragent = WKWebViewConfiguration() func makeUIView(context: Context) -> WKWebView { @State var webView = WKWebView() let request = URLRequest(url: url) useragent.applicationNameForUserAgent = "Version/1.2 LavaRock/1.2" useragent.allowsAirPlayForMediaPlayback = true useragent.allowsInlineMediaPlayback = true useragent.allowsPictureInPictureMediaPlayback = true // preferences.isFraudulentWebsiteWarningEnabled = true preferences.isSiteSpecificQuirksModeEnabled = true preferences.isElementFullscreenEnabled = true webView.allowsBackForwardNavigationGestures = true // webView.configuration.allowsPictureInPictureMediaPlayback = true webView.customUserAgent = "Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Version/1.2 LavaRock/1.2" webView.load(request) return webView } func updateUIView(_ uiView: WKWebView, context: Context) { // Handle view updates if needed } } How should create the button?
0
0
248
Jun ’24
iOS18 WebView Crash
There is a 'WebCore::CachedResource::removeClient(WebCore::CachedResourceClient&)' crash in iOS 18 version. Could you please tell me if there are any changes to the WebView regarding this crash and how to debug it?
0
0
236
Jun ’24
Event callback issues with MediaSession API and iOS
Hi, I'm working on a web project that uses the MediaSession API to interface with the media notification on iOS. The issue that I'm experiencing occurs after pressing the play button in the media session modal where the session seems to NOT fire the event handler callback and also kill the media session itself. It's a strange behaviour considering that the pause callback works fine. audio_source = new Audio(url); navigator.mediasession.metadata = { ... // Metadata here }; navigator.mediasession.setActionHandler('play', (details) => { audio_source.play(); } ); navigator.mediasession.setActionHandler('pause', (details) => { audio_source.pause(); } );
0
0
192
Jun ’24
Pre-rendering WKWebView to avoid flashing
Has anyone attempted to render a WKWebView in a background or invisible UIView so that it’s visible immediately upon first presentation, and if so, what technique did you use? Background: We are trying to embed a WKWebView in our UI that renders seamlessly next to native UI. We are going to download a .ZIP file, unzip it locally to disk, and then point the WKWebView to that local file. However, when testing this solution on an iOS simulator (running iOS 17.5), we see a flash of white – specifically there is no content rendered for the first moment or two, followed by content appearing. We have tried attaching the WKWebView to the UIWindow, adding a javascript callback for the onReadyStateChange “loaded” event, and then only proceeding to present our UIViewController containing our WKWebView afterwards, but we still see a moment with no content being rendered at all. If we add a delay using DispatchQueue.asyncAfter of approximately one second (anything less still flashes), our content does seem to be correctly rendered in the background and immediately visible when the UIViewController gets presented. This is a problem that was originally asked nearly 11 years ago (https://stackoverflow.com/questions/15669809/how-to-prevent-initial-white-flash-when-showing-a-uiwebview); and the agreed upon solution there seems to be to set the background to be not opaque, but the issue remains that the content isn’t immediately visible. Google Gemini and ChatGPT have proposed a number of solutions, including hallucinations about headless WKWebView support on iOS, but unfortunately we are unable to achieve a solution without a DispatchQueue delay with a magic number.
0
0
228
Jun ’24
iOS 16, iOS 17, MacOS Sonoma, Safari 17.5, permissionStatus.onchange not working
navigator.permissions.query -> permissionStatus.onchange is Supposed to listen to the event of a change in permissions in the browser settings. This works for all browsers, but in Safari for iOS and MacOS this seems to be broken in the currently recent versions 17.x Example: navigator.permissions.query({ name: 'notifications' }).then((permissionStatus) => { permissions = permissionStatus.state; // this value gets set correctly permissionStatus.onchange = () => { // This will not get executed when permissions have been changed // within the safari settings app, or iOS Settings for PWA or Safari }; }); Can someone from Apple's Webkit Team please comment on this? Thank you. T.
1
1
302
Jun ’24
Cookies set by AJAX responses not accessible by JS when using WKWebView
Hi, we have really weird issue with one of our website embedded into iOS app using WKWebView. The website has CSRF mechanism implemented and is using some AJAX calls when user interact with it and in response some cookies are returned. Then the JS code wants to access these cookies to set proper value for next request header. Unfortunately when using document.cookie JS command these cookies are not there. However they are sent within another requests and I can see them from Safari Developer Inspector connected to my device or iOS Simulator. Another interesting thing is that the same website and solution works fine on Safari browser and with SFSafariViewController displayed inside our app. We've tried using various things for WKWebView configuration like nonPersistent data store, but without success. Does anyone have any idea how to deal with such issue and why it doesn't work with WKWebView?
0
2
225
Jun ’24
How to change geolocation settings on WKWebView
We're developing an application using location feature in WKWebView. When accessing a URL that uses location information from WebView, a dialog box saying " Would Like To Use Your Current Location - Don't Allow or OK". If "Dont allow" is selected multiple times, the dialog will disappear and the location setting for that URL will be fixed as "Don't Allow". In Safari, I can change that location settings for each URL, But Application's WebView does not have such settings UI. How do I clear or change the setting so that location information is no longer available? It seems that reinstalling the application will clear the WebView location settings.
0
0
234
Jun ’24
Enabling Picture-in-Picture (PiP) in WKWebView
I'm working on a web browser App that's distributed via the App Store. This app renders web pages using WKWebView. Our users are requesting a way for us to allow them to play videos in Picture in Picture. After some investigation, we noticed that in order to allow PiP videos in our browser in the sandboxed environment, we need to add the com.apple.PIPAgent entitlement under the com.apple.security.temporary-exception.mach-lookup.global-name option. We tried to submit our app with this entitlement, but unfortunately, we were rejected: Guideline 2.4.50) - Performance We've determined that one or more temporary entitlement exceptions requested for this app are not appropriate and will not be granted: com.apple.security.temporary-exception.mach-lookup.global-name com.apple.P|PAgent We would like to have access to this entitlement so we can offer PiP to our users. We already created a radar about this as well: FB13814428 Additionally, we have another radar (FB13557716) regarding allowing the usage of a private flag _allowsPictureInPictureMediaPlayback, which would also be required to enable us to use PiP. Is there any way in which we can currently enable PiP? Would opening a TSI help here?
2
12
448
Jun ’24
JavaScript Not Executing in WebView When Modally Presenting UIViewController on iOS 17.5.1
Issue Summary: I have encountered an issue where JavaScript does not execute in a WebView when another UIViewController is presented modally with modalPresentationStyle.fullScreen. This problem only occurs on physical devices running iOS 17.5.1. The issue is not present on iOS 17.5 simulators or devices running iOS 17.4.1 or earlier. Reproduction Steps: Create a ViewController with a WebView. Load a web page (e.g., https://apple.com) in the WebView. Present another ViewController modally with modalPresentationStyle.fullScreen. Verify that JavaScript execution in the initial WebView stops working. Test Code: import UIKit import WebKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // Set up the WebView let configuration = WKWebViewConfiguration() let webView = WKWebView(frame: view.frame, configuration: configuration) view.addSubview(webView) webView.frame = view.frame if #available(iOS 16.4, *) { webView.isInspectable = true } else { // Fallback on earlier versions } webView.load(URLRequest(url: URL(string: "https://apple.com")!)) } override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) let navigationController = UINavigationController(rootViewController: TargetViewController()) navigationController.modalPresentationStyle = .fullScreen present(navigationController, animated: true) } } class TargetViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // Set up the WebView let webView = WKWebView(frame: view.frame, configuration: WKWebViewConfiguration()) view.addSubview(webView) webView.frame = view.frame if #available(iOS 16.4, *) { webView.isInspectable = true } else { // Fallback on earlier versions } webView.load(URLRequest(url: URL(string: "https://apple.com")!)) } } Observations: The JavaScript within the WebView stops executing only on physical devices running iOS 17.5.1. This issue does not occur on the iOS 17.5 simulator. Devices running iOS 17.4.1 or earlier do not experience this issue. Request for Assistance: Could you please provide any insights or potential workarounds for this issue? Additionally, if this is a known bug, any information on upcoming fixes would be highly appreciated. Thank you.
2
0
474
Jun ’24
Adding in-app browser - browser never spawns in view.
Preamble: I am creating an iOS build of a Ren'Py game. My coding experience with Swift/ObjC is nearly nonexistent and I've primarily followed tutorials up to this point. Ren'Py uses an underlying framework to create an Xcode project. I do not have control over how this framework does things, but I can add files before actually compiling inside Xcode. I MUST use the pyobjus library to do so based on my current understanding, abilities, and frameworks. The included IAPHelper class processes in-app purchasing and it works great! The following function indicates, however, that there is a rootViewController that I need to attach to. - (void) showDialog { if (alert != nil) { return; } alert = [UIAlertController alertControllerWithTitle:self.dialogTitle message:nil preferredStyle:UIAlertControllerStyleAlert ]; UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleLarge]; // Adjust the indicator so it is up a few pixels from the bottom of the alert indicator.center = CGPointMake(alert.view.bounds.size.width / 2, alert.view.bounds.size.height - 50); [indicator startAnimating]; [alert.view addSubview: indicator]; #pragma clang diagnostic push #pragma clang diagnostic ignored "-Wdeprecated" [UIApplication.sharedApplication.keyWindow.rootViewController presentViewController:alert animated:YES completion:nil]; #pragma clang diagnostic pop } Problem: I am TRYING to implement an in-app browser for Patreon authentication purposes. The files I have put together are as follows: BrowserViewController.h // BrowserViewController.h #import <UIKit/UIKit.h> #import <WebKit/WebKit.h> @interface BrowserViewController : UIViewController - (void)loadURL:(NSString *)urlString; @end BrowserViewController.m // BrowserViewController.m #import "BrowserViewController.h" @interface BrowserViewController () @property (nonatomic, strong) WKWebView *webView; @end @implementation BrowserViewController - (void)viewDidLoad { [super viewDidLoad]; self.webView = [[WKWebView alloc] initWithFrame:self.view.frame]; [self.view addSubview:self.webView]; NSLog(@"viewDidLoad"); } - (void)loadURL:(NSString *)urlString { NSURL *url = [NSURL URLWithString:urlString]; NSURLRequest *request = [NSURLRequest requestWithURL:url]; [self.webView loadRequest:request]; NSLog(@"loadURL"); } @end OAuth2Strategy.py init python in auth: from urllib.parse import urlencode, urlparse, parse_qs from urllib.request import urlopen, Request import ssl import certifi from store import webserver, OpenURL import json class OAuth2Strategy(): def __init__(self, authorization_url, token_url, client_id, client_secret, callback_url, scope): self.authorization_url = authorization_url self.token_url = token_url self.client_id = client_id self.client_secret = client_secret self.callback_url = callback_url self.scope = scope self.on_success_callback = None self.on_fail_callback = None def run(self, on_success_callback = None, on_fail_callback = None): self.on_success_callback = on_success_callback self.on_fail_callback = on_fail_callback webserver.start(self) if renpy.renpy.ios: from pyobjus import autoclass, objc_str # Import the Objective-C class BrowserViewController = autoclass('BrowserViewController') # Create an instance of the BrowserViewController browser = BrowserViewController.alloc().init() # Load a URL url = self.make_authorize_url() browser.loadURL_(objc_str(url)) elif renpy.renpy.android: pass else: renpy.run(OpenURL(self.make_authorize_url())) def make_authorize_url(self): return self.authorization_url + "?client_id={client_id}&scope={scope}&redirect_uri={redirect_uri}&response_type=code".format( client_id=self.client_id, scope=self.scope, redirect_uri=self.redirect_uri, ) @property def redirect_uri(self): return "http://127.0.0.1:" + str(webserver.PORT) + self.callback_url def handle_auth(self, request): parsed_path = urlparse(request.path) query = parse_qs(parsed_path.query) code = query.get("code") if not code: request.send_response(400) request.send_header('Content-type', 'text/html') request.end_headers() request.wfile.write(b'Failed to authenticate. You can now close this window.') webserver.stop() if self.on_fail_callback: self.on_fail_callback() return code = code[0] tokens = self.get_tokens(code) request.send_response(200) request.send_header('Content-type', 'text/html') request.end_headers() request.wfile.write(b'Success! You can now close this window.') webserver.stop() if self.on_success_callback: self.on_success_callback(tokens) def get_tokens(self, code): ctx = ssl.create_default_context(purpose=ssl.Purpose.SERVER_AUTH, cafile=certifi.where()) data = urlencode({ "grant_type": "authorization_code", "code": code, "client_id": self.client_id, "client_secret": self.client_secret, "redirect_uri": self.redirect_uri, }).encode("utf-8") headers = {"Content-Type": "application/x-www-form-urlencoded"} req = Request(self.token_url, data=data, headers=headers, method="POST") response = urlopen(req, context=ctx) data = response.read().decode("utf-8") data = json.loads(data) return data If I use the default OpenURL function Safari opens as the full blown browser rather than in-app, hence why I am trying to override it. When I run my app and click the button that SHOULD spawn the browser, nothing happens. I can see that my URL is getting pushed to the function in the log along with Warning: -[BETextInput attributedMarkedText] is unimplemented and Failed to request allowed query parameters from WebPrivacy. though my admittedly light research indicates this isn't an issue. I have a feeling I'm not attaching my webView to the right hierarchy but I'm not sure exactly what I'm doing wrong.
1
0
312
May ’24
Safari History Delete ISSUE
My Safari Web Extension uses a service worker and an IndexedDB database (IDB). For what hidden reason or perverse logic when deleting the Safari history all service workers are brutally shutted down and the database emptied of all its contents? And I heard about local storage too... It happens all the time in Safari macOS and iOS. Safari is the only browser in the world that takes the liberty of deleting what it shouldn't. Good Job indeed.
1
0
411
Jun ’24
Safari DNR API timing issues
I created a Xcode project to test the DNR updateDynamicRules API performances on Safari (MacOS). https://github.com/radiolondra/TestUpdateDynamicRules Following the instructions in the README file, it's possible to test the extension on Chromium and Firefox browsers (on Windows). The project uses 2 json files containing static rules, enabled by default in the manifest file. These static rules are automatically installed in the browser when the extension is installed. Using the extension popup it is possible to add/remove just one very simple dynamic rule in the browser, a rule that acts on a predefined test domain (https://iana.org). What we want to measure is the time it takes for each browser to add/remove that one dynamic rule. The results for Safari are unacceptable to say the least: Safari: from 6000 to 8000 MILLISECONDS (6/8 seconds!) <<<<<<<<< Chrome: from 5 to 6 MILLISECONDS Firefox: from 5 to 7 MILLISECONDS Notice the time needed by Safari... It would be a good idea to take a look at this monstrosity. Thanks.
5
0
528
Jun ’24
iOS 17.5.1 Xcode WebKit Crash
iOS 17.5.1 Xcode WebKit Crash Hello, I have two iPhone devices that I have. These devices are iOS17.5.1, and all Wk related codes cause Crash. Crash occurs when Xcode Build is complete and the app is running. If you run without connecting to Xcode, Crash does not occur. Error: Thread 1: EXC_BREAKPOINT (code=1, subcode=0x19e88fa18) Xcode 15.4, MacBook Pro 14 Sonoma 14.5 There was no issue with iOS 16.5. WKWebsiteDataStore.default() .fetchDataRecords(ofTypes: WKWebsiteDataStore.allWebsiteDataTypes()) { records in records .forEach { WKWebsiteDataStore.default() .removeData(ofTypes: $0.dataTypes, for: [$0], completionHandler: {}) } } let webConfiguration = WKWebViewConfiguration()webConfiguration.preferences.javaScriptCanOpenWindowsAutomatically = true
0
0
572
May ’24
Webview localStorage gets cleared if navigate away from page on iOS
I'm experiencing an issue with WKWebView and localStorage. I've set up a standard WKWebView with the configuration: configuration.websiteDataStore = WKWebsiteDataStore.default() Everything works fine in the emulator (iOS 16.x, 17.0), but on my iPhone 13 running iOS 17.4, I encounter a problem. When I set a localStorage value on my local HTML page, navigate to another URL within the webview, and then return to the original page, the localStorage is cleared. This behavior is new and wasn't happening before. Has anyone else encountered this or have any suggestions on how to fix it? The localstorage should be persistent as it always has been.
1
0
493
May ’24
Facing live broadcast issue when open the camera feed for face verification in webview
Hi In my app I've to complete the IDV [Identity verification] by capturing the face os user and his/her documents, for this the backend developer provides me the URL from the IDV 3rd party, which URL I do open in webview, so before during loading the camera captureing screen in webview the Live Broadcast screen pops up from no where. I don't want this Live Broadcast screen but somehow it opens anyway. Although it is good thing that my expected camera screen was still open in background so I can go further from there. First time I'm also bit confused like how this kind of screen popsup even if I did't code for it. Also it takes me a little bit time to figure out how to close that screen. Simple peoples/users who're going to use my app they don't know how to close it. Please check the screenshots I attached. Please help me to rid of this popup. Thank You
0
0
442
May ’24
Can't establish mTLS on iOS with WKWebView and ProxyConfiguration
I have a sample iOS app in Xcode that I run in the iOS 17.5 Simulator. It creates a WKWebView and configures a proxy via the ProxyConfiguration API, it works as expected unless the proxy tries to establish mTLS. It seems there is no way to handle the client certificate request when using a proxy. If I navigate to a page that requests mTLS without a proxy configured, it works as expected. Here is a minimal repro: #import "ViewController.h" #import &lt;WebKit/WebKit.h&gt; @import Foundation; @import WebKit; @interface ViewController () &lt;WKNavigationDelegate&gt; @property (nonatomic,strong) WKWebView* webView; @property (nonatomic, strong) WKWebViewConfiguration * webConfig; @end @implementation ViewController - (void)loadView { [super loadView]; nw_protocol_options_t tls_options = nw_tls_create_options(); sec_protocol_options_t sec_options = nw_tls_copy_sec_protocol_options(tls_options); sec_protocol_options_set_challenge_block( sec_options, ^(sec_protocol_metadata_t metadata, sec_protocol_challenge_complete_t challenge_complete) { NSLog(@"Inside of challenge block"); challenge_complete(nil); }, dispatch_get_main_queue()); nw_endpoint_t proxy_endpoint = nw_endpoint_create_host(GetHost(), GetPort()); nw_relay_hop_t relay = nw_relay_hop_create(nil, proxy_endpoint, tls_options); nw_proxy_config_t proxy_config = nw_proxy_config_create_relay(relay, nil); nw_proxy_config_add_match_domain(proxy_config, "api.ipify.org"); self.webConfig = [[WKWebViewConfiguration alloc] init]; self.webConfig.websiteDataStore = [WKWebsiteDataStore nonPersistentDataStore]; self.webConfig.websiteDataStore.proxyConfigurations = @[ proxy_config ]; self.webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:self.webConfig]; self.webView.navigationDelegate = self; [self.view addSubview:self.webView]; } - (void)viewDidLoad { [super viewDidLoad]; NSLog(@"%s",__func__); NSURL* url = [[NSURL alloc] initWithString:@"https://api.ipify.org"]; NSURLRequest* request = [[NSURLRequest alloc] initWithURL:url]; [self.webView loadRequest:request]; } - (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation { NSLog(@"%s",__func__); } - (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error { NSLog(@"%s. Error %@",__func__,error); } - (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition, NSURLCredential *))completionHandler { NSLog(@"%s",__func__); NSLog(@"protection space: %@", challenge.protectionSpace.authenticationMethod); completionHandler(NSURLSessionAuthChallengePerformDefaultHandling, nil); } @end The logs for this code show: -[ViewController viewDidLoad] -[ViewController webView:didStartProvisionalNavigation:] -[ViewController webView:didFailProvisionalNavigation:withError:]. Error Error Domain=NSURLErrorDomain Code=-1206 "The server “api.ipify.org” requires a client certificate." If we don't set up the ProxyConfiguration and navigate to a site that requires mTLS, the logs look like this: -[ViewController viewDidLoad] -[ViewController webView:didReceiveAuthenticationChallenge:completionHandler:] protection space: NSURLAuthenticationMethodServerTrust -[ViewController webView:didReceiveAuthenticationChallenge:completionHandler:] protection space: NSURLAuthenticationMethodClientCertificate -[ViewController webView:didStartProvisionalNavigation:] //... Eventually the request fails but the key difference is that didReceiveAuthenticationChallenge was invoked. When using the ProxyConfiguration neither that function nor the block we set via sec_protocol_options_set_challenge_block were run. I also tried to provide the client identity via sec_protocol_options_set_local_identity to no avail, and I've tried configuring these options too but they had no effect sec_protocol_options_add_tls_application_protocol(sec_options, "h2"); sec_protocol_options_set_max_tls_protocol_version(sec_options, tls_protocol_version_TLSv13); sec_protocol_options_set_peer_authentication_required(sec_options, true); Am I missing something? Or is this a bug in the ProxyConfiguration API?
0
1
408
May ’24
Privacy Manifest Non Tracking Within Webview
We are requesting some information on what should be done in the following case: We have an application that has a privacy manifest, where tracking domains are listed. When the user does not give his/her consent to be tracked, non tracking domains are being used for requests to bring ads. The application in question has a webview where content (ads) are loaded. When a user clicks on an ad, another webview is opened, and this webview does not know that it is in a non tracking flow. Therefore, tracking domains are being used instead of non tracking domains. Since multiple redirections might be in play, there is no way to pass data from the original webview to the one that is opened once the ad is clicked. Would the tracking domains being used in the second webview be blocked? If so, what can we do to circumvent this scenario? Is this even a use case considering privacy manifest? Thanks
0
0
335
May ’24
iOS17.4.1 canvasをクリアしても特定の操作で描画が復活します
【現象】 Safariブラウザでcanvasに対して任意の描画をした後、clearRect()を実行します。 その後、canvasの親divに対して visibility: hidden を設定すると、消したはずの描画が復活します。 但し、親divは正常に visibility: hidden が働いているので描画されなくなります。 また、この現象はブラウザの拡大率が影響をしているようです。 少なくとも後述のリスト内のMacbookAirでは、拡大率が100%の場合にのみ発生しています。 この現象は過去のバージョンでは起きてないようです。 このバグを修正する予定はありますか? 【機種】 機種は以下のリストを確認してください。 Model OS&Version Y/N version MacbookAir M2 2022 macOS Sonoma 14.4.1 y 17.4.1 Mac Studio 2022 Apple M1 Max macOS Monterey 12.5 n 16.0 MacBook Air M1 2020 macOS Sonoma 14.3.1 n 17.3.1 iPadPro gen6 iPadOS 17.4.1 y - iPad gen10 iPadOS 17.4.1 n - 【デモ】 現象を確認するためのデモは以下のHTMLファイルを保存してブラウザで開いてください。 再現手順はボタンを draw -> clear -> hide の順番に押してください。 黄色の親divが非表示になるのに対し、canvasからclearしたはずの黒い四角が表示されます。 <html> <body onload="onLoad()"> <div id="parent" style="background-color: yellow;"> <canvas id="canvas"></canvas> </div> <button onclick="drawCanvas()">draw</button> <button onclick="clearCanvas()">clear</button> <button onclick="showCanvas()">show</button> <button onclick="hideCanvas()">hide</button> <script> let parent let canvas let context2d function onLoad() { parent = document.getElementById("parent") canvas = document.getElementById("canvas") context2d = canvas.getContext('2d') } function drawCanvas() { context2d.fillRect(0, 0, 100, 100) } function clearCanvas() { context2d.clearRect(0, 0, canvas.width, canvas.height) } function showCanvas() { parent.style.visibility = "visible" } function hideCanvas() { parent.style.visibility = "hidden" } </script> </body> </html>
1
0
370
May ’24