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ベストアンサー
- 回答日時:
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');
}
と足したらいいということでしょうか?
本当に申し訳ありません。素人なもので、それっぽいものを見つけて、解らないことは
調べてはいるんですが・・・。その関わり方などがよく解っていないんです。
よかったら、教えていただけませんか?
No.2
- 回答日時:
いまこの質問を見て興味をもったので、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さん、ありがとうございます!
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の設定についてですが、どのように書いたらいいのかなどが解らないので
調べたいと思うのですが、どのようなワードで検索したらよいか、または参考サイトなどが
あれば、教えていただけませんか?
ありがとうございました!!
caitsith_gooの回答を参考の通りにいろいろ調べてやってみたら、
MacSafari、MacIEでデフォルトのスクロールバーが表示されました。
どうやら難しく考えすぎていたみたいですね。解決してすごく嬉しいです。
思い切って質問してみてよかったです。
本当にご丁寧にありがとうございました!
No.3
- 回答日時:
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.4
- 回答日時:
追記です。
「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の理解をはかりたいと思いました。
いろいろ試してくださって、教えてくださって、本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jsで、switch文で書かれた分をif文にできませんか。 1 2022/07/28 15:10
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript jsで、配列内の文章を改行する際どのようにすればいいですか。 3 2022/07/05 20:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
別ファイルのfunctionの読み込み方
-
JavascriptとJqueryを混在し記述
-
Dreamweaver で 外部JSを読み込...
-
条件分岐で、読み込む外部スク...
-
レンタルサーバーでjavascript...
-
外部ファイルJS参照を全て消さ...
-
プルダウンメニューを別ファイ...
-
IE8で外部jsファイルが読み込め...
-
外部読み込みで動かないときの...
-
ひとつの外部ファイルに複数の...
-
JavaScriptのエラー ( 関数の...
-
javascriptについて教えてくだ...
-
外部ファイル(js)の呼び出し方...
-
javascriptとApacheの設定
-
<a href="#" …>の意味を教えて...
-
pythonのWebスクレイピングでfi...
-
Safariで<iframe>のinnerHTMLを...
-
bodyにidをつける理由は何ですか?
-
JavaScriptでiframeの内容を「...
-
function の return 値を表示し...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
別ファイルのfunctionの読み込み方
-
cssにjavascriptを入れる?呼び...
-
javascriptファイルは1つに統...
-
複数のJavascriptを1つのscrip...
-
Dreamweaver で 外部JSを読み込...
-
javascriptとApacheの設定
-
JavaScriptのエラー ( 関数の...
-
JavascriptとJqueryを混在し記述
-
ひとつの外部ファイルに複数の...
-
プルダウンメニューを別ファイ...
-
【Google Apps Script】「ライ...
-
外部ファイルを読み込ませるた...
-
JavaScriptで他のファイルのhtm...
-
ホームディレクトリを示すチル...
-
javascriptのalertで文字化けが...
-
外部読み込みで動かないときの...
-
条件分岐で、読み込む外部スク...
-
呼出したjsファイル内で他jsフ...
-
メールフォーム、受信メールの...
-
<script src="">読み込まない
おすすめ情報