JavaSciptを外部ファイルとして複数htmlファイルで利用したい

解決済

  • 質問者：chikonojyo
  • 質問日時：2001/02/19 03:54
  • 回答数：1件

JavaScriptでos、ブラウザ毎にフォントを一定化するスタイルシートをつくりました。このJavaSciptを外部ファイルにして複数のページから読み込ませるようにしたいのですが、XXX.jsファイルを読み込ませるための方法が分かりません。jsファイルの外部リンクの方法、またそれをhtmlページ内で適応させるためのタグも教えてください。
ちなみに今までは全ページに
<script language="JavaScript">
<!--
mac=(navigator.appVersion.indexOf('Mac')!=-1)?true:false;
ie=(navigator.appName.charAt(0)=="M")?true:false;
document.write("<STYLE TYPE='text/css'><!--")
if(mac){
//FOR MACINTOSH IE NS
document.write(".e9{font-size:9px}")
document.write(".e10{font-size:10px}")
document.write(".e12{font-size:12px}")
document.write(".j9{font-size:9px}")
document.write(".j10{font-size:10px}")
document.write(".j12{font-size:12px}")
(中略)
//-->
</script>
を記載し、それぞれ<div class="e12">～</div>で挟んでいました。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「HTML サイズ」に関するQ&A： Excelで作ったhtmlファイルのサイズを縮小したい

さらに表示

「ブラウザ サイズ」に関するQ&A： ブラウザのフォントサイズ変更

「JavaScript Mac」に関するQ&A： macのIE5でのjavascript

「フォント スタイルシート」に関するQ&A： スタイルシートのフォントの変更について

A 回答 (1件)

No.1ベストアンサー

  • 回答者： sasadora
  • 回答日時：2001/02/19 09:29

<SCRIPT SRC="xxx.js">


</SCRIPT>
としたらよいのではないでしょうか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

有り難うございます。一度やってみます。

通報する
お礼日時：2001/02/20 02:12

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aと関連する良く見られている質問

Q＜ｔｄ＞の中を移動する、外部JavaScript書き出しのdocument.write

質問タイトルの内容が可能なことなのかどうかもわかりません…（TT）
何卒よろしく切にお願い申し上げます…

やりたいことは、２列テーブルの左部分の範囲を
上下に移動する読み込みmenu.jsです。

現在、営業ツールサイトを制作しています。メニュー部分の
更新が頻繁なのですが、なんとなくフレームを使いたくなかったので、
メニュー部分を外部JavaScript（menu.js）のdocument.write書き出し(?)で
読み込むことにしました。

発注者の希望でalign="center"で真ん中寄せしたレイアウトで
テーブル２列の右に営業ツール一覧テーブル、左にmenu.jsを
呼び出しているのですが営業ツール一覧がかなりロングなことに
なってしまいました。そこで、フローターメニュー（？）の様に
スクロールにくっついてくると素敵だ！と思いました。

しかし検索すればするほど、出てくるのは低位置に留まるタイプの
フローターがメイン…。つまりフローターの位置はXYであらかじめ
決まっている感じが…。（というかソースを見て私が理解できたのが
そうゆうタイプのものでした…動きがフェードイン・アウトする
感じのものは理解不可能…）

このまま記述すると、align="center"のテーブルはウィンドウリサイズで
さっさ移動する、駄菓子菓子フロータメニューは頑なにXY値に留まるから
おかしなことになる。

嗚呼、すみません…なんだか混乱してきてしまいました。。。。。。

やりたいことは、align="center"のテーブルに２列の左部分の範囲を
上下に移動する読み込みmenu.jsです！！

不勉強、もしくは検索能力不足ですみません！！！

何卒、何卒宜しくお願い申し上げますっ！！！

質問タイトルの内容が可能なことなのかどうかもわかりません…（TT）
何卒よろしく切にお願い申し上げます…

やりたいことは、２列テーブルの左部分の範囲を
上下に移動する読み込みmenu.jsです。

現在、営業ツールサイトを制作しています。メニュー部分の
更新が頻繁なのですが、なんとなくフレームを使いたくなかったので、
メニュー部分を外部JavaScript（menu.js）のdocument.write書き出し(?)で
読み込むことにしました。

発注者の希望でalign="center"で真ん中寄せしたレイアウトで
テーブル２...続きを読む

Aベストアンサー

テーブル自体をスクロールしないで、メニュー、ツールのみをスクロールするように変更してみました。
No5の書き込みで書いたやつです。（ヘッダーとフッターはoverflowの指定はしていませんが・・・）

ロード時にスクロールバーが必要かどうか判定を行っています。
短いバージョンのメニューと長いバージョンのメニューで試してみてください。

以下ソースです。
<HTML>
<head>
<script type="text/javascript">
//↓メニューおよび営業ツールのスクロールを表示するかどうか
function ViewScroll() {
　　MenuWidth = document.getElementById("menu").offsetWidth;
　　MenuHeight = document.getElementById("menu").offsetHeight;
　　MenuDivWidth = parseInt(document.getElementById("menuDIV").style.width);
　　MenuDivHeight = parseInt(document.getElementById("menuDIV").style.height);
　　ToolWidth = document.getElementById("tool").offsetWidth;
　　ToolHeight = document.getElementById("tool").offsetHeight;
　　ToolDivWidth = parseInt(document.getElementById("toolDIV").style.width);
　　ToolDivHeight = parseInt(document.getElementById("toolDIV").style.height);
　　
　　//初期化（スクロールを隠す）
　　if (document.all) {
　　　　//IE
　　　　document.getElementById("menuDIV").style.overflowX = "hidden";
　　　　document.getElementById("menuDIV").style.overflowY = "hidden";
　　　　document.getElementById("toolDIV").style.overflowX = "hidden";
　　　　document.getElementById("toolDIV").style.overflowY = "hidden";
　　} else {
　　　　//IE以外
　　　　document.getElementById("menuDIV").style.overflow = "hidden";
　　　　document.getElementById("toolDIV").style.overflow = "hidden";
　　}
　　
　　if (MenuWidth > MenuDivWidth) {
　　　　//メニューの幅が、メニューDIVの幅を超えたとき（スクロールを出す）
　　　　if (document.all) {
　　　　　　//IE
　　　　　　document.getElementById("menuDIV").style.overflowX = "scroll";
　　　　} else {
　　　　　　//IE以外
　　　　　　document.getElementById("menuDIV").style.overflow = "scroll";
　　　　}
　　}
　　
　　if (MenuHeight > MenuDivHeight) {
　　　　//メニューの高さが、メニューDIVの高さを超えたとき（スクロールを出す）
　　　　if (document.all) {
　　　　　　//IE
　　　　　　document.getElementById("menuDIV").style.overflowY = "scroll";
　　　　} else {
　　　　　　//IE以外
　　　　　　document.getElementById("menuDIV").style.overflow = "scroll";
　　　　}
　　}
　　
　　if (ToolWidth > ToolDivWidth) {
　　　　//ツールの幅が、ツールDIVの幅を超えたとき（スクロールを出す）
　　　　if (document.all) {
　　　　　　//IE
　　　　　　document.getElementById("toolDIV").style.overflowX = "scroll";
　　　　} else {
　　　　　　//IE以外
　　　　　　document.getElementById("toolDIV").style.overflow = "scroll";
　　　　}
　　}
　　
　　if (ToolHeight > ToolDivHeight) {
　　　　//ツールの高さが、ツールDIVの高さを超えたとき（スクロールを出す）
　　　　if (document.all) {
　　　　　　//IE
　　　　　　document.getElementById("toolDIV").style.overflowY = "scroll";
　　　　} else {
　　　　　　//IE以外
　　　　　　document.getElementById("toolDIV").style.overflow = "scroll";
　　　　}
　　}
}

</script>
</head>
<!--ロード時にスクロールバーを表示するかどうかを決定-->
<body onLoad="ViewScroll()">

<table width="750" border="1" cellspacing="0" cellpadding="0" align="center" bgcolor="#909090">
<tr>
<td colspan="3" align="center" valign="top" bgcolor="00ff00">
　　　　ヘッダーをJavascriptで呼んできてます。
</td>
</tr>
<tr>
<!--テーブルに高さをつけました。サイズは適当に変えてください-->
<td align="left" valign="top" width="230" height="500">
<!--DIVに高さと幅ををつけました。サイズは適当に変えてください（メニューテーブルと同じサイズにしてください）-->
<div id="menuDIV" style="top:0px; left:0px; width: 230px; height: 500px; position:relative; background-color: #ff0000; overflow: scroll;">
<!--スクロールバーを表示するかどうか判定するためにもうひとつDIVをはさみました-->
<div id="menu">
メニューをJavascriptで呼んできてます。
どっこい多分ここで呼ぶmenu.jsのテーブルが長いのか、
スクロールするとなぜか底なし沼になります…
</div>
</div>
</td>
<td width="10"></td>
<!--テーブルに高さをつけました。サイズは適当に変えてください。-->
<td align="left" valign="top" width="505" height="500">
<!--DIVに高さと幅ををつけました。サイズは適当に変えてください（ツールテーブルと同じサイズにしてください）-->
<div id="toolDIV" style="top:0px; left:0px; width: 505px; height: 500px; position:relative; background-color: #ffff00; overflow: scroll;">
<!--スクロールバーを表示するかどうか判定するためにもうひとつDIVをはさみました-->
<div id="tool">
<!--↓のDIVは営業ツールの高さ10000ピクセルにするために名義的に入れているもので、削除してください-->
<div style="height: 10000px">ここにローングな営業ツールが入ってます。</div>
<!--↑のDIVは営業ツールの高さ10000ピクセルにするために名義的に入れているもので、削除してください-->
</div>
</div>
</td>
</tr>
<tr>
<td colspan="3" align="center" valign="top" bgcolor="#0000ff">
　　　　フッターをJavascriptで呼んできてます。
</td>
</tr>
</table>
</body>
</HTML>

テーブル自体をスクロールしないで、メニュー、ツールのみをスクロールするように変更してみました。
No5の書き込みで書いたやつです。（ヘッダーとフッターはoverflowの指定はしていませんが・・・）

ロード時にスクロールバーが必要かどうか判定を行っています。
短いバージョンのメニューと長いバージョンのメニューで試してみてください。

以下ソースです。
<HTML>
<head>
<script type="text/javascript">
//↓メニューおよび営業ツールのスクロールを表示するかどうか
function ViewScroll() {
...続きを読む

他の回答も見る

Qif(document.all && navigator.appVersion.indexOf('Mac')!=-1)returnの意味

よろしくお願いします。
JavaScriptの勉強をしているのですが、参考にしている書籍に以下の構文が出てきまして、それの意味が分からなくて悩んでいます。

//MacIE4,5バグ 回避
if(document.all && navigator.appVersion.indexOf('Mac')!=-1)return

//以降に記してあるとおり、OSがMacintoshだった場合に何らかの処置を行うプログラムなのは分かるのですが・・。
navigator.appVersion.indexOf('Mac')!=-1の部分は、「navigator.appVersion.indexOf('Mac')が1ではなかったら、Macユーザーであるということ、で、falseが返されるのでしょうか？
しかし、そもそもnavigatorオブジェクトはブラウザの種類のことではないのか？と混乱してしまっています。
また、document.allがどのような役割を果たしているのかも分かりません。なぜここでdocument.allが出てくるのでしょうか？

どなたか分かる方いらっしゃいましたら、ご教授宜しくお願いします。

よろしくお願いします。
JavaScriptの勉強をしているのですが、参考にしている書籍に以下の構文が出てきまして、それの意味が分からなくて悩んでいます。

//MacIE4,5バグ 回避
if(document.all && navigator.appVersion.indexOf('Mac')!=-1)return

//以降に記してあるとおり、OSがMacintoshだった場合に何らかの処置を行うプログラムなのは分かるのですが・・。
navigator.appVersion.indexOf('Mac')!=-1の部分は、「navigator.appVersion.indexOf('Mac')が1ではなかったら、Macユーザーであるということ...続きを読む

Aベストアンサー

「document.all」は昔はIEにだけ存在するオブジェクトだったのでIEであるかどうかの判定に使われました。

今ではOperaやNetscape等でもIEへの互換の為に存在するのでIEかどうかの判定に使われる事は減ってきています。
IEであるかどうかの判定ではなく、純粋にdocument.allが在る（使える）かという判定にはもちろん使用されますが。

「navigator.appVersion」は確かにブラウザの種類なんですが、実際にはOS名も含まれていたりすのでOSの判定にも使われたりします。

また、 != -1 というのは　indexOf関数の結果が 0～なら文字列が見つかったという意味（真偽ではなく、見つかった位置を返す関数）になるのでこういう比較式を使用しています。
（1でなかったらMacユーザという解釈はちょっと違います。）

参考URL：http://www.openspc2.org/JavaScript/ref/

他の回答も見る

Qdocument.writeをinput type="text"の value値に

超初心者です。
下記の式にてPHPよりjavascriptにてHTMLに書き出しできましたが
<script type="text/javascript" src="./jsphptest.php?long=3" ></script>この値をHTMLのinput type="text"の value値にデフォルトとして入れたいと思っていますが、どうすればできるのか分かりません。できればボタン等を介さずページをロードすればこPHPからjavascriptのdocument.write値がvalue値に入って欲しいと思っています。簡単なようで難しいことなのでしょうか？どうかご教授よろしくお願いいたします。

Aベストアンサー

それからどうでもいいけど
htmlのタグの順番が適当ですね。

他の回答も見る

Q外部ＪａｖａＳｃｒｉｐｔでのdocument.writeについて

今、JavaScriptを使ってＨＰを作ろうと思っています。
そこで、外部ファイルとしてJavaScriptを作り、ＨＴＭＬ内でsrcを使って読み込んでいます。そのときに問題が発生しているのですが、外部ファイルでdocument.writeを使うと処理が戻ってきません。
例）
....
xxxx="テストJavaScript";
document.write(xxxx);
....
ちなみに、ＩＥで実行した場合はきちんと表示し、NetScapeで実行した場合にずっと通信中になってしまいます。
これはNetScapeの仕様なのでしょうか。
分かりにくい説明で申し訳ありませんが、どなたかご回答お願い致します。

Aベストアンサー

もう、知っているかもしれませんが、ページを読み込んだ後に
document.write()するのは反則ですのでやめておきましょう。
また、document.write()の正しい使い方は以下の通りです。

document.open();
document.write("hoge");
document.close();

そして外部jsファイルは
<script>～</script>や<!--//-->などを書かずに保存していますか？
また外部jsファイルをHTMLから読み出すときは

<script type="text/javascript" src="ファイルのURL"></script>

としましょう。
結構、初歩的なことですが、見直してみてください。

他の回答も見る

QJavaScript document.writeについて

<ul id="font-size-change">
<li><a href="javascript:void(0)" onclick="setActiveStyleSheet('default'); return false;" />標準</a></li>
<li><a href="javascript:void(0)" onclick="setActiveStyleSheet('large'); return false;" />大</a></li>
</ul>

上記を、JavaScriptの「document.write」を使って表示しようと、下記のコードを書きました。

function fontSizeChange(){
document.write('<ul id="font-size-change">');
document.write('<li><a href="javascript:void(0)" onclick="setActiveStyleSheet');
document.write("('default'); ");
document.write('return false;" />標準</a></li>');
document.write('<li><a href="javascript:void(0)" onclick="setActiveStyleSheet');
document.write("('large'); ");
document.write('return false;" />大</a></li>');
document.write('</ul>');
}

とっても効率が悪い記述だと思うのですが、
もっとシンプルで効率の良い書き方はないでしょうか。

よろしくお願いします。

<ul id="font-size-change">
<li><a href="javascript:void(0)" onclick="setActiveStyleSheet('default'); return false;" />標準</a></li>
<li><a href="javascript:void(0)" onclick="setActiveStyleSheet('large'); return false;" />大</a></li>
</ul>

上記を、JavaScriptの「document.write」を使って表示しようと、下記のコードを書きました。

function fontSizeChange(){
document.write('<ul id="font-size-change">');
document.write('<li><a href="javascript:void(0)" onclick="setActive...続きを読む

Aベストアンサー

document.write("<ul id='font-size-change'>
<li><a href='javascript:void(0)' onclick='setActiveStyleSheet(\"default\"); return false;' />標準</a></li>
<li><a href='javascript:void(0)' onclick='setActiveStyleSheet(\"large\"); return false;' />大</a></li>
</ul>");
これでいけますよ。
囲むときは
"→'→\"
で囲めます。
改行したいなら他の回答者さんのように+を使って区切ってくださいね

他の回答も見る
ページトップページトップ

Q質問する（無料）

人気Q&Aランキング

おすすめ情報