Javascriptでブラウザ判別、iframe内の子要素にscrollingの指定をするには？

質問

Javascript初心者です。いろいろ探したのですが解決方法がわかりません。
index.htmlにiframe（name=""main）があり、それぞれの子要素にtarget="main"で指定しているHPを作成したのですが、子の要素にカスタマイズスクロールバー(flexcroll　http://youmos.com/news/flexcroll_js　)を取り入れています。
※ちなみに上記iframeはindex.html内でサイズやリンク先などを指定しているのですが、そこでscrolling="no"にしています（子のflexscrollと重複するので）。

MacIEとSafariではスクロールバーが表示されません。（Winはfirefox、IE6、Opera9、Netscape7.1、Macではfirefoxはflexcroll表示確認済みです。）
その不具合の対処にindexのhead内に<script type="text/javascript" src="../js/distinction.js"></script>にブラウザ判別をさせて、
MacIEとSafariには別のjsファイルを適用させ、flexcrollを無効にし、デフォルトのスクロールバーが出るように指定したいのですが、
上記※にあるとおり、index内でiframeのscrollingをnoにしているため、どうしたらいいのかわからなくて困っています。
下記がdistinction.js内のスクリプトです（調べながら作成したので自信がありません）。

// JavaScript Document
if(navigator.userAgent.indexOf('Gecko/')!=-1) {
document.write('<script language="javascript" src="js/flexcroll.js"></scr'+'ipt>\n');
}
else if (document.window.clipboardData) {
document.write('<script language="javascript" src="js/flexcroll.js"></scr'+'ipt>\n');
}
else {
document.write('<script language="javascript" src="js/macIE.js"></scr'+'ipt>\n');
}
}
else if (window.opera) {
document.write('<script language="javascript" src="js/flexcroll.js"></scr'+'ipt>\n');
}
else if(navigator.userAgent.indexOf('AppleWebKit')!=-1) {
document.write('<script language="javascript" src="js/macsafari.js"></scr'+'ipt>\n');
}
else {
document.write('<script language="javascript" src="js/other.js"></scr'+'ipt>\n');
}
// -->

また、flexcroll.jsを適用しないもののjsファイルの中身もなんと記述したらいいのかわかりません。そもそも、この対処法であっているのでしょうか？
間違いや解決方を教えてください。

回答No.1

MAN_MA_RUI · ベストアンサー

scrolling="no"は元々スクロールさせないための設定ですからスクロールバーが表示されなくても仕方ないです。ただ、scrolling="no"を外せとも言いがたい状況なのでなんとも難しいところですよね。

UA判定は偽装を見抜けませんからそこに注意したほうがいいです。
http://okwave.jp/qa2639629.html

MacIEを個別判定したい場合はnavigator.systemLanguageオブジェクトの判定に加えてnavigator.platformの判定を行うと多分いけるんじゃないかな？

お礼

MAN_MA_RUIさん、アドバイスありがとうございます！！
参考サイト確認させていただきました。
MAN_MA_RUIさんの回答と参考サイトから、確認なんですが・・・。
そちらのスクリプト4行目のところに

if(navigator.systemLanguage) {
document.write('（IE4以上への対応）')
}
else if (navigator.platform) {
document.write('<script language="javascript" src="js/macIE.js"></scr'+'ipt>\n');
}

と足したらいいということでしょうか？
本当に申し訳ありません。素人なもので、それっぽいものを見つけて、解らないことは
調べてはいるんですが・・・。その関わり方などがよく解っていないんです。
よかったら、教えていただけませんか？

補足

すいません！初めて教えてgooを使って慣れてなくて、
質問だったのに、お礼の方に書いてしまいました。。。

回答No.4

caitsith_goo

追記です。
「flexcroll-uncompressed.js」の31行目でブラウザ判別の処理をしているのですが、ここでMacIEと判別するような状態で処理させたところ、
「flexcroll」のJavascript処理が行われずにoverflowのデフォルトのスクロールバーが表示されました。

なので、overflowが正常に動作するのであれば、先ほどの回答で書いた、
ブラウザ判別でMacIE、safariの場合は<script>～</script>を読み込まないようにする。
というのは必要ないかもしれません。
ただ、MacIEでのテストではないので実機で確認してみてください。

お礼

本当にありがとうございます。
flexcroll-uncompressed.js確認しました。

Javascriptとか全然の初心者で、デザイン上スクロールバーのカスタマイズをしたいと検索し、flexcrollに辿り着きました。
私が使ったファイルはfleXcroll_SampleStyles\variations-howto's\fixedsize-transparentなんですが、
Javascriptリファレンスを見ながら、中身を見てもよく解らなくて、ファイル自体を一日中いじって、
なんとか中身とサイズなどを変更して使えるようになったという状態で、
その中にflexcroll-uncompressed.jsが入っていなかったので、全然目を通していませんでした。

よくわからないのでjsファイル自体、中身を触るのも怖かったんですが、今思うと、
このファイルをちゃんと解読しようと試みていたら、こんなに時間がかからなかったのかな？と思いました。
せっかくの機会なので、このファイルの解読にチャレンジしてみて少しでもJavascriptの理解をはかりたいと思いました。
いろいろ試してくださって、教えてくださって、本当にありがとうございました。

回答No.3

caitsith_goo

MacIE、safariではoverflowにバグがある云々というのを見たことがあったので、overflow自体がちゃんと動くのかが疑問でした。
Googleで「overflow mac ie」「overflow safari」で検索すると対処方法が見つかりそうです。
flexcroll.jsをはずした状態でこれらの対応をして、overflowによるスクロールバーが表示されるのであれば、overflowは動作すると言えます。

あとは、子ファイルでブラウザ判別を行います。
このときの記述は、

if (MacIE、safariではない場合) {
document.write('<script language="javascript" src="js/flexcroll.js"></scr'+'ipt>\n');
}

のように、MacIE、safariではない場合だけ<script>～</script>を書き出して、MacIE、safariの場合は何も書き出さないようにします。

また、MacIE、safariの判別については、「flexcroll-uncompressed.js」の31行目にある記述が参考になりそうです。

先ほどの回答で、scrollingをscrollだのscrollbarだのと記述していました。すみません。。

お礼

再回答本当にありがとうございます。
先に先程のお礼のところで、caitsith_gooさんのこと呼び捨てになってました。
何回か書き直したから、間違えて消しちゃったんだと思います。すいません。

確かに、一番最初の状態（それぞれの子ファイルにflexcroll.jsを読みに行かせてる）では、
SafariとIEはスクロールも、ドラッグして下がることも出来ず、ページを下まで見ることが
出来ない、最悪な状態でした。
これから「flexcroll-uncompressed.js」の31行目にある記述も確認し、さらに改善できないか
調べてみたいと思います。

本当に、ご丁寧にありがとうございました。

回答No.2

caitsith_goo

いまこの質問を見て興味をもったので、fleXcrollをダウンロードしてみました。
「flexcroll-uncompressed.js」をざっと見ただけなので違う可能性もありますが、
「flexcroll」のJavascript処理は、MacIE、safariには対応していないようです。

matryoshcaさんが作成されたHPは、
・「index.html」に「iframe」のサイズ指定の枠を作って、その中に子ファイルを表示する。
・子ファイルは、「index.html」の「iframe」で指定したサイズに納まるボックス（サンプルではid="mycustomscroll"となっている）を作成し、その中に表示するコンテンツを入れていて、このボックスにoverflowのスクロールバーが表示される。
・そのため、「index.html」の「iframe」内にスクロールバーが表示される。
ということでよろしいですか。
でしたら以下の方法で対応可能と思います。

MacIE、safariでの「overflow」の挙動について確認していないので、回答が分岐します。

▽overflowが動作する場合。
・「index.html」内では判別処理をする必要はありません。
　（「iframe」の「scrollbar=no」もそのまま。）
・子ファイル内で判別をして、MacIE、safariの場合に「flexcroll.js」を読み込まないようにする。
　（document.writeで<script>～</script>を書き出す必要はありません。）
・子ファイルのボックスに、MacIE、safariでも「overflow」が動作するようにCSSを設定する。
　（「overflow」のデフォルトのスクロールバーが表示されます）

▽overflowが動作しない場合。
・子ファイルのボックスに設定したサイズが有効になってしまうのであれば、判別して縦サイズを指定しないCSSの設定を行う。
　（document.writeでボックスのidを違うidに書き換えて、そのidに対しては縦サイズ指定をしない。）
・index.htmlでも判別を行い、「iframe」の「scroll=no」を「scroll=yes」に書き換える。

これらの処理を行えば、現状の構成のままで対応できるのではないかと思います。
確認していないこともあり回答としては不十分で申し訳ないのですが、エラー回避の参考になればと思います。

お礼

ありがとうございました！！
caitsith_gooの回答を参考の通りにいろいろ調べてやってみたら、
MacSafari、MacIEでデフォルトのスクロールバーが表示されました。
どうやら難しく考えすぎていたみたいですね。解決してすごく嬉しいです。
思い切って質問してみてよかったです。

本当にご丁寧にありがとうございました！

補足

caitsith_gooさん、ありがとうございます！
overflowの挙動についてですが、HPの構成？はそうなっています。
index.html内にiframeをつくり、中に表示するhtmlが8枚あります。
そのhtmlの中でスクロールが必要なページはcaitsith_gooさんのおっしゃる通りの作りで、

<html style="overflow-x:hidden;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="テキストテキスト" />
<title>news</title>
<link href="../css/△△.css" rel="stylesheet" type="text/css" />
<link href="../css/flexcrollstyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/flexcroll.js"></script>
</head>

<body>
<div id="mycustomscroll" class="flexcroll">
<div class="□□">・・・・・

という風な始まりで、中のコンテンツになってます。
overflowはiframeの中に表示するhtml内で、横スクロールは隠すにしています。
この場合、"overflowが動作する場合"というのに当てはまるということでしょうか？

質問ばかりで申し訳ありませんが、その場合について少しご質問させてください。
＞・子ファイル内で判別をして、MacIE、safariの場合に「flexcroll.js」を読み込まないようにする。　
（document.writeで<script>～</script>を書き出す必要はありません。）
→これは、最初に記載したブラウザ判別のJavascriptは必要ないということでしょうか？

＞・子ファイルのボックスに、MacIE、safariでも「overflow」が動作するようにCSSを設定する。
　（「overflow」のデフォルトのスクロールバーが表示されます）
→このCSSの設定についてですが、どのように書いたらいいのかなどが解らないので
調べたいと思うのですが、どのようなワードで検索したらよいか、または参考サイトなどが
あれば、教えていただけませんか？