Explore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.

All subtopics
Posts under Safari & Web topic

Post

Replies

Boosts

Views

Activity

browser.runtime.onMessage in content script intermittently fails on iOS 18.5 (Safari Web Extensions)
Hi everyone, I’m encountering a critical reliability issue with message passing in my Safari Web Extension on iOS 18.4.1 and iOS 18.5. In my extension, I’m using the standard messaging API. The background script sends a message to the content script using browser.tabs.sendMessage(...), and the content script registers a listener via: browser.runtime.onMessage.addListener(handler); This setup has been working reliably in all prior versions of iOS. However, after updating to iOS 18.4.1 and 18.5, I’ve noticed the following behavior: ✅ The content script is successfully injected, and onMessage.addListener is registered (I see logging confirming this). ✅ The background script sends the message using the correct tabId (also confirmed via logs). ❌ The content script’s onMessage listener is not consistently triggered. ⚠️ This issue is intermittent, sometimes the message is received, sometimes it is silently dropped. ❌ No exceptions or errors are thrown in either script, the message appears to be sent, but not picked up from the content script message listener.
3
3
234
Jul ’25
IOS 26, web extensions no longer available
I recently upgraded my device from IOS 18.4 to IOS 26. My web extension has disapeared from safari. I can see it in Settings > Apps > Safari > Extensions and when I turn it on and re-open safari. I just get a mesasge that says "{extension name} is no longer avaiable". I have tried Manifest V2 and Manifest V3 both yield the same results. The current production extension bundled with the IOS app has the same problem. I can no longer use or test my own extension !? Help please !
3
1
498
Jul ’25
Request for Native AJAX API Request Interception Support in WKWebView
Hello WebKit Team, I’m writing to ask if iOS provides a native way to intercept AJAX (XMLHttpRequest or fetch) calls inside WKWebView. On Android, this is handled via: shouldInterceptRequest(WebView view, WebResourceRequest request) but iOS currently seems to have no equivalent. We’ve tried: WKURLSchemeHandler → works only for custom schemes URLProtocol with WKProcessPool → unreliable for AJAX in WebView JavaScript injection → partial and unofficial Could you please clarify: Is there a recommended native approach to intercept AJAX requests? If not supported, is it planned for future releases? Any official workaround or guidance? This is critical for debugging, analytics, and compliance in hybrid apps.
3
0
930
2w
How do I add a UI to a Safari Web Extension?
I have a Safari Web Extension that successfully receives a message from a webpage and returns a response. I now want to add a user interface to the Safari Web Extension. How do I do this? I have modified the default template code as follow to add an NSAlert for testing. The modal runs, but no alert ever appears, and the code remains stuck at runModal. What is the correct way to add a UI to a webextension? - (void)beginRequestWithExtensionContext:(NSExtensionContext *)context {     id message = [context.inputItems.firstObject userInfo][SFExtensionMessageKey];     NSLog(@"Received message from browser.runtime.sendNativeMessage: %@", message);     NSAlert* alert = [[NSAlert alloc]init];     [alert setMessageText:message[@"request"]];     [alert setInformativeText:@"Hello"];     [alert runModal];     NSExtensionItem *response = [[NSExtensionItem alloc] init];     response.userInfo = @{ SFExtensionMessageKey: @{ @"id": message[@"id"], @"uuid": message[@"uuid"], @"contentType": message[@"contentType"], @"response": message[@"request"] } };     [context completeRequestReturningItems:@[ response ] completionHandler:nil]; } @end
3
0
1.2k
Mar ’25
Detecting Navigation Redirect Chains
I'm building a macOS extension that needs to track multi-step navigation chains (A → B → C) to adjust behavior based on where users came from. Current approach: Using webNavigation.onBeforeNavigate to detect intermediate steps, but experiencing issues in Safari that don't occur on Chrome/Firefox/Edge. Questions: Is webNavigation the right API for tracking redirect chains in Safari? Does ITP/Private Browsing affect event delivery? Any alternative approaches recommended? (Safari version 26.0.1) Any guidance appreciated!
3
0
671
3w
Opening native app from a web extension
Is it possible to open the native app from a web extension? I have tried creating a new tab that uses the app's URL scheme but the UI asking the user to open the app is not shown until the new page UI is dismissed. Creating a tab with an HTTPS URL that the app is setup to handle does not work and always the link in a new tab. I tried sending a message to the app extension and using NSExtensionContext.open(_:completionHandler:) but the URL is not opened and the closure received false, indicating it was not handled. Having the option to link back to the native app would be very useful.
3
0
1.8k
Mar ’25
WKBrowsingContextController is invalid
Is this code invalid on a phone running xcode16 iOS18? Class cls = NSClassFromString(@"WKBrowsingContextController"); SEL sel = NSSelectorFromString(@"registerSchemeForCustomProtocol:"); if ([(id)cls respondsToSelector:sel]) { [(id)cls performSelector:sel withObject:@"http"]; [(id)cls performSelector:sel withObject:@"https"]; } }
Topic: Safari & Web SubTopic: General
3
0
138
Jun ’25
WKNavigationActionPolicy of "cancel" prints stack trace to console
Starting in iOS 26 (tested on 26.1), when I use any of the “policy” methods of WKNavigationDelegate to return an action policy of cancel I get a trace like this printed to console: 1 0x18de71bbc WebKit::WebFramePolicyListenerProxy::ignore(WebKit::WasNavigationIntercepted) 2 0x18db3dd50 WebKit::NavigationState::NavigationClient::decidePolicyForNavigationAction(WebKit::WebPageProxy&, WTF::Ref<API::NavigationAction, WTF::RawPtrTraits<API::NavigationAction>, WTF::DefaultRefDerefTraits<API::NavigationAction>>&&, WTF::Ref<WebKit::WebFramePolicyListenerProxy, WTF::RawPtrTraits<WebKit::WebFramePolicyListenerProxy>, WTF::DefaultRefDerefTraits<WebKit::WebFramePolicyListenerProxy>>&&)::$_0::operator()(WKNavigationActionPolicy, WKWebpagePreferences*) 3 0x100189e5c $sSo24WKNavigationActionPolicyVIeyBhy_ABIeghy_TR 4 0x100189d38 $s16WebkitPolicyTrap14ViewControllerC03webD0_06decideB3For15decisionHandlerySo05WKWebD0C_So18WKNavigationActionCySo0lmB0VctF 5 0x100189df4 $s16WebkitPolicyTrap14ViewControllerC03webD0_06decideB3For15decisionHandlerySo05WKWebD0C_So18WKNavigationActionCySo0lmB0VctFTo 6 0x18db255c0 WebKit::NavigationState::NavigationClient::decidePolicyForNavigationAction(WebKit::WebPageProxy&, WTF::Ref<API::NavigationAction, WTF::RawPtrTraits<API::NavigationAction>, WTF::DefaultRefDerefTraits<API::NavigationAction>>&&, WTF::Ref<WebKit::WebFramePolicyListenerProxy, WTF::RawPtrTraits<WebKit::WebFramePolicyListenerProxy>, WTF::DefaultRefDerefTraits<WebKit::WebFramePolicyListenerProxy>>&&) 7 0x18dea9848 WebKit::WebPageProxy::decidePolicyForNavigationAction(WTF::Ref<WebKit::WebProcessProxy, WTF::RawPtrTraits<WebKit::WebProcessProxy>, WTF::DefaultRefDerefTraits<WebKit::WebProcessProxy>>&&, WebKit::WebFrameProxy&, WebKit::NavigationActionData&&, WTF::CompletionHandler<void (WebKit::PolicyDecision&&)>&&) 8 0x18dea7a34 WebKit::WebPageProxy::decidePolicyForNavigationActionAsync(IPC::Connection&, WebKit::NavigationActionData&&, WTF::CompletionHandler<void (WebKit::PolicyDecision&&)>&&) 9 0x18d9cbbf4 void IPC::handleMessageAsync<Messages::WebPageProxy::DecidePolicyForNavigationActionAsync, IPC::Connection, WebKit::WebPageProxy, WebKit::WebPageProxy, void (IPC::Connection&, WebKit::NavigationActionData&&, WTF::CompletionHandler<void (WebKit::PolicyDecision&&)>&&)>(IPC::Connection&, IPC::Decoder&, WebKit::WebPageProxy*, void (WebKit::WebPageProxy::*)(IPC::Connection&, WebKit::NavigationActionData&&, WTF::CompletionHandler<void (WebKit::PolicyDecision&&)>&&)) 10 0x18d9c7728 WebKit::WebPageProxy::didReceiveMessage(IPC::Connection&, IPC::Decoder&) 11 0x18e49a0d8 IPC::MessageReceiverMap::dispatchMessage(IPC::Connection&, IPC::Decoder&) 12 0x18df1908c WebKit::WebProcessProxy::dispatchMessage(IPC::Connection&, IPC::Decoder&) 13 0x18d9dfc28 WebKit::WebProcessProxy::didReceiveMessage(IPC::Connection&, IPC::Decoder&) 14 0x18e47f72c IPC::Connection::dispatchMessage(WTF::UniqueRef<IPC::Decoder>) 15 0x18e47fac4 IPC::Connection::dispatchIncomingMessages() 16 0x199ad3758 WTF::RunLoop::performWork() 17 0x199ad4eb0 WTF::RunLoop::performWork(void*) 18 0x1804563a4 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ 19 0x1804562ec __CFRunLoopDoSource0 20 0x180455a78 __CFRunLoopDoSources0 21 0x180454c4c __CFRunLoopRun 22 0x18044fcec _CFRunLoopRunSpecificWithOptions 23 0x1926be9bc GSEventRunModal 24 0x18630f0d8 -[UIApplication _run] 25 0x186313300 UIApplicationMain 26 0x18554ac38 block_destroy_helper.15 27 0x10018a70c $sSo21UIApplicationDelegateP5UIKitE4mainyyFZ 28 0x10018a67c $s16WebkitPolicyTrap11AppDelegateC5$mainyyFZ 29 0x10018a818 __debug_main_executable_dylib_entry_point 30 0x1000cd3d0 29 dyld 0x00000001000cd3d0 start_sim + 20 31 0x1002bab98 30 ??? 0x00000001002bab98 0x0 + 4297829272 This doesn’t happen in 18.6. Also, it doesn’t seem to have any negative consequences other than the console spam? But then, the navigation is being cancelled anyway, so maybe it’s trapping and just happens to have the effect of not loading the request? Anyway, I guess I can’t upload zips. But it’s pretty easy to reproduce. Just assign a WKWebView a navigationDelegate with an implementation like: func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping @MainActor (WKNavigationActionPolicy) -> Void) { decisionHandler(.cancel) } and then have it .load() anything. Have I been doing this wrong and 26 exposes it? Or is this a bug in 26? If the latter, any downstream consequences I should be looking out for? macOS 15.7.1 (24G231) Xcode 26.1.1 (17B100) iOS 26.1 (23B86)
Topic: Safari & Web SubTopic: General Tags:
3
0
1k
2w
Safari cannot open the page. Error: Failed to navigate to an HTTP URL with HTTPS-only mode enabled.
I am currently operating an app using an embedded web server that communicates over local HTTP. Recently, when opening Safari, I started encountering the following error message: "Safari cannot open the page. Error: Failed to navigate to an HTTP URL with HTTPS-only mode enabled." However, I am currently in a situation where switching to HTTPS is difficult. Are there any solutions to resolve this issue besides using HTTPS? Thank you.🙏
3
0
1.2k
Feb ’25
JavascriptCore crashes with pas_reallocation_did_fail
Hi, My app is using JavascriptCore to run the business logic in a javascript environment. We are randomly seeing crashes when users move the app back to the foreground. These crashes are reported by Firebase (I am attaching an example). I also tried to find them in Organizer, but the stacktraces don't match and I am not sure if they are pointing to the same error (I attach one just in case). I was trying to investigate a little bit about this, but I could find any explanation about what pas_reallocation_did_fail would mean. Here is our implementation: -(void) enqueueCallback:(JSValue *)callback withArguments:(NSArray *)args exclusive:(BOOL)exclusive { [self enqueueBlock:^{ @autoreleasepool { [callback callWithArguments:args]; } } exclusive:exclusive]; } Basically, every JS block is enqueued and then run by a dedicated thread specific to our JSContext. Can I get some help? Thanks in advance! Crashlytics.txt 2024-08-30_10-00-01.2572_-0400-f757f8306eda9679ec1b2ff90fbc66c4eb1fbee7.crash
3
0
534
Jul ’25
WKWebView requires authentication
I use WKWebView to display a webpage that requires authentication through an authentication provider. This works as expected, but when I close and reopen the app, I have to reauthenticate. However, if I open the same page in Safari, I only have to authenticate once. If I close Safari and reopen it, the page displays without prompting me to authenticate again. I see some cookies stored in httpCookieStore, so I assume that storing cookies works. Does anyone have an idea why authentication is not persistent between app launches? Thanks in advance. Best regards, Marc
Topic: Safari & Web SubTopic: General Tags:
3
0
149
Jul ’25
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?
Topic: Safari & Web SubTopic: General Tags:
3
12
1k
Jul ’25
Adoption of New MV3 Standards for Browser Extensions
As with the adoption of MV3 standards among all major browser vendors that allow browser extensions at the client-side, I understand that this is the same with Safari as well, as mentioned here (https://www.wwdcnotes.com/notes/wwdc22/10099/). However, as with Firefox, browsers may choose to adopt them incompletely and with few changes. I had a few questions regarding how Safari views this transition and what would be the next steps from here. Thus, it would be really great if the browser team could provide your insights on any or all of the following points: Would Safari adopt the exact standards proposed by the Chromium ecosystem such as with functionalities like header-based modifications in the coming days.  What would be the general timeline be for this in general?  Does this also translate to the fact that existing standards with MV2 standards would not be allowed to operate any further, as with the timeline with Chromium? Regards
3
2
1.9k
May ’25
What makes Safari render an active extension's icon in color in the toolbar?
Sometimes Safari is rendering the icon for an active extension in its original provided colored representation, other times Safari is applying an overlay color in line with the system's highlight color. This difference can even be seen seen on the Safari Extensions Developer home page: https://developer.apple.com/safari/extensions/images/extensions-hero-large_2x.png You will notice that Grammarly's icon is shown in it's original color format, while the others aren't. Example of extensions where the icon is shown in color: Bitwarden Grammarly 1Password Consent-O-Matic I've compared the source code of Bitwarden and Consent-o-Matic with my own extension and cannot find any differences in the settings or image properties (resolution, DPI, file type, color profile). If I take the exact PNG source files from said open source extensions and replace them in my own source code, these icons show up in full color. Does this perhaps mean there is a bug in Safari's processing of the icons where it fails to overlay the icon with the highlight color in some cases? I and I assume many developers with me would like to understand what determines this difference. Ideally, there is a consistent UX where the end user has the choice between icons in color or highlight color overlay.
3
0
1.2k
Mar ’25
Web Extension : browser.cookies.getAll() does not work
After upgrading to Safari version 18, we encountered an issue with my extension’s background script not being able to access cookies. Previously, in Safari versions 17 and below, the extension worked as expected. Now, when the extension tries to retrieve cookies using browser.cookies.getAll(), it returns an empty list. However, if we open the extension’s developer tools, the cookies are visible and accessible. It seems that Safari only provides cookie data after the developer tools have been opened. However, after relaunching Safari and launching the extension without opening the developer tools, browser.cookies.getAll() still returns an empty list. Has anyone else experienced this? STEPS TO REPRODUCE Download this minimal app : https://www.icloud.com/iclouddrive/0bajlhnuQaG6T5NsFKXEB0U9Q#test%5Fcookies Compile test_mv2 extension (in test_cookies.getAll.zip). Launch test_mv2.app and activate extension. Click on the extension's button (browserAction). Open the developer tools. Observe an empty list of cookies. Click on the extension's button (browserAction). Cookies are retrieved as expected.
3
2
745
Mar ’25
Safe areas ignored after navigating a WebView/WebPage back in a NavigationStack
I'm using the new iOS 26 WebPage/WebView for SwiftUI in a NavigationStack. The initial load works as expected, but when loading items from the back/forward lists, the content jumps beneath the navigation bar: struct WebPageTestView: View { var webPage = WebPage() var body: some View { NavigationStack { WebView(webPage) .toolbar { Button("Back") { if let backItem = webPage.backForwardList.backList.last { webPage.load(backItem) } } Button("Forward") { if let forwardItem = webPage.backForwardList.forwardList.first { webPage.load(forwardItem) } } } } .task { webPage.isInspectable = true webPage.load(URL(string: "https://domchristie.co.uk/")) } } } I have run this on the iOS 26.0 and 26.1 Simulators and get the same issue. The demo website does not use any JavaScript. I was able to replicate this behaviour using a wrapped WKWebView and calling the .ignoresSafeArea(.all) modifier.
3
1
509
Oct ’25
Tab onDetached and Tab onAttached web extension events are no longer generated in macOS 15.4 / Safari 18.4
Hello - we have a Mac application that uses a browser extension and the web extension JS APIs to communicate with Safari. As of macOS 15.4 / Safari 18.4 the tab OnAttached and tab onDetached events are no longer received. After some testing we verified that the events were working properly as of macOS 15.3 / Safari 18.3 but appear to have been broken in macOS 15.4. Note a similar issue was reported previously for Safari 17.6 and was fixed in macOS 15.0 (FB14324177). We have made a TestFlight version of our app (Tabby) available to simplify debugging via https://testflight.apple.com/join/Va8Zdv9d. To reproduce the issue: Install the Tabby TestFlight build on macOS 15.4 or 15.4.1 Open Safari, go to Safari settings and select the Extensions tab Enable the Tabby extension and grant permissions to all windows all the time Open a Safari window with at least 3 tabs Note the open window and tabs displayed in Tabby In Safari, perform a tab detach by dragging a tab out of the window Expected behavior Within Safari the detached tab should now be in it’s own window, and via the onDetached event Tabby should update to show the tab in it’s own window AND removed from the original window. Observed Safari fails to send the onDetached event and Tabby will continue to display the detached tab in its original window in addition to the new window. You can also use the repro steps above to observe the onDetached event being received or not by Tabby in the Safari developer console. The same steps but re-attaching the tab to the original window can be used to observe the onAttached event being received or not. We’ve attached two screen recordings to the Feedback ID below, one showing the events working on macOS 15.3, and one showing the events failing to be received on macOS 15.4.1. Note it also fails on macOS 15.4. FEEDBACK ID: FB17367977
3
0
137
May ’25
Unable to Launch Safari Driver
I am encountering an issue where we are unable to run or launch Safari Driver in our automation tests using macOS. When attempting to run safaridriver -p 8888 from the terminal, we receive the following error message: ERROR: safaridriver could not launch because it is not configured correctly or you need to authenticate. Re-run safaridriver(1) and pass the '--enable' flag to configure and/or authenticate. For more information, consult the safaridriver(1) man page. Despite running sudo safaridriver --enable as an administrator (even as root), the issue persists. I’ve searched through various online forums and GitHub repositories but couldn’t find a working solution. Some references are: Apple Developer Forum Thread: https://forums.developer.apple.com/forums/thread/762321 GitHub Issue: https://github.com/SeleniumHQ/selenium/issues/11381
Topic: Safari & Web SubTopic: General Tags:
3
0
532
Mar ’25
@@extension_id replacement in CSS file fails in Sequoia, Safari 18
Typically, you can use the @@extension_id special string to reference the absolute path into the bundled resources of an extension, such as an image or a custom font, in a CSS file. However, this broke with Safari 18. Consider this section in a popup.css file: .card-icon { height: 16px; width: 20px; background-image: url(safari-web-extension://__MSG_@@extension_id__/images/card.svg); background-size: 20px 16px; } In Safari 17.4, once loaded in the browser, @@extension_id is replaced with E8BEA491-9B80-45DB-8B20-3E586473BD47, and the background-image reads as so: background-image: url(safari-web-extension://E8BEA491-9B80-45DB-8B20-3E586473BD47/images/card.svg); But as of Safari 18, the @@extension_id just collapses to an empty string, and the background-image reads as so: background-image: url(safari-web-extension:///images/card.svg); and the svg fails to load with the following error: "Failed to load resource: You do not have permission to access the requested resource." This is a regression, does to match the behavior of the other major browsers, and should be fixed. Filed with Feedback ID: FB15104807
3
1
820
Apr ’25
header and footer positions shifted in Safari tab settings
Thank you for supporting me. My environment Device: iPhone 15 Pro OS: iOS 26.0 Public Beta (23A5336a) In iOS 26, three types of tabs were added to Safari. Depending on the option, the behavior of the fixed header and footer can be unstable. *Tab settings can be changed in the iOS Settings app under "Apps -> Safari" > "Tabs." The following behavior differs depending on the tab. Compact When scrolling down, the header and footer shift up by a few pixels. A margin is created between the footer and the URL input field. Bottom Behaves the same as "Compact." Top The header is completely hidden below the URL input field at the top of the screen, leaving a margin below the footer. Below is the sample code to check the operation. <!doctype html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>固定ヘッダー/フッター + モーダル</title> <style> :root { --header-h: 56px; --footer-h: 56px; } body { margin: 0; font-family: sans-serif; line-height: 1.6; background: #f9fafb; padding-top: var(--header-h); padding-bottom: var(--footer-h); } header .inner, footer .inner { width: 100%; max-width: var(--max-content-w); padding: 0 16px; display: flex; align-items: center; justify-content: space-between; } header, footer { position: fixed; left: 0; right: 0; display: flex; align-items: center; justify-content: center; z-index: 100; background: #fff; } header { top: 0; height: var(--header-h); border-bottom: 1px solid #ddd; } footer { bottom: 0; height: var(--footer-h); border-top: 1px solid #ddd; } main { padding: 16px; } .btn { padding: 8px 16px; border: 1px solid #2563eb; background: #2563eb; color: #fff; border-radius: 6px; cursor: pointer; } /* モーダル関連 */ .modal { position: fixed; inset: 0; display: none; z-index: 1000; } .modal.is-open { display: block; } .modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); } .modal__panel { position: relative; max-width: 600px; margin: 10% auto; background: #fff; border-radius: 8px; padding: 20px; z-index: 1; } .modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .modal__title { margin: 0; font-size: 18px; font-weight: bold; } .modal__close { background: none; border: none; font-size: 20px; cursor: pointer; } </style> </head> <body> <header> <div class="inner"> <h1>デモページ</h1> <button id="openModal" class="btn">モーダルを開く</button> </div> </header> <main class="container" id="main"> <h2>スクロール用の適当なコンテンツ1</h2> <p>ヘッダーとフッターは常に表示されます。モーダルボタンを押すと、画面いっぱいのダイアログが開きます。</p> <!-- ダミーカードを複数 --> <section class="grid"> <div class="card"><strong>カード1</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード2</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード3</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード4</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード5</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード6</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード7</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード8</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード9</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード10</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> </section> </main> <footer> <small>&copy; 2025 Demo</small> </footer> <!-- モーダル --> <div class="modal" id="modal"> <div class="modal__backdrop"></div> <div class="modal__panel"> <div class="modal__head"> <h2 class="modal__title">モーダル</h2> <button class="modal__close" id="closeModal">&times;</button> </div> <p>これは白いビューのモーダルです。背景は黒く半透明で覆われています。</p> </div> </div> <script> const modal = document.getElementById('modal'); const openBtn = document.getElementById('openModal'); const closeBtn = document.getElementById('closeModal'); const backdrop = modal.querySelector('.modal__backdrop'); openBtn.addEventListener('click', () => { modal.classList.add('is-open'); }); function closeModal() { modal.classList.remove('is-open'); } closeBtn.addEventListener('click', closeModal); backdrop.addEventListener('click', closeModal); window.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modal.classList.contains('is-open')) { closeModal(); } }); </script> </body> </html>
3
0
803
Sep ’25