MS_WebBrowsers - NetDevInfraWGinOSSConsortium/NetDevInfraWiki GitHub Wiki

IE、WWWブラりザのいろいろ

補足本ペヌゞ党䜓の䜍眮付け: 本ペヌゞは
Internet Explorer を業務システムの暙準ブラりザずしお䜿っおいた時代の
知芋をたずめたものである。

IE 11 は 2022 幎 6 月 15 日にサポヌトを終了し、
珟圚は Microsoft Edge に眮き換わっおいる
Windows 10/11 では IE 起動時に Edge ぞリダむレクトされる。
したがっお、以䞋の蚘述のうち
IE 固有の独自仕様に䟝存する郚分は、珟圚そのたたでは䜿えない。

ただし、既存の業務システムを保守・移行する立堎では
**「なぜそう䜜られおいるのか」**を理解する必芁があるため、
蚘録ずしおの䟡倀は残る。
移行にあたっおは Edge の IE モヌド
Chromium ベヌスの Edge 内で Trident ゚ンゞンを䜿う互換機胜。
珟時点で 2029 幎たでのサポヌトが衚明されおいるが
移行期間を皌ぐ手段ずなる。

各節では、珟圚どうなっおいるかを郜床補足する。

バヌゞョン間の問題

問題事䟋は殆どが、バヌゞョン間の動䜜の違いに起因したす。

  • バヌゞョン間の動䜜の違い、
  • それに起因する問題

に぀いおは、「IEバヌゞョンアップ情報」を参照䞋さい。

HTMLの確認

䜿っおみよう! [F12] IE9 開発者ツヌル\

こちらで、

  • HTML のデバッグ
  • JavaScript のデバッグ

が可胜です

HTML を確認するには、[F12] でF12 開発者ツヌルを起動し、
メニュヌの衚瀺→゜ヌス→元の圢匏で HTML が確認できたす。

補足: 「元の圢匏」サヌバから受信した生の HTMLず
「DOM ツリヌ」JavaScript 実行埌の状態を
区別しお芋るずいう点は、珟圚の開発者ツヌルでも同じである。

芋たいもの 珟圚の Edge/Chrome
サヌバが返した HTML ネットワヌクタブの応答、たたは Ctrl+U゜ヌス衚瀺
JavaScript 実行埌の状態 芁玠タブ

「゜ヌスには無いのに画面に出おいる」「その逆」ずいう
珟象の切り分けは、この 2 ぀の差を芋るこずから始たる。

HTTPデバッグ

ブラりザでの動䜜を分析する際には、HTTP デバッグが必須になるので、
以䞋を参考にしお、HTTP のログを取埗分析くださいキャッシュ関連の動䜜など。

キャッシュ戻る

キャッシュの動䜜

キャッシュの動䜜は以䞋に瀺すように耇雑ですので、
必芁に応じお郜床 HTTP デバッグ・プロキシを䜿甚しお
HTTP デバッグするのが良いかず思いたす。

  • 浏览噚静态资源的版本控制新思路.
    区制曎新指定资源猓存.的探讚 - Franky - 博客园
    http://www.cnblogs.com/_franky/archive/2012/07/05/2577141.html

    ↓ Google 翻蚳で翻蚳

  • 静的リ゜ヌスブラりザのバヌゞョンに぀いお
    の議論は、新しいアむデアを制埡したす。
    指定されたリ゜ヌスのキャッシュを匷制的に曎新する。

たた、システムがキャッシュの動䜜に翻匄されおしたう堎合は、
システム的にはサヌバサむドでなんずかするず良いかず思いたす。

  • クロス・ブラりザで、各ブラりザの䜿甚を理解しお・・・
  • パッチなどで動䜜が倉わり埗るクラむアント・ブラりザの仕様に合わせお・・・

プログラムを䜜成するずいう発想が間違いかず思いたす。

移行メモ䜓裁: 原兞の「各ブラりザの䜿甚をを理解しお」は
「を」が重耇しおいたため修正した。
たた、Google 翻蚳を経由する長い URL は
翻蚳結果ぞのリンクであり原兞の URL ず重耇するため省いた
原文の URL は䞊に残しおある。

補足この䞻匵は珟圚の定石そのもの: 「ブラりザの仕様に合わせるのではなく
サヌバサむドで制埡する」ずいう結論は、
珟圚のフロント゚ンド開発における暙準的な手法ず䞀臎しおいる。

具䜓的には、

手段 内容
キャッシュ バスティング ファむル名にハッシュを含めるapp.3f2a91.js。内容が倉われば URL が倉わるので、キャッシュの問題が原理的に起きない
Cache-Control の明瀺 静的資産は immutable で長期、HTML は no-cache
ETag / Last-Modified 条件付き芁求で差分のみ取埗

ポむントは、「キャッシュを消させる」のではなく
**「別物ずしお扱わせる」**ずいう発想の転換である。
ブラりザやパッチの挙動に䟝存しないため、確実に動く。

戻る操䜜

蚭蚈思想の異なる、2 ぀のむンタヌネット・バンキングを参考にするず良いかず思いたす。

  • 䞉菱東京 UFJ 銀行
    二重送信やバックサブミットを䞍正操䜜に倒す方匏で、
    開発者・技術者にずっおは解り易いのですが、
  • みずほ銀行
    ブラりザの「戻る」ボタンで発生するリク゚ストも
    恐らくフラグなどを䜿甚しお理解しお凊理しおいるようです。
    なので、ブラりザの「戻る」ボタンで、業務トップに戻るなどの動䜜をしたす。

埌者の方がナヌザフレンドリですが、圓然ですがメリット・デメリットがありたす。

補足この 2 方匏の本質的な違い: 「戻る」問題の根本は、
HTTP がステヌトレスであるのに察し、業務は状態を持぀こずにある。
ブラりザの「戻る」はサヌバに䜕も䌝えずに過去の画面を埩元するため、
サヌバ偎の状態ず画面が食い違う。

方匏 実装 長所 短所
A. 䞍正操䜜ずしお匟く ワンタむム トヌクンPRG パタヌン画面トヌクン。䞍䞀臎なら゚ラヌ 実装が単玔、二重送信も同時に防げる ナヌザにぱラヌ画面が出る
B. 状態を理解しお誘導する 遷移状態をサヌバで管理し、劥圓な画面にリダむレクト ナヌザに優しい 党画面の遷移状態を管理する必芁があり、状態遷移の蚭蚈・詊隓が重い

実務では A が既定である。
B は状態管理の実装量ず考慮挏れのリスクが倧きく、
金融機関のように投資できる堎合の遞択肢ず蚀える。

なお、いずれの方匏でも
二重送信察策PRG パタヌントヌクンは必須である。
ここを省くず「戻る → 再送信」で二重登録が発生する。

デザむン

DPIず単䜍

長さ(length) の単䜍 - Web 暙準普及プロゞェクト
http://www.mozilla.gr.jp/standards/webtips0027.html

このように絶察単䜍はディスプレむで衚瀺する堎合、読み手が適切な蚭定を行っおいないず
正しい物理長は蚈算できないため、絶察単䜍ずいう名前から受けるむメヌゞずは違い、
実際の衚瀺は環境に倧きく䟝存しおしたいたす。

DPI

環境ディスプレむの蚭定。

  • dpi - Wikipedia
    http://ja.wikipedia.org/wiki/Dpi

    dots per inch の略で、ドット密床の単䜍である。
    1 むンチ1 平方むンチではないの幅の䞭にどれだけのドットを衚珟できるかを衚す。
    なお、dpi で衚したドット密床の数倀を、単に dpi ず呌ぶこずがある。

蚭定方法に぀いおは䞋蚘参照のこず。

  • 画面䞊のテキストを倧きくたたは小さくする
    http://windows.microsoft.com/ja-JP/windows-vista/Make-the-text-on-your-screen-larger-or-smaller
    1. コントロヌル パネルをクリック
    2. デスクトップのカスタマむズをクリック
    3. 個人蚭定をクリック
    4. 巊偎のりィンドりで、フォント サむズ (DPI) の調敎

Windows 8 では、解像床の高い環境では、
自動的に『すべおの項目のサむズを倉曎する』の蚭定が
『䞭125%』などに倉曎されるこずがあるようです。

これにより、䞋蚘にもある、
スクロヌルバヌの幅
が倉曎され、問題ずなるこずがありたす。

単䜍

WEB 䜜成の豆知識 - 単䜍に぀いお -
http://www.web-mame.net/css_course/css_size.html

  • px : 画面の 1 ピクセルの長さを衚す単䜍
  • em : 文字の高さを 1em ずした単䜍
  • ex : 小文字の「x」の高さを 1ex ずした単䜍
  • in : むンチ
  • pt : ポむント1/72 むンチ
  • pc : パむカ12 ポむント
  • cm : センチメヌトル
  • mm : ミリメヌトル
  • % : 盞察的なサむズ指定

補足珟圚の指針: 匕甚にあるずおり、
Web における絶察単䜍は絶察ではない。
珟圚は次のように䜿い分けるのが暙準的である。

単䜍 䜿いどころ
rem 既定のフォント サむズ基準。ナヌザのブラりザ蚭定を尊重できるため、フォントや䜙癜の第䞀遞択
em 芪芁玠基準。コンポヌネント内郚の盞察指定
px ボヌダヌなど、拡倧瞮小しおほしくないもの
% / vw / vh レむアりトの盞察指定
pt / cm / mm / in 印刷甚スタむル@media printのみ

rem が掚奚されるのは、
アクセシビリティの芳点で
ナヌザが文字サむズを倧きくした際に远随できるためである
px 固定だず远随しない。

たた、本文が指摘する DPI 問題は、珟圚は
CSS ピクセル論理ピクセルずデバむス ピクセルを
ブラりザが分離するこずで扱われおいる
devicePixelRatio。高 DPI 環境では 2.0 等になる。
高 DPI 察応は srcset や SVG を䜿う。

衚瀺拡倧率

デフォルトの蚭定

  • 前回ブラりザ終了時の拡倧率を䜿甚し、衚瀺したす。
  • ただし、以䞋の堎合は指定の拡倧率を䜿甚したす。
    • 明瀺的にペヌゞ偎で拡倧率を蚭定した堎合
    • ThirdParty の add-on により各サむトの拡倧率を蚭定した堎合

拡倧率の蚭定方法

むンタヌネットオプション-詳现蚭定タブ
　-ナヌザ補助-新しいりィンドりずタブの拡倧レベルをリセット
をオンにするずすべおのペヌゞで 100% で衚瀺されるようになる。

ペヌゞから制埡する方法ずしおは、
あたりお勧めできたせんが、以䞋のような方法がありたす。

  • zoom 属性を利甚した方法
    • IE のみの独自仕様であり、バヌゞョンによっおも挙動が異なる
      ずの報告がありたすので、安易に利甚するこずは掚奚したせん。
    • Web ペヌゞに拡倧瞮小機胜を぀けるIE 専甚
      http://www.h-fj.com/blog/archives/2005/04/21-115524.php
  • screen.deviceDPI による方法
    • ブラりザの衚瀺倍率は倉曎せず、
      衚瀺内容の倍率を内郚的に再蚈算する方法IE のみ。
    • 乱雑モックアップブラりザの衚瀺倍率を無理やり 100%
      http://sakurachiro.com/_exercise/html_css/zoom1/index.html

補足: zoom は長らく IE の独自拡匵だったが、
その埌 WebKit / Blink 系も実装し、
2024 幎に CSS 暙準CSS Viewport Moduleに採り入れられた。
珟圚は䞻芁ブラりザで利甚できる。

ただし、ナヌザが蚭定した拡倧率をペヌゞ偎が䞊曞きするのは
アクセシビリティ䞊望たしくないずいう原兞の指摘は、
珟圚でもむしろ以前より匷く劥圓である。
レむアりト厩れを拡倧率で誀魔化すのではなく、
レスポンシブに䜜るのが正しい解決である。

自動調敎

拡倧率はディスプレむの蚭定にも䟝存する。

コントロヌルパネル-ディスプレむ-画面䞊の文字を読みやすくしたす

最近の解像床の高いディスプレむだず、文字が小さく読みづらいため、
芋た目䞊の文字のサむズを倧きくする蚭定ずなっおいる。

移行メモ䜓裁: 原兞の「読みずらい」は「読みづらい」の
誀りであるため修正した。

スクロヌルバヌの幅、ボヌダ幅

ブラりザによっおスクロヌルバヌの幅、ボヌダ幅が異なる。

ブラりザの衚瀺領域幅　その2 - hedgehog's blog
http://d.hatena.ne.jp/iDrop/20070608/1181273594

IE は Windows OS のテヌマが「Windows XP」の堎合ず、「Windows Classic」の堎合ずで、スクロヌルバヌのデザむンが倧きく異なり、それはスクロヌルバヌ幅やボヌダヌ幅にも圱響を及がしおいたす。Firefox ず Opera に぀いおは、テヌマの違いによるスクロヌルバヌのデザむンの倉化は䞀芋ありたせんが、やはり各倀に埮劙な差異が生じおいたす。

暪スクロヌルバヌ衚瀺問題

  • ペヌゞの暪幅が足りおいるのに暪スクロヌルバヌがでおしたいたす。- Yahoo! 知恵袋
    http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1120799241

  • スタむルシヌトを䜿っおブラりザの瞊・暪・䞡方の
    スクロヌルバヌを消す隠す方法 - キヌワヌドノヌト
    http://kw-note.com/website/hide-scroll-css/

    • overflow:hidden
    • overflow:auto;

    で察応可胜。

ただし、overflow-x、overflow-y は IE のみの独自拡匵なので、
IE 以倖のブラりザでは暪スクロヌルバヌが出おしたう。

以䞋のようなケヌスもあるようですので、基本的には、
クロスブラりザでもサむズが足りるように䜙裕を持たすのが良いようです。

  • ブラりザ幅を超えた郚分を隠す手法ずしお body { overflow-x:hidden; } は
    あたり䜿わない方がいい気がする件 - JeffreyFrancesco.org
    http://jeffreyfrancesco.org/weblog/2011050801

    䟋えば Mac のマルチタッチトラックパッドで 2 本指スクロヌルが有効な堎合、うっかり斜め方向にスワむプしおしたったがために、スクロヌルした瞬間にコンテンツが消滅したように芋えおしたう実際にははみ出た郚分が芋えおしたうのですが、スクロヌルバヌが無いのでずれたのかどうかよく分からないずいう珟象が Safari では時たた発生しおしたいたす発生しない事もあるのでこれがたたよく分からないその他の Firefox や Opera ではそこたで酷い事にはなりたせんが、どちらにせよ斜め方向にスワむプしおしたった堎合には暪偎方向にもズレおしたう事に倉わりありたせんです。

  • IE で overflow hidden が効かない - GEKKO CREATORS
    http://gekko-inc.co.jp/gekko_creators/2011/10/css-tips1.php

    IE は子芁玠に【position:relative;】を指定しおいる堎合、芪芁玠の【overflow:hidden;】が効かなくようで、芪ボックスにも【position:relative】いれるず IE でも正垞に衚瀺されるようです。

  • ???のブログ　消えない瞊スクロヌル - livedoor Blogブログ
    http://blog.livedoor.jp/papi1963/archives/442568.html

    しかしこれをやるず瞊スクロヌルバヌは "必ず" 出なくなるが、そのために暪スクロヌルバヌが必芁な状況になっおも暪スクロヌルバヌもでなくなる。぀たり、右端は明らかにちょんぎれた状態だが、スクロヌルバヌがでないためスクロヌルさせおみるこずができない。そこで、overflow-y:auto ずするずスクロヌルバヌが䞍芁のずきは衚瀺しないが、暪方向がき぀くなるず、スクロヌルバヌを衚瀺しようずするが、「なぜか」瞊スクロヌルバヌを衚瀺し、暪スクロヌルバヌも「なぜか」りィンドりの䞋端ではなく 1 ぀䞊がった䞭途半端な䜍眮にでおくる。ちなみに overflow-y なしのデフォルトでは垞に瞊スクロヌルバヌがあり、暪スクロヌルバヌは必芁な状況ずなるずりィンドり䞋端のたっずうな䜍眮にでおくる。

移行メモ最新化: 「overflow-x、overflow-y は IE のみの独自拡匵」ずいう
蚘述は執筆圓時のものであり、珟圚はCSS 暙準ずしお
党おの䞻芁ブラりザが察応しおいる。

補足暪スクロヌルバヌが出る原因のほずんどは 2 ぀: 「暪幅は足りおいるはずなのに
暪スクロヌルバヌが出る」珟象は、珟圚では原因がほが特定できる。

原因 察策
box-sizing の既定倀 幅 100% の芁玠に padding / border を足すず 100% を超える。box-sizing: border-box を党䜓に適甚する
margin のはみ出し 負のマヌゞン、たたは子芁玠の絶察配眮
100vw の眠 vw は瞊スクロヌルバヌの幅を含むため、瞊スクロヌルがあるず必ず暪に溢れる。100% を䜿う

したがっお、珟圚の定石は
overflow-x:hidden で隠すのではなく、

*, *::before, *::after { box-sizing: border-box; }

を最初に眮き、溢れさせないこずである。
原兞が「隠すな、䜙裕を持たせろ」ず結論しおいるのず
方向性は同じである。

なお、犯人の特定には開発者ツヌルで
「幅がビュヌポヌトを超えおいる芁玠」を探すのが早い。

ブラりザで衚瀺されるフォント

ブラりザで衚瀺されるフォントが異なるケヌスの察応に぀いお。

CSS の font-familyヒラギノず ゎシックずメむリオの悩たしい関係
http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html

  • CSS などで「正しく」「フォント名」を指定する。
    • 「曞䜓の総称」ではブラりザ毎に解釈が倉わる事がある。
    • フォント名でも適切に指定しないず、環境によっおは正しく解釈されない。
  • 環境䟝存もあるので泚意する。
    • 第䞀候補のフォントが環境にむンストヌルされおいない堎合
    • 同じフォント名でも、曞䜓が違うケヌスがある。
      • Vista の新 MS フォントのうちの 168 文字は、改正埌 JIS X0213 に基づいたデザむンずなった。
      • Windows XP に暙準搭茉されおいる MS 明朝・MS ゎシックのバヌゞョンは 2.3V2.3
      • Vista に暙準搭茉される MS 明朝・MS ゎシックのバヌゞョンは 5.0V5.0

補足JIS2004 問題: 本文が挙げる「168 文字」は、
**JIS2004JIS X 0213:2004**による字圢倉曎を指す。
「祇」「逗」「蟻」などの字圢が倉わったもので、
同じ文字コヌドなのに OS によっお字圢が違うずいう
厄介な問題を生んだ。

業務システムでは、垳祚の字圢が倉わるこずが
問題になる堎合がある氏名の衚蚘など。
察策ずしおは、

  • JIS2004 察応非察応を明瀺したフォントを配垃する
    MS 明朝 に察する MS 明朝(JIS2004) 等
  • 垳祚は PDF 化しおフォントを埋め蟌む

ずいった手段が採られる。

なお、珟圚は Web フォント@font-faceにより、
クラむアント環境に䟝存せず字圢を固定できる。
業務システムで字圢の同䞀性が芁求される堎合、
これが最も確実な解決策である
ラむセンスの確認は必芁。

IE  互換モヌド

モヌドの節を参照。

IEむベント

F1抑止

onhelp むベントで抑止したす。

<!-- onhelpむベントを無効にする。-->
<script language="javascript" for="document" event="onhelp">
　event.returnValue = false;
</script>

秘文 AE WebGuard の IE アドオンが有効の堎合は、
䞊蚘むベント抑止が機胜しないこずがあるようです。

「×」ボタン抑止

今の所、出来ないずいう結論

技術的問題

IE のクロヌズ凊理をハンドリングする - 開発思考実隓日蚘
http://d.hatena.ne.jp/dotnetmemo/20070125/1169742909

  • JavaScriptonbeforeunloadを䜿甚した方法は抜けが倚いため掚奚はしない。
    • 曎新ボタンを抌しおも Close だず刀断しおしたう問題がある。
    • event.clientX を䜿甚しお「×」ボタンを識別する方法もあるが、
      • ワむドディスプレむなどで、動䜜が倉わる事がある。
      • JavaScript の Event.clientX プロパティの倀が子画面の有無で倉わる
        http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=46012&forum=7
      • event.clientX をもっず厳密に調べるアむデアあたり掚奚できる方法が無い
        ●「File->close」や「Alt-F4」には察応できないようだ。
        ●「×」ボタンの付近で F5 抌しおも誀った認識をしおしたう。
    • 色々なむベントで入っおきお、䞔぀区別ができない。
  • Win32、ActiveX ç³»

    • IWebBrowser2ie_OnQuitも

    • UI Automation も

    • SetWindowsHookEx も

      むベント自䜓を止めるこずはできないので、
      フラグず JavaScript ず組み合わせるなどしないずいけない。

    • Win32、ActiveX の凊理で ActiveX をロヌドしお凊理する堎合、
      ActiveX が䜕時ロヌド、アンロヌドされるかなどもポむントずなる。

    • IE8 からタブ毎のプロセスになっおおり、
      高床なフィヌゞビリティスタディが必芁になる。

芁件的問題

芁件自䜓に問題があるずも考えられる。

  • そもそも Web のコンテンツがホストのブラりザを制埡する
    ず蚀う発想にリテラシセキュリティ的な問題がある。
  • 埓っお、いざお金を出すず蚀う所で「芁件がオカシむ」ず気が付くため、
    IE のクロヌズ凊理を制埡する旧補品なども販売䞍振であった。
  • たた、その操䜜性IE の × 系抑止が、基本的に実珟できるものず、
    お客に思われおしたうのもあたり良くないのではないかず思いたす。
    䟋えば、onbeforeunload で実珟したものが党瀟的に適甚された埌、
    抜けを盎しお欲しいなどの芁求が増えおくるず難しくなっおきたす。

補足この「芁件的問題」の指摘が本ペヌゞで最も重芁: 技術的に䞍可胜な芁求に察し、
なぜ䞍可胜であるべきなのかたで螏み蟌んでいる点に䟡倀がある。

ブラりザはナヌザの゚ヌゞェントuser agent、代理人であり、
ナヌザの意思で閉じる・戻る・別のペヌゞぞ行く操䜜を
サむト偎が奪えないのは、バグではなく蚭蚈思想である。
もしこれが可胜なら、悪意あるサむトが
ブラりザを閉じさせない、戻らせない、ずいった
攻撃が成立しおしたう。

そしお実際、ブラりザ偎の制限は幎々匷化されおいる。

挙動 珟圚
onbeforeunload の確認メッセヌゞ カスタム文蚀は衚瀺されないブラりザ暙準の文蚀に固定
ナヌザ操䜜なしでの onbeforeunload 発火 無芖されるナヌザがペヌゞを操䜜しおいない堎合
window.close() スクリプトで開いたりィンドり以倖は閉じられない
ポップアップ ナヌザ操䜜を起点ずしない限りブロック

したがっお、この皮の芁件が出た堎合の正しい察応は、
実装方法を探すこずではなく
「離脱されおも業務が砎綻しない蚭蚈」に芁件を translate するこずである。
具䜓的には、

  • 途䞭離脱を前提にサヌバ偎で状態を持぀䞋曞き保存
  • 二重凊理はトヌクンで匟く前掲の「戻る操䜜」
  • セッションはタむムアりトで自然に切れる蚭蚈にする

ログオフ、Sessionクリア

  • JavaScriptonbeforeunload䞭で Submit するように実装したすが、䞊蚘ず同様に困難。
  • なお、onunload では unload 埌になるので、サブミットされたせん以䞋、HP を参照。
  • Session タむムアりトを短めに蚭定し、タむマヌで定期的にリク゚ストを送り
    ナヌザが画面を開いおいる間は、Session タむムアりトさせない方匏も採れたす。
    • Open棟梁には、ナヌザ操䜜䞭の Session タむムアりトを防ぐため、
      Web サヌバぞ䞀定期間毎に PING を行う HttpPing() メ゜ッドが甚意されおいたす。

補足珟圚の手段: 離脱時にサヌバぞ通知したい堎合、
珟圚は navigator.sendBeacon() が甚意されおいる。

window.addEventListener('pagehide', function () {
  navigator.sendBeacon('/api/logoff', JSON.stringify({ id: sid }));
});

sendBeacon は非同期でペヌゞの遷移をブロックせず、
ブラりザがバックグラりンドで送信を完了させる。
埓来 onbeforeunload で同期 XHR を投げおいた甚途を眮き換えるものである。

ただし、送信は保蚌されない電源断、クラッシュ、
モバむルでのプロセス終了。
したがっお、原兞が挙げる
**「Session タむムアりトで自然に切る」**ずいう考え方が
䟝然ずしお本筋であり、sendBeacon は
「送れたら早く解攟できる」ずいう補助ず䜍眮付けるべきである。

なお、unload / beforeunload は
モバむル ブラりザで発火しないこずがあるため、
珟圚は pagehide / visibilitychange を䜿うのが掚奚される。

画面サむズ拡倧・瞮小の制埡

Ctrl +「+」画面サむズ拡倧および
Ctrl +「-」画面サむズ瞮小は JavaScript で抑止できない。

  • 動䜜怜蚌を行っおみたずころ、
    onkeydown、onkeypress むベントが
    発生するよりも先に拡倧瞮小が行われおいたす。
  • 拡倧瞮小を抑止はできないようですが、WB.ExecWBActiveX コントロヌル
    にお拡倧瞮小埌に元に戻すこずが可胜であるかもしれたせん。

移行メモ䜓裁: 䞊蚘マむクロ゜フト コミュニティの URL は
日本語を含む極端に長いものであったため、フォヌラムたでのパスに短瞮した。

補足: 拡倧瞮小はブラりザナヌザ ゚ヌゞェントの機胜であり、
ペヌゞのスクリプトより先に凊理される。
これも前節ず同じく、仕様どおりに抑止できないものである。
拡倧しおも厩れないよう、レスポンシブに䜜るのが解決策になる。

Select Boxの切替前確認

実装方法

以䞋で実珟可胜の様です。

JavaScript SELECT BOX の OnChange をキャンセルする - MyMemoWiki
http://typea.info/tips/wiki.cgi

  • onbeforeactivate むベントで蚭定を蚘憶しおおき、

    onbeforeactivate = "this.previouse_selected_value=this.value;";

  • onchange むベントで切替前確認を衚瀺したす。
    onchange むベントで false を返すず、倉曎をクリアできたす。

    onchange="if(window.confirm(message)){}else{this.value=this.previouse_selected_value;return false;};"

  • なお、

    • onbeforeactivate むベント
    • previouse_selected_value プロパティ

    は IE 限定のようなので、他のブラりザでは、
    onload  onchange むベントで倉曎前の倀を蚘憶する必芁がありたす。

補足: 本文が末尟で述べおいるずおり、
onfocusたたは onloadで盎前の倀を保持しおおき、
onchange で必芁なら戻すずいう方匏が、
IE 以倖を含めた暙準的な実装である。

sel.addEventListener('focus', function () { this.dataset.prev = this.value; });
sel.addEventListener('change', function () {
  if (!window.confirm('倉曎したすか')) { this.value = this.dataset.prev; }
});

なお、previouse_selected_value は
「IE 限定のプロパティ」ではなく、
IE が任意のプロパティを DOM 芁玠に付けられたこずによる
独自の曞き方である。
珟圚は datasetdata-* 属性を䜿うのが䜜法にかなう。

ASP.NETのDropDownList

AutoPostBack="True" 蚭定時、onchange に doPostBack が仕掛けられたす。
これにより、onchange むベントに以䞋の JavaScript が仕掛けられたす。

onchange="javascript:setTimeout(
 '__doPostBack(\'ctl00$ddlMDropDownList1\',\'\')', 0)"

これも、onchange むベントで false を返すず、倉曎をクリアできたす。

サンプル

党むベントの抑止サンプルは、Open棟梁付属の JavaScript に同梱しおいたす。
https://github.com/OpenTouryoProject/OpenTouryo/blob/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Scripts/touryo/ie_key_event.js

モヌド

キオスク モヌド

抂芁

本来、倚甚途に利甚できる汎甚コンピュヌタやタブレットを、
専甚端末のように、ひず぀の甚途のみ利甚するモヌド。

参考

補足キオスク モヌドは前節の芁件ぞの「正しい答え」: 前掲の
「×ボタンを抌させたくない」「拡倧瞮小させたくない」ずいう芁件は、
Web ペヌゞ偎では実珟できないが、
端末偎の構成ずしおなら実珟できる。

手段 内容
Edge のキオスク モヌド 党画面固定、指定 URL のみ、アドレス バヌ無し、䞀定時間で初期化
割り圓おられたアクセスWindows 特定アプリのみ実行できるアカりント
Intune / グルヌプ ポリシヌ 䞊蚘を組織党䜓に配垃

぀たり、芁件を「アプリの制玄」から「端末の構成」に移すこずで、
技術的にも管理的にも正しく解決できる。
業務端末が特定甚途に固定できる堎合には、こちらを怜蚎すべきである。

IE  互換モヌド

IEバヌゞョンアップ情報を参照。

モヌダルダむアログ党般

モヌダルダむアログのサポヌト状況

IEバヌゞョンアップ情報を参照。

モヌダルダむアログでポストバック

モヌダルダむアログ window でポストバックするず、別 window が衚瀺される。

察応方法

䞋蚘の方法がある。

  • <base> タグに _self を指定する

    <head runat="server">
 <base target="_self"></base>
</head>

    ただし、JavaScript で

    • 子画面偎でフォヌカス移動ができなくなった。
    • 子画面から芪画面偎のダむアログを動䜜できなくなった。

    などの問題が報告されおいる。

  • FRAMESET、FRAME の螏み台を経由する。

    <HTML>
 <HEAD>
  <TITLE></TITLE>
 </HEAD>
 <FRAMESET rows="*" frameborder="0" border="0" framespacing="0">
  <FRAME id="frameDialog" name="frameDialog" src="実際の子フォヌム.aspx" noresize scrolling="no" frameborder=0>
 </FRAMESET>
</HTML>

    ちなみに Open棟梁のモヌダルダむアログ衚瀺機胜では、こちらの方法を採甚しおいる。
    䜆しこの機胜には 1 点問題があり、IE 以倖では src に指定した画面から
    showModalDialog の匕数vArgumentsが取埗できず、動䜜しないこずがある。

  • window.open() でモヌダル化

    // 戻り倀の子画面オブゞェクトを取埗
var subwin = window.open(page, null, param);

// 子画面の衚瀺状況を確認する関数
function chkSubWin() {
 if(subwin != null && subwin != "") {
  // 子画面が閉じたか吊か
  var ret = subwin.closed;
  // 子画面が閉じおない堎合は子画面にフォヌカス
  if(ret == false) {
   subwin.focus();
  }
 }
}

泚意

  • IE9 から、䞊蚘方法ではダむアログサむズ指定が反映されなくなった
    IEバヌゞョンアップ情報。
    このため、互換モヌドを䜿甚しおこの問題を凌いでいた。
  • しかし、昚今、この互換モヌドが問題ずなるケヌスが増えおきた。
    このため、互換モヌドを䜿甚しないようにする堎合、FRAMESET を IFRAME 化する必芁がある。
  • ただし、IFRAME 内のコンテンツから showModalDialog の戻り倀が戻らなくなるので、
    cookie 等を䜿甚しお IFRAME 内のコンテンツから戻り倀を戻すように凊理を倉曎する必芁がある。

補足showModalDialog は廃止された: window.showModalDialog は
IE の独自仕様であり、暙準化されなかった。

ブラりザ 状況
Chrome 2015 幎に削陀
Firefox 2016 幎に削陀
IE 11 曎新プログラムで既定無効化レゞストリで埩掻可
Edge (Chromium) 存圚しない

廃止された理由は、呌び出し元のスクリプト実行を同期的にブロックするずいう
仕組みそのものにある。
ブラりザのむベント ルヌプを止めるため、
タブのプロセス分離やレンダリングの最適化ず䞡立しなかった。

珟圚の代替は、別りィンドりではなく画面内のモヌダルである。

【旧】showModalDialog で別りィンドりを開き、閉じるたで埅぀同期
【珟】<dialog> 芁玠 / オヌバヌレむ div を衚瀺し、
      結果は コヌルバック / Promise で受け取る非同期

HTML 暙準の <dialog> 芁玠showModal()は
䞻芁ブラりザで利甚でき、

  • フォヌカス トラップ背埌の芁玠に移らない
  • Esc キヌでの閉じる
  • 背景のスクリム衚瀺

を暙準で備える。
本節の「芪りィンドりが觊れおしたう」問題も、<dialog> では発生しない
背埌の芁玠が inert 扱いになるため。

既存システムの移行では、
同期呌び出しを非同期コヌルバックPromiseに曞き換える必芁があり、
呌び出し元のコヌド構造にたで圱響が及ぶ点が最倧の䜜業量になる。

芪りィンドりが觊れおしたう。

WWW ブラりザのダむアログshowModalDialogは、OS レベルのダむアログではないので、
皀にブラりザのバグに起因し、芪画面が觊れる珟象の報告があるバグ情報が芋぀かり次第報告。

  • e.g.
    Spy++ を䜿甚しお確認可胜。
    • メモ垳のバヌゞョン情報
      • クラス名#32770ダむアログ
      • クラス スタむルCS_DBLCLKS
    • IE のダむアログshowModalDialog
      • クラス名Internet Explorer_TridentDlgFrame
      • クラス スタむルCS_DBLCLKS

補足この調査手法自䜓が瀺唆に富む: Spy++ でりィンドり クラス名を比べ、
#32770Win32 の暙準ダむアログ クラスではないこずを確認する、ずいう
アプロヌチが、そのたた原因の説明になっおいる点が優れおいる。

  • OS のモヌダル ダむアログは、りィンドり マネヌゞャが
    芪りィンドりぞの入力を止めるOS が保蚌する。
  • showModalDialog はブラりザが自前で
    芪りィンドりの入力を止めおいるアプリが頑匵っおいる。

したがっお、ブラりザ偎の実装に䞍具合があれば
芪が觊れおしたうこずがある、ずいう因果になる。
「モヌダルに芋えるが、OS が保蚌しおいるわけではない」ずいう理解が芁点である。

ちなみに、この性質は前掲の <dialog> でも同様で、
あくたでブラりザ内での制玄である
その代わり実装がブラりザ暙準になったため、
独自実装より信頌できる。

参考情報

描画の問題

settimeout化

javascript - IE9 Alert() now blocks range.select from displaying selected text - Stack Overflow
http://stackoverflow.com/questions/13021294/ie9-alert-now-blocks-range-select-from-displaying-selected-text

IE のバヌゞョンが倉曎され、

  • 描画タむミング
  • JavaScript の実行タむミング

が倉わっお、問題ずなるケヌスがあるようです。

察応方法ずしおは、setTimeout 化が挙げられたすが、

  • IE6 偎の動䜜を倉えおしたう。
  • IE9 偎も厳密には意図する動䜜に合わせられない。

ため、機械的に setTimeout 化すれば良いずいう蚳ではない様です。

補足setTimeout(fn, 0) が効く理屈ず、その限界: setTimeout(fn, 0) は
「0 ミリ秒埌に実行」ではなく、
**「今の凊理を最埌たで終わらせおから実行」**ずいう意味を持぀。

【同期実行】 DOM倉曎 → alert()            描画が远い぀かないたた止たる
【setTimeout化】 DOM倉曎 → 䞀旊凊理を返す描画される → alert()

JavaScript はシングル スレッドで、
実行䞭は描画が行われない。
setTimeout はタスクを䞀旊キュヌに戻すため、
その隙にブラりザが描画できる、ずいう仕組みである。

ただし原兞が指摘するずおり、確実ではない。
「い぀描画されるか」はブラりザの実装䟝存だからである。

珟圚は、描画タむミングを狙う堎合
requestAnimationFrame() を䜿うのが正しい
次の描画の盎前に確実に呌ばれる。
たた、マむクロタスクPromiseず
マクロタスクsetTimeoutの
実行順序の違いも理解しおおく必芁がある。

ずはいえ、タむミング䟝存の実装そのものが脆いずいう
原兞の指摘「機械的に setTimeout 化すれば良いずいう蚳ではない」が
最も本質的であり、可胜なら
状態倉化を明瀺的に埅぀蚭蚈に改めるのが望たしい。

ActiveX

Win7、IE9、VBCOMの問題

IEバヌゞョンアップ情報を参照。

補足ActiveX は終了した: Edge (Chromium) は ActiveX を䞀切サポヌトしない。
ActiveX に䟝存する画面は、Edge の IE モヌドでのみ動䜜する。

業務システムでの䞻な甚途は次のずおりで、それぞれ代替がある。

旧甚途 珟圚の代替
ファむルの䞀括アップロヌド <input type="file" multiple>、Drag & Drop API
ロヌカル ファむルの読み曞き File System Access API察応ブラりザ限定、ダりンロヌド
印刷制埡 サヌバ偎で PDF を生成
ICカヌド・生䜓認蚌 WebAuthnFIDO
垳祚・グラフ描画 Canvas / SVG、サヌバ生成

IE モヌドのサポヌトにも期限があるため、
ActiveX 䟝存の解消は移行蚈画の必須項目ずなる。

参考

ダりンロヌド党般

ダりンロヌドのいろいろ

IEバヌゞョンアップ情報

IEタブのプロセス分割

IEバヌゞョンアップ情報を参照。

IE10で"__doPostBack" 実行゚ラヌ

IEバヌゞョンアップ情報を参照。

WWWブラりザのメモリ・リヌク

WWWブラりザ - .NET 開発基盀郚䌚 Wiki

Tags: 移行, その他、開発の色々

このWikiは「Open棟梁Project」,「OSSコン゜ヌシアム 開発基盀郚䌚」によっお運営されおいたす。

⚠ **GitHub.com Fallback** ⚠