javascriptを別ファイルにして、HTMLファイルから呼び出したい

解決済

質問者：yog21#2
質問日時：2007/07/27 13:45
回答数：6件

４つのリンクがあり、
それぞれサイズを指定して小窓を出したいと思い
調べたら以下のソースがありましたので、出来ました。

<a href="javascript:void(0);" onclick="window.open('表示するペ－ジのURL','○○',
'width=横サイズ,height=縦サイズ,resizable=リサイズボックス有無,menubar=メニュ－バ－有無,status=ステ－タスバ－有無,location=ロケ－ションバ－有無,scrollbars=スクロ－ルバ－有無,toolbar=ツ－ルバ－有無,');">リンク1</a>

これをHTMLファイルに直接入れるのではなく
JavaScriptファイルとして別にしたいのと、
HTMLファイルで「リンク1」という文字にそのJavaScriptを適用（呼び出す？）するには、どうしたらいいのでしょうか？

「リンク1」「リンク2」「リンク3」…
と、リンク先はそれぞれです。

よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.6ベストアンサー

回答者： leap_day
回答日時：2007/07/28 10:28

こんにちは

あぁ～なるほど
htmlファイルをクリックして表示させてるんですね？

それでしたら「セキュリティー保護の為～～」のバーをクリックして
「ブロックされているコンテンツを許可」
「セキュリティーの警告　このファイルでアクティブコンテンツを実行しますか？」を「はい」にすればとりあえずは見れると思いますけど・・・

- 0
- 件

通報する

No.5

回答者： leap_day
回答日時：2007/07/27 19:03

こんにちは

こういう感じのもの？

[test.js]
window.onload = function() {

link1 = document.getElementById("a1");
link1.href = "javascript:win('test0.html','500','300')";

link2 = document.getElementById("a2");
link2.href = "javascript:win('test1.html','600','600')";

link3 = document.getElementById("a3");
link3.href = "javascript:win('test2.html','300','300')";

}

function win(url,width,height) {
window.open(url,'win1',"width="+width+",height="+height+",resizable=no,menubar=no,status=no,location=no,scrollbars=no,toolbar=no");
}

[html]
<script type="text/javascript" src="./test.js"></script>

<a id="a1"> リンク1</a>
<a id="a2"> リンク2</a>
<a id="a3"> リンク3</a>

No.3様のやってみましたが出来るようですね～～
何が違うんだろう？
『それぞれサイズ指定』とあったので投稿しましたので解決したら組み合わせて使ってみてください
（僕のはステータスバーに色々情報が出ますので・・・
javascript:win('test2.html','300','300');
のように）

この回答への補足

ありがとうございます～～
あれ？出来ました？？
それでは、こちらのPCの設定か何かでしょうか・・・
HTMLファイルを開くと
「セキュリティ保護のため、～～～」
という黄色いバーが上に出てきますが、
「ブロックされているコンテンツを許可」
を選べば出来るはずですよね？
それでも
リンク１リンク２リンク３
と横並びになってるだけになっちゃいます・・・

お忙しい中、本当にすみません・・・

補足日時：2007/07/27 20:38

通報する

- 0
- 件

通報する

No.4

回答者： yambejp
回答日時：2007/07/27 17:11

コピペしましたね？

この掲示板からコピーしたものを張るとごみがつくようです。
openWindow("ttp://・・・")

のところを一度削除した上で手入力でうちなおしてください・・・・

この回答への補足

ごめんなさい～
コピペしました。
メモ帳にコピペしてからまたコピペしたんですけどダメなんですね・・・

とりあえずすべて手打ちしたら、すんなり保存できました^^
ありがとうございました。
でもHTMLの方でリンクが貼れてないんです。
文字だけ出てます。
HTMLとJSファイルは同じディレクトリです。

難しいというより何故なのか全くわかりません…
わかる方ってすごいですね。

補足日時：2007/07/27 17:44

通報する

- 0
- 件

通報する

No.3

回答者： yambejp
回答日時：2007/07/27 14:43

javascriptを完全に外部にわかるのであればidを振って処理します。

//html
<html>
<head>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<a id="link1">リンク１</a>
<a id="link2">リンク２</a>
<a id="link3">リンク３</a>
</body>
</html>

//test.js
window.onload=function(){
var link1=document.getElementById('link1');
link1.setAttribute("href","javascript:void(0);");
link1.onclick=function(){openWindow("http://www.yahoo.co.jp")};
var link2=document.getElementById('link2');
link2.setAttribute("href","javascript:void(0);");
link2.onclick=function(){openWindow("http://www.google.co.jp")};
var link3=document.getElementById('link3');
link3.setAttribute("href","javascript:void(0);");
link3.onclick=function(){openWindow("http://www.goo.ne.jp")};
}
function openWindow(url){
newWin=window.open(url,'newWin','width=800,height=600,resizable=no,menubar=no,status=no,location=no,scrollbars=no,toolbar=no');
newWin.focus();
}

この回答への補足

できそう！
…と思いましたができませんでした（涙）
リンク１　リンク２　リンク３
にリンク貼れてなかったです。

text.jsを作成して保存するとき
「現在のエンコーディングではドキュメント内のすべての文字を正しく保存できません。UTF-8　またはこのドキュメント内の特殊文字をサポートするエンコードに変更してください。」
というのが出ました。
機種依存文字さがしましたが、なさそうなんですけど？？

何かおかしいのでしょうか？
何度もすみません。よろしくお願いします。

補足日時：2007/07/27 16:20

通報する

- 0
- 件

通報する

No.2

回答者： noname#39970
回答日時：2007/07/27 14:11

>JavaScriptファイルとして別にしたい

この回答への補足

その中身というか…
リンク一つ一つありますので
その一つ一つの呼び出し方がわからなかったんです。
ありがとうございました。

補足日時：2007/07/27 15:50

通報する

- 0
- 件

通報する

No.1

回答者： asx
回答日時：2007/07/27 13:56

◆JavaScriptファイル

function fnc_open(file) {
window.open(file, 'title', 'width=100, height=100, menubar=no, toolbar=no, scrollbars=yes');
}

◆HTML
<a href="javascript:fnc_open('link1.html');">リンク1</a>
<a href="javascript:fnc_open('link2.html');">リンク2</a>
<a href="javascript:fnc_open('link3.html');">リンク3</a>

こんなかんじで、「fnc_open('****')」の****部分にそれぞれファイル名を指定すればできます。