AjaxMailの使い方について

前へ 次へ
このQ&Aのポイント
  • AjaxMailを使用して、メールフォームをポップアップ表示したいが方法がわからない。
  • AjaxMailはAjaxを活用したフリーPHPメールフォームであり、リンクをクリックするとポップアップでメールフォームが表示される。
  • 質問者はメールフォームのスクリプトに対して、リンクのクリックと同時にデータをPOSTで送信したいと思っているが、うまくいっていない。
回答を見る
  • ベストアンサー

http://www.ajaxmail.jp/のAjaxmailを使用

http://www.ajaxmail.jp/のAjaxmailを使用いたしております。リンクをクリックするとメールフォームがポップアップで表示されるのですが、このフォームのスクリプトに対して最初のリンクのクリックと同時にPOSTでデータを送りたいと思っておりますがうまく行きません。 ソースは以下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>AjaxMail：Ajaxを活用したフリーPHPメールフォーム</title> <link rel="stylesheet" type="text/css" href="css/lightview.css" /> <script type="text/javascript" src="js/protoculous-effects-packer.js"></script> <script type="text/javascript" src="js/lightview.js"></script> </head> <body> <div style="margin:200px"> <form name="form1" action="http://xxxx.com/ajaxmail-utf-8/ajaxmail/sample.php" method="post"> <input type="hidden" name="str" value="xxxx@xxxx.xx.xx"> </form> <a href='JavaScript:document.form1.submit()' rel='iframe' title='送信フォームタイトル :: 送信フォーム説明文 :: width: 750, height: 600' class='lightview'>text1</a> </form> フォームをポップアップさせるJavaScriptとPOSTを制御するJavaScriptとの組み合わせの仕方がよくわかりません。 恐れ入りますがどなたかご教授頂けると幸いです

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

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

＝＝＝続き＝＝＝ <p><strong>内容</strong><br /> <textarea cols="50" rows="10" name="内容" id="内容"> </textarea> </p> <p><input type="submit" value="確認する"></p> </form> <script type="text/javascript" language="javascript"> function ajax_popup(no){ var form_data,Kanrisya_Mail; switch(no){ case 1: Kanrisya_Mail="hogehoge1@fuga.fuga"; form_data="1"; break; case 2: Kanrisya_Mail="hogehoge2@fuga.fuga"; form_data="2"; break; case 3: Kanrisya_Mail="hogehoge3@fuga.fuga"; form_data="3"; break; default: Kanrisya_Mail=""; form_data=""; break; } document.getElementById("E-mail").value=Kanrisya_Mail; document.getElementById("内容").value=form_data; Lightview.show({href:'#ajaxForm',rel:'inline',title:"送信フォーム", options:{autosize:true,topclose:true}}); document.observe('lightview:opened',function(){ new Spry.Widget.ValidationTextField("checkText1", "none", {validateOn:["change"]}); new Spry.Widget.ValidationTextField("checkText2", "email",{validateOn:["change"]}); }); } function ajaxsend(){ var form_data={"E-mail":document.getElementById("E-mail").value, "内容":document.getElementById("内容").value}; Lightview.show({href:'./ajaxmail/sendmail.php',rel:'ajax', options:{autosize: true,topclose:true,ajax:{parameters:form_data,}} }); } </script> </body> </html>

その他の回答 (6)

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

一応、test.phpだけですむように、試して見ましたが、lightviewに 限界がありました。どうしても３回目のポップアップで、lightview がエラーを吐いてしまい、最初のフォームのポップアップに戻せません。 このへんで、妥協するしかないかも．．．。 sendmail.phpの // 送信確認画面の表示(する=1, しない=0) $chmail = 0; // 送信後に自動的にジャンプする(する=1, しない=0) // 0にすると、送信終了画面が表示されます。 $jpage = 0; にします。 test.phpは <?php mb_language("japanese"); mb_internal_encoding("UTF-8"); header("Content-Type:text/html;charset=utf-8"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>PopupForm</title> <link rel="stylesheet" type="text/css" href="css/lightview.css" /> <link rel="stylesheet" href="./ajaxmail/SpryValidationTextField.css" type="text/css" media="all"> <script type="text/javascript" src="js/protoculous-effects-packer.js"></script> <script type="text/javascript" src="js/lightview.js"></script> <script src="./ajaxmail/SpryValidationTextField.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> </script> </head> <body> <?php /* DB読み込み処理？？ */ ?> <ul> <li>物件１<input type="button" value="問い合わせ" onclick="ajax_popup(1);"></li> <li>物件２<input type="button" value="問い合わせ" onclick="ajax_popup(2);"></li> <li>物件３<input type="button" value="問い合わせ" onclick="ajax_popup(3);"></li> </ul> <form style="display:none;" id="ajaxForm" method="POST" action="javascript:ajaxsend()"> <p id="checkText1"> <strong>お名前</strong><br /><input type="text" size="40" name="お名前" id="お名前"> <span class="textfieldRequiredMsg">お名前が未入力です</span> </p> <p id="checkText2"> <strong>E-mail</strong><br /> <input type="text" size="40" name="E-mail" id="E-mail" value=""> <span class="textfieldRequiredMsg">メールアドレスが未入力です</span> <span class="textfieldInvalidFormatMsg">メールアドレスをご記入ください</span> </p> ＝＝＝続く＝＝＝

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

＜フォームの確認ボタンを押して確認画面表示→送信ボタン→送信確認画面まで全てポップアップ内で遷移して欲しい＞ となると、「ポップアップ内で遷移して欲しい」＝「ページ遷移させない」という 事だから、sample.phpでsendmail.phpにサブミットするのでなくここでもajaxリク エストを使うことになり、ややこしくなります。そもそもsample.phpを介在する 必用はないので、test.phpだけですむようざくっと作り変えた方が楽です。 No.2でちらっと書きましたが、Lightviewのinlineオプション使えば、ページ 内のフォームもポップアップできます。フォームを初期状態で」display:none; にしておいて、ポップアップ時に表示して、sendmail.phpとajaxすればよいかな。

scowbee
質問者

お礼

ありがとうございます。むむむ。当方初心者なのでsample.phpを介在しないでとなるとハードルが高そうです。。そもそもsample.phpとsendmail.php間の動きも良くわかってないしまつなので。Lightviewのinlineオプションについても検索してみましたがなかなかわかり良い情報も無く。挫折しそうです。勝手なお願いばかりで恐縮なのですがサンプルソースでヒントを頂けると大変ありがたいですが如何でしょう。自分でも引き続き勉強してみますがお手つきの時で結構ですのでご検討を。

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

続き <form id="ajaxForm" method="POST" action="./ajaxmail/sendmail.php"> <p id="checkText1"> <strong>お名前</strong><br /><input type="text" size="40" name="お名前" id="お名前"> <span class="textfieldRequiredMsg">お名前が未入力です</span> </p> <p id="checkText2"> <strong>E-mail</strong><br /> <input type="text" size="40" name="E-mail" id="E-mail" value="<?php echo $_POST['Kanrisya_Mail'] ?>"> <span class="textfieldRequiredMsg">メールアドレスが未入力です</span> <span class="textfieldInvalidFormatMsg">メールアドレスをご記入ください</span> </p> <p><strong>内容</strong><br /><textarea cols="50" rows="10" name="内容" id="内容"> <?php echo $_POST['Bukken_ID'] ?> </textarea> </p> <p><input type="submit" value="確認する"></p> </form> </body> </html> ※スクリプトやCSSやPHPのパスは適切にしてください。 ※sendmail.phpのカストマイズもお忘れなく

scowbee
質問者

補足

回答ありがとうございます。早速試しました。 test.phpのボタンをクリックするとフォームがポップアップして、データも同時に受け渡されているのは確認できたのですが、フォーム内の確認ボタンを押すとlightviewのポップアップが解けてしまい画面がtest.phpから遷移して確認画面が表示されてしまいます。 確認画面の送信ボタンを押してSendmail.phpからメールを送信することができましたので惜しいところまできていると思うのですが。。 希望としてはフォームの確認ボタンを押して確認画面表示→送信ボタン→送信確認画面まで全てポップアップ内で遷移して欲しいと思っております。 最初の要望説明が十分でなかったのが悪かったかもしれませんが引き続きご教授お願いできれば幸いです。

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

続き /* DB読み込み処理？？ */ ?> <ul> <li>物件１<input type="button" value="問い合わせ" onclick="ajax_popup(1);"></li> <li>物件２<input type="button" value="問い合わせ" onclick="ajax_popup(2);"></li> <li>物件３<input type="button" value="問い合わせ" onclick="ajax_popup(3);"></li> </ul> <script type="text/javascript" language="javascript"> function ajax_popup(no){ var form_data; if(no=="1") form_data={"Bukken_ID":1,Kanrisya_Mail:"hogehoge@fuga.fuga"}; if(no=="2") form_data={"Bukken_ID":1,Kanrisya_Mail:"hogehoge@fuga.fuga"}; if(no=="3") form_data={"Bukken_ID":1,Kanrisya_Mail:"hogehoge@fuga.fuga"}; Lightview.show({href:'./sample.php',rel:'ajax', options:{autosize: true,topclose:true, ajax:{ parameters:form_data, onComplete: function(){ new Spry.Widget.ValidationTextField("checkText1", "none", {validateOn:["change"]}); new Spry.Widget.ValidationTextField("checkText2", "email",{validateOn:["change"]}); //$('ajaxForm').observe('submit',function(){}); } } } }); } </script> </body> </html> 次にsample.phpの方 <?php mb_language("japanese"); mb_internal_encoding("UTF-8"); header("Content-Type:text/html;charset=utf-8"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>Form</title> </head> 続く

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

質問がだいたい解りました。ajaxmail.phpの呼び方というより、Lightview.jsによる ポップアップの手段と、SpryValidationTextField.jsによる事前チェックするのが肝ですね。 サンプルだとLightviewがiframeになっているからやりずらい気がします。Lightviewは ajax呼び出しも出来るから、ご希望のようにするにはajaxオプションを使いましょう。 （※inlineオプション使えば、sample.phpに別投げしなくても、test.phpのみでもでき　るけれど、ごきぼうどおりのやり方でサンプル作ってみました） まず、test.phpの方 （回答投稿文字数オーバーになるので続きます） <?php mb_language("japanese"); mb_internal_encoding("UTF-8"); header("Content-Type:text/html;charset=utf-8"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>PopupForm</title> <link rel="stylesheet" type="text/css" href="css/lightview.css" /> <script type="text/javascript" src="js/protoculous-effects-packer.js"></script> <script type="text/javascript" src="js/lightview.js"></script> <link rel="stylesheet" href="./ajaxmail/SpryValidationTextField.css" type="text/css" media="all"> <script src="./ajaxmail/SpryValidationTextField.js" type="text/javascript"></script> </head> <body> <?php /* DB読み込み処理？？ */ 続く.....

scowbee
質問者

お礼

早速のご回答ありがとうございました。途中の回答No3がサイト都合で見れないため回答頂いた内容については試せておりませんが取り急ぎお礼申し上げます。

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

恐れ入りますが、質問の文面からなされたい事がさっぱり汲み取れません。 －リンクをクリックしたら同じページにあるメールフォームをポップアップしたいのですか？ －リンクをクリックしたらメールフォームをポップアップせずに送信したいのですか？ 　その場合、メールの宛先とか本文はどうするのですか？

scowbee
質問者

補足

回答ありがとうございます。わかりづらく失礼しました。うまく説明できるか不安ですが。 やりたい事は以下になります。 物件検索サイトを構築したい。ＤＢからのデータを検索結果画面で表示させる画面（test.php）があるとします。このページに検索結果として表示された個々の物件毎に”問合せ”ボタンがあり、ユーザが問合せをしたい場合にボタンをクリックするとAjaxmailのメールフォームがポップアップ（sample.php）し、サイトのユーザが質問内容や自分の連絡先をフォームに入力して送信するような形を取ろうとしております。その際ユーザが個々の物件を特定する情報（物件IDや物件を管理している管理者のメールの宛先情報等）をいちいち入力することなく各物件の管理者がどの物件の問合せか特定出来る様にする目的で送りたいと思っております。 その方法として画面1でDBより取得した物件IDおよびメールアドレス等の変数情報をPOSTで画面2のフォームに送り込み、そのままユーザには見せない形で管理者にメールできるように出来ないかと考えております。 流れとして 　１）test.phpでDBより管理者メールアドレスと物件ID情報を取得 　２）test.phpの画面上のボタンを押すとメールフォームが立ち上がる（sample.php）。その際に同時に物件IDとメールアレス情報をsample.phpにPOST 　３）sample.phpのメールフォームにユーザが入力し"submit"すると２）でPOSTされた情報と併せてsample.phpに連携したsendmail.jsのスクリプトがメールを送る という動きを想定してます。 １）および３）についてはテストスクリプトでうまく動作できたのですが、２）の動作の部分でつまずいているという次第です。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 外部ファイルJS参照を全て消さないと「文字が正しくありません」エラー

    実に不思議なのですが、 以下のように4つのJSファイルをインクルードしているHTMLファイルを ローカルで開くと「文字が正しくありません」とスクリプトエラーが何回かでます。 ですが、script1～4.js　の行を全てコメントアウトすると、エラーはでません。 1～4のどれかにエラーが含まれているのかと、一つ一つを外してみましたが、 どの行を外しても、やはり「文字が正しくありません」と出てしまいます。 ローカルの然るべきパスに1～4はあります。また、HTML同様、JSもEUCになってます。 何が原因なのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>タイトル</title> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <link href="../css/style.css" rel="stylesheet"> <script src="../js/script1.js" type="text/javascript"></script> <script src="../js/script2.js" type="text/javascript"></script> <script src="../js/script3.js" type="text/javascript"></script> <script src="../js/script4.js" type="text/javascript"></script> </head>

  • 日本語記述が出来ません（XML?)

    初めて質問いたします。 海外のホームページテンプレートを購入し、編集しているのですがなぜか日本語表記がされなくて困っています。 CSS部分には問題なさそうなのですが、誰か原因がわかりましたら教えていただけると助かります。 ちなみにfirefoxもIEも同様でした。どうぞ宜しくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>○○○○</title> <meta http-equiv="Content-Type" content="text/html; charset="shift-jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="layout.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.2.1.js" type="text/javascript"></script> <script type="text/javascript" src="js/cufon-yui.js"></script> <script src="js/cufon-replace.js" type="text/javascript"></script> <script src="js/Swis721_Th_BT_400.font.js" type="text/javascript" ></script> <!--[if lt IE 7]> <link href="ie_style.css" rel="stylesheet" type="text/css" /> <![endif]--> </head>

  • HTMLメールの外部CSSが有効になりません

    HTMLメールから以下のように外部CSS（http://から始めてます）を利用したいのですが、実際にOUTLOOK 2003 SP3で見るとスタイルが適用されていません。 ローカルで同じHTMLをブラウザで開くとスタイルは適用されます。HTMLメールのときは何か特別なことが必要なのでしょうか？ <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> ヘッダ全体を以下に掲載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>TITLE</title> <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>

  • ファイヤーフォックスでCSSが読み込まれません

    会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>

  • ファイヤーフォックスでCSSが機能しません

    会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>

  • ジャバスクリプトが作動しません。

    初めまして、素人なので的外れな質問だったら恐縮です。 以下のようにジャバスクリプトを2つ記述しましたが、後ろに記述した１つしか作動しません。 記述の順番を入れ替えても、やはり後ろに記述した方しか作動しません。 何が悪いのか、どなたか教えて頂けますでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ホームページテンプレート</title> <meta name="description" content="説明を入れます" /> <meta name="keywords" content="キーワード" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/script.js"></script> <link href="css/gallery11.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/glider.js"></script> <script type="text/javascript"><!-- Event.observe(window, "load", function(){ new Glider("album1", { duration:1.0 } ); }); // --></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#viewer'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> </head>

  • スクリプトエラーについて

    メールフォームをmailformpro2というフリーのものをつかって、自分なりにホームページビルダーでカスタマイズしているのですが、最終的にプレビューしてみるとスクリプトエラーが出てしまいます。 エラーはこのようなものです。 ライン　２ 文字　 １ エラー　文字が正しくありません。 コード　０ ２行目の一文字目ということだと思うのですが、何が原因かわかりません。 それともうひとつ、「お問い合わせ」というタイトルにしているのですが、これも原因がわからないのですが、プレビューをしてみると問い合わせの後に入力していない文字が出て「問い合わせ３．０．０」が表示されます。 これもスクリプトエラーが原因なのでしょうか？ 以下が、その部分を含んでいると思われるＨＴＭＬです。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>お問い合わせ</title> <meta name="revisit_after" content="7 days" /> <meta name="robots" content="ALL" /> <meta http-equiv="pragma" content="no-cache" /> <link rel="index" href="index.html" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="commons/_include_wide.css" type="text/css" /> <meta name="Description" content="お問い合わせ" /> <!--[メールフォームプロ・参照ファイルここから]--> <link rel="stylesheet" href="commons/mailform.css" type="text/css" /> <script type="text/javascript" src="commons/jquery.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mfp.lang.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mfp.extensions.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mailform.js" charset="UTF-8"></script> <script type="text/javascript" src="postcodes/get.cgi?js" charset="UTF-8"></script> <!--[メールフォームプロ・参照ファイルここまで]--> </head> <body> <div id="wrapper"> <div id="header"> <h1 id="title">お問い合わせ <script type="text/javascript" src="commons/mfp.version.js"></script></h1> 　　　　　　　　　　　　<div>お電話でのお問い合せは ***-***-**** (月曜日～金曜日／午前9時～午後6時)までお問い合わせください。</div> </div>

  • 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ファイルを読み込む方法はありますでしょうか？？ アドバイス頂ければ幸いです。よろしくお願いいたします。

  • ＪＳの記述を別ファイルに移す

    下記のＨＴＭＬ内の　<script type="text/javascript">～</script>　をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>

  • HPの文字の大きさを変えるCSSがうまくいきません

    ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。 初心者なので、かわかり易く教えていただると助かります。　尚、styleswitcher.jsはダウンロード済です。 ソースは、 <!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=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3"> <script type="text/javascript" src="styleswitcher.js"></script> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> <title></title> </head> <body> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a> <br> <br> テスト<br> </body> </html> よろしくお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する