URL: URL() コンストラクター - Web API | MDN を使うと、基準になるURLからの相対パスを解決したURLが得られます。 例えば、次のように使います。 // ベース URL: let baseUrl = "https://developer.mozilla.org"; new URL("ja/docs", baseUrl); // => 'htt…

ruby.wasmのE2Eテストをデバッグする - @ledsun blog で、Response.urlにリダイレクト後のURLが入っていない現象を観測しました。 MDNには url プロパティの値は、あらゆるリダイレクトの後に得られる最終的な URL になります。 とあります。矛盾しているよ…

ブラウザでJavaScriptモジュールが使えるようになりました。 <script type="module">って書くやつです。 これを使うとimport/exportを使ってモジュール感の依存関係が解決できます。 これまでは人間がscriptタグの順番を決めるか、Webpackのようなモジュールバンドラーで事前処理す…

FormData 先週、Form要素のデータがそのまんま欲しくて、はじめて使いました。 そのときは次のようにJSON形式で送信しました。 const formData = new FormData(document.bookForm); const name = formData.get("name"); const age = formData.get("age"); co…

Firefox 95.0でAsynchronous Clipboard APIのwrite, read, readText関数を使うには以下の設定が必要です。 高度な設定 Firefoxのアドレスバーにabout:configと打ち込むと、高度な設定が出来ます。 Firefoxのアドレスバーにabout:configを入力して高度な設定…

結論 function isAndroid() { return /Android/.test(navigator.userAgent) } にしました。 経緯 AndroidのChromeブラウザでは、一番上までスクロールしてさらに下方向にドラッグするとリロードします。 このときだけ window.onbeforeunload = () => true を…

https://w3c.github.io/clipboard-apis/#override-copy To override the default copy event behavior, a copy event handler must be added and this event handler must call preventDefault() to cancel the event. window.addEventListener('copy', (e) …

Clipboard API and events を読んでいたらclipboardchangeイベントというsyustem clipboardに変化があったら発火する、便利そうなイベントがありました。 次のようなコードを試してみました。 window.addEventListener('clipboardchange', () => { console.l…

Clipboard API and events を読みました。 Asynchronous Clipboard APIを使ったサンプルをCodepenで作りました。 Google Chromeだと、全部動きます。 FirefoxだとwriteTextしか動きません。writeはwriteで書き込むためのClipbordItemがサポートされていない…

stackoverflow.com を参考にして、次の関数で判定してみました。 function () { return ( 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 ) } タッチ出来るかどうかで判定します。 これだとsurfaceみたいなタ…

Firefoxでdragenterイベントが2重に発火する現象を見つけました。 再現するCodepenを作りました。 See the Pen dragenter by shigeru.nakajima (@ledsun) on CodePen. ファイルを青い四角にドラッグすると表示が変わります。 このときFirefox 94.0.2 (64 ビ…

VSCodeがinvalidなJSONを検出してくれない VSCodeが次のようなInvalidなJSONをかいても検知してくれないこと。 <script type="importmap"> { "imports": { "action-stream": './node_modules/action-stream/index.mjs', } } </script> JSONなので、シングルクォートもケツカンマも許容されませ…

HTMLのscriptタグにdefer属性があります。 これを使うと何が嬉しいのでしょうか？ スクリプトがDOM構築に与える影響 スクリプトはdocument.write を実行してHTMLを操作することが許されています。 このため、ブラウザは<script>タグを見つけると、DOM構築を一度停止…