JavaScriptで作成した検索機能がスマートフォン環境下で表示されません

Question

HTML5でレスポンシブ対応のwebサイトを作成しているのですが、javascriptを用いて作成した検索ボックスが、スマートフォン環境下で確認した時だけ表示されません。
PCではIE、chrome、safariなど主要ブラウザ全てで表示され、検索ボックスとして意図した通りの動作をするのですが、スマートフォン環境で見た際にはiOS、Androidのどのブラウザでも下記のソース部分が表示されず、解決方法が分からない状態です。

<div class="searchInput">
					<script type="text/javascript"><!--
						if (navigator.platform.indexOf("Win") != -1) {
						document.write('<div>キーワード検索&nbsp;<input name="keyword" id="keyword" type="text" size="13" onKeyDown="Ser_Ent(document.getElementById(\'keyword\').value,event,\'\')"><a href="javascript:SearchText(document.getElementById(\'keyword\').value,\'\');" onClick="javascript:SearchText(document.getElementById(\'keyword\').value,\'\');">&nbsp;<img src="'+forDirectoryPath()+'common\/images\/int_search_grn.png" width="20" height="20" alt="キーワード検索" class="iconP"><\/a><\/div>');
						}else {
						i=0;
						if (navigator.plugins[i].filename.indexOf(".") >= 0) {
						document.write('<div>キーワード検索&nbsp;<input name="keyword" id="keyword" type="text" size="13" onKeyDown="Ser_Ent(document.getElementById(\'keyword\').value,event,\'\')"><a href="javascript:SearchText(document.getElementById(\'keyword\').value,\'\');" onClick="javascript:SearchText(document.getElementById(\'keyword\').value,\'\');">&nbsp;<img src="'+forDirectoryPath()+'common\/images\/int_search_grn.png" width="20" height="20" alt="キーワード検索" class="iconP"><\/a><\/div>');
						}else {
						document.write('<div id="searchInput" style="display:none"><\/div>');
						}
					}
					--></script>

他の箇所で使っているJavaScriptはスマートフォン環境下でもきちんと動作をしているため、JavaScript自体が全く使えない状況ではないようです。
また、この表記はXHTML1.0で書かれたソースを流用しているため、その辺りが原因かとも思いましたが、PC環境下できちんと動作している分、どこに原因があるのか、どこから何を試してみるべきかわからない状態です。

webページ制作についてはほとんど初心者なため、是非皆様のお力をお借りしたいです。
何か思い当たる事柄について、些細なことでもいいのでコメントをいただけると助かります。
どうぞよろしくお願いいたします。

Answer 1

原因はほかの方が書いてくださっていますので別のことを。

XHTML1.0ということで、"application/xhtml+xml"で出力されていると思いますが、これではdocument.write()が動きません。
ほかの方法をお勧めします。

HTML5においても非推奨です。
https://www.w3.org/TR/html/webappapis.html#documentwrite

Comments

[退会済みユーザー]

回答ありがとうございました。原因が分かり、やっと対策法が見えてきました。
他の方の回答も参考に、自身でもいろいろ試してみたいと思います。
この度は、本当にありがとうございました。

Answer 2

document.writeの行が長いので何をやっているのかがわかりづらいですが、動きをわかりやすくするためにコードを簡略化してみますと、

if (navigator.platform.indexOf("Win") != -1) { // 条件1
  document.write(/* HTML(1) */);
}
else {
  i = 0;
  if (navigator.plugins[i].filename.indexOf(".") >= 0) { // 条件2
  document.write(/* HTML(2) */);
}
else {
  document.write('<div id="searchInput" style="display:none"><\/div>');
}

といった感じになります。つまり、

• 条件1に合致すればHTML(1)を追加し、
• 条件1に合致せず条件2に合致すればHTML(2)を追加し、
• 条件1,2どちらにも合致しない場合は<div></div>を追加するが何も表示しない

ということになります。

条件1は、navigator.platformに文字列Winが含まれていればtrue、というものですので、一般的には、「Windowsであれば」という扱いになります。よって、iOS, Android, Linux, Macはいずれも当てはまりません。

条件2は、i = 0ですので、navigator.plugins[0]で示されるプラグインのファイル名に.(ピリオド)が含まれていればtrue、となります。(なぜi = 0しかチェックしないのか、等、意図が今ひとつ不明ですが、可能な限り推測すると、)恐らく、「プラグインがインストールされていれば」ということになるのではと推察されます。よって、通常はプラグインをインストールすることのないiOSやAndroidでは当てはまりません。

よって、少なくともiOSやAndroidでは条件1,2いずれにも当てはまらないため、最後のelse、つまり非表示の<div>タグが追加されて終わることとなります。(なお、プラグインをインストールしていないMac, Linux等でも同じ結果になります。)

もし、プラットフォーム(Windows, Mac, Linux, iOS, Android, 等)やプラグインの有無等を問わず検索ボックスを追加したいということで、条件判断が不要となるようであれば、

<div class="searchInput">
    <div>キーワード検索&nbsp;<input name="keyword" id="keyword" type="text" size="13" onKeyDown="Ser_Ent(document.getElementById(\'keyword\').value,event,\'\')"><a href="javascript:SearchText(document.getElementById(\'keyword\').value,\'\');" onClick="javascript:SearchText(document.getElementById(\'keyword\').value,\'\');">&nbsp;<img src="'+forDirectoryPath()+'common\/images\/int_search_grn.png" width="20" height="20" alt="キーワード検索" class="iconP"><\/a><\/div>
</div>

で済むようにも思えます。

Comments

[退会済みユーザー]

非常に丁寧に説明いただき、大変勉強になる回答でした。
まだまだ勉強中の身ではありますが、少しずつ自分の中で使える技術にしていけるよう頑張ります。
この度は、本当にありがとうございました。

Answer 3

標準ではない実装かつスマートフォン用ブラウザにはそもそも必要のない機能なので、そういう挙動になるのでは。

【window.navigator.plugins - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/NavigatorPlugins/plugins

非標準

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

---

コードについては document.write を使うころの実装なので、何を除外したかったのかがわかりませんが、下記コードで十分ではないでしょうか。

<script type="text/javascript">
document.write('<div>キーワード検索&nbsp;<input name="keyword" id="keyword" type="text" size="13" onKeyDown="Ser_Ent(document.getElementById(\'keyword\').value,event,\'\')"><a href="javascript:SearchText(document.getElementById(\'keyword\').value,\'\');" onClick="javascript:SearchText(document.getElementById(\'keyword\').value,\'\');">&nbsp;<img src="'+forDirectoryPath()+'common\/images\/int_search_grn.png" width="20" height="20" alt="キーワード検索" class="iconP"><\/a><\/div>');
</script>

Comments

[退会済みユーザー]

回答ありがとうございました。昔のコードをそのまま引っ張ってきていましたが、皆様の回答で解決方法が見つかりました。この度は、本当にありがとうございました。