自作のJavaScriptを既存のページで動作させる

このQ&Aのポイント
  • 自作のJavaScriptを既存のページで動作させる方法について
  • 外部のHTMLページを読み込み、JavaScriptを動作させる方法について
  • Internet Explorerでの実装について
回答を見る
  • ベストアンサー

自作のJavaScriptを既存のページで動作させる

自作のJavaScriptを既存のページで動作させる 自作のjavascriptをウェブ上で公開されているページに含めて動作させることを考えています。javascriptの動作は、ページ内の画像などをクリックするとalert関数が出るようなものです。 自分で少し考えたものとしては、自作のHTMLページでjavascriptを読み込んでおき、そのHTMLの中で外部のHTMLページを読み込むようなことはできないかなと考えています。 外部ページの読み込みはフォームの中にURLを入力して行えるといいかなと思います。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <!--このjavascriptを読み込んだページで動作させる--> <script type="text/javascript"> var Handler = function (evt) { var node = evt./*@if (1) srcElement @else@*/ target /*@end@*/; var doc = node.ownerDocument; var win = doc./*@if (1) parentWindow @else@*/ defaultView /*@end@*/; if(node.tagName=="IMG"){ //imgタグを検知したらアラート alert("これは画像です"); } </script> </head> <body> <!--外部のページを読み込む処理--> <form id="f1"> <input type="text" name="url" value="http://" size="60" /> <input type="button" value="読み込み" /> </form> </body> <script src="自作のjavascript" type="text/javascript" ></script> </html> 自作のjavascriptをWeb上のページで動作できれば、上記のような方法と全く別でも構いませんので、どなたかご存知の方よろしくお願いいたします。 ブラウザはInternetExplorerを考えています。

質問者が選んだベストアンサー

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.3

> 自作のjavascriptをWeb上のページで動作できれば、上記のような方法と全く別でも構いませんので、 ブックマークレットにすれば、IE でも実行できるとは思います。 あと、IE だけをサポートするなら条件付きコンパイルをする必要はない…ような。 if (1) なら、IE は絶対に else 後の Statement にいきません。

yukisin19
質問者

お礼

お礼が遅くなってしまって申し訳ありません。 質問していた内容に追加の機能を加えたjavascriptを考えていました。 ブックマークレットのこと、教えて頂きありがとうございます。 無事作成することができました。 外部サーバにjavascriptを置いてアクセスさせる方法にしました。 あとはページ遷移の度にブックマークを押さなければならないのを改善できたらと考えています。(ブックマークレットで出来るかはまだわからないですが・・・) 本当に助かりました。 ありがとうございます。 ご指摘の条件付きコンパイルの部分ですが、たしかにelse以下は要りませんでしたね。 重ねて、ありがとうございます。

yukisin19
質問者

補足

後学のため・・・ 以下のコードをブックマークのURLに書いて登録 javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="サーバに置いた自作のjavascriptへの絶対パス";document.body.appendChild(s)})();       ↓ 自作のjavascriptを適用したいページで登録したブックマークをクリック。       ↓ そのページで自作のjavascriptが適用される。

その他の回答 (3)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.4

>自作のJavaScriptを既存のページで動作させる とのことですが、すでにご提示のスクリプトは別ドキュメントでも動作するように意図なさっているとお見受けしますので(そこまで考慮したコーディングは私には無理)、そのまま対象ドキュメント(または要素)に適用すればいいだけではないのですか? iframeを用いるのかajaxで読込むのか不明ですが、対象要素にイベントハンドラーとして設定するだけ。(クロスドメイン対応はサーバ側で行っているのでしょうか?) No3様がすでにご提案なさっているように、ブックマークレットにしてしまう案は簡便でよさそうですね。 同様に、IE限定というのであれば、わざわざ条件付コンパイルにする必要もなさそう。 よく見ると、ご提示の条件付コンパイル部分が(失礼ながら)不完全なようにも見えますが、はずしてしまうのなら関係ないですね。

yukisin19
質問者

お礼

お礼がおそくなってしまい申し訳ありません。 No.3様のところで書かせていただいたように、ブックマークレットという形で実現できました。 回答ありがとうございました。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

補足 「InternetExplorer」じゃありませんが「火狐」というブラウザーには、 「潤滑油猿」というアドオンソフトがあって、これを使えば、ブラウザーに ロードしたページに、あなたの追加 javascript を実行させる事が出来ます。 フォームなんていりません。 http://mozilla.jp/firefox/ http://firefox.geckodev.org/index.php?Greasemonkey#l73084ea

yukisin19
質問者

お礼

補足にお礼していて申し訳ありませんでした。 回答ありがとうございました。

yukisin19
質問者

補足

回答ありがとうございます。 「火狐」で「潤滑油猿」( 当て字(笑) )使って上手く動作しました。 しかし、今回の機能だけだと良かったのですが、自作javascriptではActiveXをオブジェクトとしてhtmlページに埋め込ませて使う予定のため、残念ながら「火狐」だと都合が悪いです。(質問に書いてなくて申し訳ありません。) IEで「潤滑油猿」が使えるとよかったんですが・・・。 やはりNo.1で回答頂いてましたようにPHPを使ってやるしかないのですかね。 PHPはほとんどやったことがないので、これから勉強したいと思います。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

javascriptで他のサイトのページを読み込むことは出来ません PHPでやりましょう。

関連するQ&A

  • firefox+xhtml+javascript

    お世話になっております。 divをweb上でドラッグできるスクリプトを組みました。 Opera9.6,IE6では動いているのですが、Firefoxでは、ある条件下でしか動きません。 ある条件とは、DOCTYPEの宣言がされていないことで、XHTMLにしようとDOCTYPEを宣言すると、動作しなくなってしまいます。 <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='ja'> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <meta http-equiv='Content-Script-Type' content='text/javascript' /> <title>test</title> <script type='text/javascript' src='FILENAME.js'></script> -------- <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'> を消せば動きます。 仮に、DOCTYPEをHTML4.1などにしても動きません。 クオートをシングルからダブルにしても同じです。 動かない状態でも、JS自体は読んで、onload関数の中は見に行っているようです(alertを埋め込んだらでたので) 可能性として、 外部ファイルのJSの書き方に問題があるのでしょうか? それとも、HTML側に問題があるのでしょうか? ソースを見なくても何か考えられることがあれば、教えてください。 よろしくお願いします。

  • htmlフォーム(javascript)が動作しません。

    htmlフォーム(javascript)が動作しません。 フォームの作成でクリックをするとあらかじめ表示されていた薄い文字(入力案内)が消えるようにしたいです。 何度か試してみましたが、うまく動作しません。 よろしければ、アドバイスをお願いします。 (この質問を打ち込む欄と同じ感じにしたいです。) 環境:Mac os10.06、Safari ツール:DreamweaverCS3 確認は、「ブラウザのプレビューで確認」をしています。 それと...バリデートをすると、inputタグで、「HideFormGuide(this)」属性はアクティブではない。。。」とコメントが出てしまいます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> バージョンをかえずに違う方法でエラーにならない方法がありましたらアドバイスをお願いします。 【HTML】 <input type="text" value="メッセージ" style="color:#999999; width:550px; height:200px; onfocus="HideFormGuide(this);" onblur="ShowFormGuide(this);"/> 【javascript】※<head>~</head>内に表示させています。 <script type="text/javascript"> var GuideSentence = 'メッセージ'; function ShowFormGuide(obj) { // 入力案内を表示 if( obj.value == '' ) { obj.value = GuideSentence; obj.style.color = '#808080'; } } function HideFormGuide(obj) { // 入力案内を消す if( obj.value == GuideSentence ) { obj.value=''; obj.style.color = '#000000'; } } </script>

  • JavaScriptを使ってWebページにメッセージを表示させる

    html内に<div id="info"></div>と書き、それをjavascriptのプログラムから「こんにちは」というメッセージを表示させるようにしたいのですが、何度試しても製作途中の段階でdocument.getElementById(id) has no propertiesというエラーが出てしまいます。(←Firebugでエラーが検出されます) どこが間違っているのか教えていただけると助かります。 ================= HTML ================= <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>map</title> <link rel="stylesheet" type="text/css" href="common/css/main.css" /> <script src="common/js/main.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="info"></div> </body> </html> ================= JavaScript ================= var map window.onload = function() { load(); } function _d(id, htmlTxt) { document.getElementById(id).innerHTML = htmlTxt; } _d("info","こんにちは");

  • 2つのjavascript 統合

    javascript初心者です。お願いします。 DTD HTML 4.01 Transitionalで2つのjavascriptがあるので<HEAD>内に <script type="text/javascript"> <!-- ~~~~~ // --> </script> <script type="text/javascript"> <!-- ~~~~~ // --> </script> こんな場合に、真ん中の </script> <script type="text/javascript"> を削除して <script type="text/javascript"> <!-- ~~~~~ // --> <!-- ~~~~~ // --> </script> こんな風にしちゃっても大丈夫ですか? 動くけどやっぱダメですか? 削除して統合した方が良いですか?

  • XHTMLで外部JSファイルを読み込むには?

    XHTMLで外部JSファイルを読み込むには? よろしくおねがいします。 初歩的ですみません 当方 XHTML+CSSでページを作成し JSファイルを読み込みページのTOPへ移動するスクリプトを 作ったのですがXHTML上では上手くうごいてくれません。。。。 ソースはこちらです。 -------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- 上記のソースは普通に動作するのですがDOCTYPEの宣言を ------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- にすると・・・動いてくれません。下段のソースを利用したいのですが 何かJSファイルを読み込む方法はありますでしょうか?? アドバイス頂ければ幸いです。よろしくお願いいたします。

  • javascriptの動作について

    こんばんは。 直接アドレス指定などしてきたものについては、 トップページへ飛ばすことをしようと思ったのですが、 以下の記述だと、IE8では動作しましたが、GoogleCrome(11.0.696.77)、firefox(3.6.0)、safari では動作しませんでした。(location.hrefがダメなんでしょうか?) 解決策・回避策などあれば教えてください。 よろしくお願いします。 <script language="JavaScript" type="text/JavaScript"> <!-- var url; url = document.referrer; if(url != 'http://xxxxxxxxx'/){ location.href('http://xxxxxxxxxxxxx'); } // --> </script>

  • 外部javascriptファイルをjavascriptから動的に呼び出したい

    呼び出し元のURLによって動作を変えたいJAVASCRIPTがあります。 普段外部のJAVASCRIPTを呼び出すときはよくこうするのですが <script type="text/javascript" src="js.php?key=url"></script> これでは「key=url」が固定になってしまいます。そこで下記のように <script> var commentname=document.URL; var str=encodeURIComponent(commentname); document.write('<script type="text/javascript" src="read.php?key=',str,'"><\/script>'); </script> document.writeを使って無理やり外部Javascriptファイルの呼び出しスクリプトを書いているのですが、この書き方はどうもエレガントさにかけるというか、いまいち気に入りません。 もっとほかに良い方法がある気がするのですが、調べてもわかりませんでした。おわかりになる方がいらっしゃったらご教示頂けないでしょうか。

  • WEBページへのJavascriptの反映

    WEBページにJavascriptが反映されません。 Eclipseを使用しているのですが、httpプレビューにも反映されていません。 コードの位置に、;だけ残っていたりします。 作成は、静的WEBプロジェクトで、エンコードの設定はUTF-8にしています。 コードもおそらく間違えてはいないと思うのですが・・・ ご教授頂ければ助かります。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>index</title> </head> <body> <script type="text/javascript"> <!-- var x 123; if (x % 2 == 0) document.write(x + "は偶数"); else document.write(x + "は奇数"); //--> </script> </body> </html>

  • JavaScriptの件

    初心者用JavaScriptの本で下記のソースを本の通り打ち込んだと思うのですが、何度打ちなおしても「ページにエラーが発生しました」が出てしまいます。どなたかどこが間違っているのか教えて下さい。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>関数の練習</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language="JavaScript"> <!-- function kotae(){ var yama="富士山"; alert(yama); } //--> </script> </head> <body> <h3>問題</h3> 日本で一番高い山は? <BUTTON onClick="kotae()">答えを見る</BOTTON> </body> </html>

  • PHPとJavascriptの連携について

    PHP・Javascriptの初心者です。 PHPで設定された、配列のデータをJavascriptで作成した関数の渡したいのですが どうすればいいのでしょうか? 以下にサンプルを作成したのですが PHPで設定した、配列 $name が Javascriptに渡せません。 何が悪いのですか? 教えてください。 よろしくお願いします。 -sample.php- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- CSS: implied media="all" --> <link type="text/css" rel="stylesheet" href="css/websyslogin.css" /> <!-- JavaScript loading --> <script src="js/websysdebug.js"></script> <script type="text/javascript"> function sysdebug( ss ){ alert( "Login -> "+ss ); } </script> <!-- タイトル --> <title>Vware Web System(PHP) </title> </head> <body> <?php $name = array(); $name[0] = "ABC"; $name[1] = "BCA"; ?> <input type="button" value="TEST" name="debug" id="debug" onclick="sysdebug(' <?php print $name[0]; ?> ');" /> <script type="text/javascript"> for( i=0;i< 2;i++ ) { ss = ' <?php print $name['+i+']; ?> '; alert( ss ); } </script> </body> </html>

    • ベストアンサー
    • PHP