HTML

【HTML】IMGタグに画像データ文字列を指定して、直接画像を埋め込む（＋JAVAによるBASE64エンコードの方式）

IT

HTMLのIMGタグのSRC属性には、通常外部の（自分自身のHTMLファイルとは別の）画像ファイルを指定するのだが、
画像のデータを示す文字列を指定することで、
外部の画像ファイルを使用せずに自身のHTMLファイル内で「画像」データを再現できる。
※ただしその分、HTMLファイルの容量自体が膨らむ。
特定の静的HTMLコンテンツがそれだけで完結していて、
外部の画像を読み込むような隙がない（配置された場所からしてネットワーク環境的に不可能な）ケースで使用する。
↑のような書き方をするとなんとなくレアケースにしか感じないが、実際、あったのである。（実体験故、詳しいことが書けない）

記述方法は以下の通りだ。

<img src="data:image/png;base64,[BASE64エンコードされた文字列]" alt="base64test">

 

 

シンボリックリンク先のCSS、JSの読込について

IT

HTMLからシンボリックリンクのCSSやJSを読み込む動作がIEとGoogle Chromeで違う。

例えば以下の構成だったとする。

SymLinkCSSTest.html  
└─real_path  
    ├─syml_test.css  
    ├─syml_test.js  
    ├─<SYMLINK>      syml_test_from_real_path.css [syml_test.css]  
    └─<SYMLINK>      syml_test_from_real_path.js [syml_test.js]

つまり実態は「syml_test.～」で、
そいつをシンボリックリンクで参照している「syml_test_from_real_path.～」というファイルが同階層に存在している。


このときの動作をまとめると

ファイルブラウザ(Version)結果Google Chrome(36.0.1985.125 m)読める（JS実行できる）

syml_test.css IE(10.0.9200.17028) 読める（スタイル適用される）
Google Chrome(36.0.1985.125 m) 読める（スタイル適用される）
syml_test.js IE(10.0.9200.17028) 読める（JS実行できる）
syml_test_from_real_path.css IE(10.0.9200.17028) 読める（スタイル適用される）
Google Chrome(36.0.1985.125 m) 読めない（スタイル適用されない）
syml_test_from_real_path.js IE(10.0.9200.17028) 読める（JS実行できる）
Google Chrome(36.0.1985.125 m) 読めない（JS実行できない）

となる。
実態パスのCSSやJSが読めるのは当然だが（まとめてて変な気がしてきたｗ）、
シンボリックリンクのCSSやJSはGoogle Chromeでは読んでくれない。

 

word-break問題

IT
tableタグ内にむちゃくちゃ長い文字をいれると、 なにも指定してない場合widthを突き抜けて文字が外にはみ出す たとえば aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa となるわけだが テー

Spanタグのonclickを指定して別要素のclick呼び出すとGoogle Chromeでは機能しない

IT

「IEだと動くがGoogle Chromeだと動かない」というタイプのネタ

spanタグにonclickを指定して、その中で直接JS呼び出せば機能するが、

そこから別の（例えばhidden）要素を無理やりclickするような指示を出すと機能しない。

下記のケースで機能するのは①のみ。

 

①

<span onClick="alert('Span Tag Click.');" style="background-color: #FFFF00">Span Tag test.</span>

②

<input type="hidden" name="hidden_obj1" onClick="alert('span to hidden_obj1 click.')" >

<span onClick="hidden_obj1.click();" style="background-color: #FF00FF">Span Tag test(->hidden1 click).</span>

③

<input type="hidden" name="hidden_obj2" onClick="alert('span to hidden_obj2 click.')" >

<span onClick="hidden_obj2.onclick();" style="background-color: #0FFFFF">Span Tag test(->hidden2 'on'click).</span>