- 締切済み
Ajaxで外部サイトの取り込み
Ajax非同期通信、例えばJQueryの以下の様にyour-web-siteをページ内に取り込んだ場合、cssやjavascriptのパスが相対パスで指定されているのが原因で正しく表示されない場合があります。通常のhtmlで静的に取り込む場合は<iframe>で取り込むか、<base href="...">などを用いて相対パスを絶対パスに変換するのですが、Ajaxで動的に取り込む場合のうまい方法がわかりません。 よいアイデアや方法があればご教示ください。 --- javascript---- $(function (){ $("#a").load("http://your-web-site/"); }); ---- html -------- <div id="a"></div> ------------------
- kahata
- お礼率39% (66/168)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- notnot
- ベストアンサー率47% (4848/10262)
html内にinsertするまえに、自分でDOMで書き直すしかないと思います。うまい方法はないんじゃないかなあ。私が知らないだけかもしれないので自信無しですが。 あと、読み込む中にcssやjavascriptがあったとするとそれは読み込んだ部分だけじゃなくてドキュメント全体にかかりますけど。そういうわけで、自分が自由にならない「あらかじめ書かれたhtml」を動的に読み込むのはあまり普通ではない気がします。
- pick52
- ベストアンサー率35% (166/466)
回答じゃないんですが、もし自分が管理していない外部のサイトを 自分のサイトに取り組みたいというのならそれは様々な問題が 発生しうるのでやめた方が無難だと思います。 これはフレームなどの直リンクの場合と同様ですね。 http://ja.wikipedia.org/wiki/%E7%9B%B4%E3%83%AA%E3%83%B3%E3%82%AF
関連するQ&A
- Ajaxを使った検索サイト作成
今、Ajaxを用いてカスタム検索サイトを作成しています。内容は、検索したいキーワードをテキストボックスに入力し、その結果をタブの中で表示させるようにしています。しかし、何度してみても結果を表示させることができません。どうしたら、結果表示させることができるでしょうか？よろしくお願いします。下がソースです。 <?xml version="1.0" encoding="utf-8"?> <!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="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Search Site</title> <link rel="stylesheet" type="text/css" href="_css/import.css" media="all" /> <script type="text/javascript" charset="utf-8" src="_js/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery_ui_tab.js"></script> </head> <body> <div id="header"> <!-- #header --></div> <div id="container"> <div id="read"> <br> </div> <ul> <li><a href="#about" title="about">about</a></li> <li><a href="_ajax/google.html" title="google">google</a></li> <li><a href="_ajax/yahoo.html" title="yahoo">yahoo</a></li> <li><a href="_ajax/goo.html" title="goo">goo</a></li> </ul> <div id="about"> </div> <!-- #container --></div> <div id="footer"> <!-- #footer --></div> </body> </html>
- ベストアンサー
- AJAX
- Ajaxで書き換えた要素内でLightbox
Ajaxの勉強がてらいろいろ試しています。 そこで、質問なのですが、 例えば、<div id="xxx"></div>の中をAjax.Updaterで <a href="image_l.jpg" rel="lightbox[roadtrip]" title="image"> <img src="image_s.jpg" alt="image"> </a> と書き換えた場合、lightboxの機能が使えません。 とりあえず、Lightboxはinitializeでいろいろやってるために、Ajaxで後から追加した要素には適用されない、ということは判りました。 Ajaxで後から追加した要素内で行いたい場合、IFRAMEを使うしか方法はないのでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- Ajaxを使った読み込みができない
●質問の主旨 Ajax（非同期通信）を使って、 ブラウザ上でテキストファイルの読み込みを させたいのですが、できません。 Ajaxにお詳しい方、ご指導願います。 ●質問の補足 HTML5とjqueryの技術を使って、 テキストファイルの中身（Hello,World)の 読み込みをさせたいと考えております。 参考サイトにもとづいてやってますが、 画像の表示ができません。 表示させるためにはどうしたら良いでしょうか？ ●コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQueryの練習</title> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <body> <h1>jQueryの練習</h1> <div id="main"></div> <input type="button" id="kick_ajax" value="Ajax!"> <script> $(function() { $('#kick_ajax').click(function() { $('#main').load('contents.txt', function() { alert('読み込み終了！'); }); }); }); </script> </body> </html> ●テキストファイルのファイル名 contents.txt ●参考サイト（ドットインストール） http://dotinstall.com/lessons/basic_jquery/519
- ベストアンサー
- AJAX
- ajax を使って，ｈｔｍｌを読み込み表示する方法
webページのfaqを作成しています。 目次が並んでいて，どれかひとつ質問をクリックすると，その下に回答が表示されるという仕組みにしようと考えています。 それについては以下のようにプログラムしてみました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); }); }); </script> </head> <body> <div class="demo-show"> <h3>質問1</h3> <div>"answer1.html"を読み込んで表示</div> <h3>質問２</h3> <div>"answer2.html"を読み込んで表示</div> <h3>質問３</h3> <div>"answer3.html"を読み込んで表示</div> </div> </body> これにhtmlファイルを読み込む機能を持たせるために，<script>に一番下の3行を追加しました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); $("div.a-1").load("./answer1.html"); ←追加 $("div.a-2").load("./answer2.html"); ←追加 $("div.a-3").load("./answer3.html"); ←追加 }); }); </script> <body>は <div class="demo-show"> <h3>質問1</h3> <div. class="a-1"></div> <h3>質問２</h3> <div.class="a-2"></div> <h3>質問３</h3> <div.class="a-3"></div> </div> これを実行すると，文字の場所がずれて表示されてしまいます。 （今回の作業は既に出来上がっているページに機能を追加しているので，おそらくタグが干渉しあっているのだろうと思います。これは，細かく確認すれば直るとは思います） その他，細々と不具合があります。 また，質問の数は５０以上あります。 この方法以外に良い方法がありましたら教えていただけると助かります。 よろしくお願いします。
- ベストアンサー
- JavaScript
- JQueryでのAJAXで困ってます
最近AJAXを勉強しようと思い、JQueryに手を出しました。 JQueryで画面遷移無しでdivで作ったメニューを選択して内容を指定したdivに表示させようと思っているのですが、 JQueryでのloadの動作がブラウザの違いで異なる動きをするので困ってます。 IEでは内容が表示されて、新しく表示した部分のJavaScriptが正しく動くのでいいのですが、 Firefox、Operaでは新しく表示した部分のJavaScriptが動作しません。 Chromeでは新しく表示した部分のCSSでさえ適用されません。 IE以外でも正しく動作させるにはどうしたらいいでしょうか？ ご回答、よろしくお願いします。
- ベストアンサー
- AJAX
- Ajaxの動き
googleと本で調べたのですが、今いちわからないため質問させてください。 (1)教科書から、Ajaxは、XMLをJavascriptでやり取りしている非同期通信という定義なのはわかりましたが、結局、AJAXを使うということは、HTMLに、<Script>のタグで、JQueryなどのパスを書くということなのでしょうか？ AJAXは概念的なものであって、プログラムやモジュールそのものではないと捉えています。 (2)Ajaxによる非同期通信は、何をきっかけとして通信が始まるのでしょうか？ 通常は、FORMがSUBMITされたときに、サーバにリクエストがいくという認識ですが そもそも、Ajaxは、何をイベントとしてハンドルしているのでしょうか？（何をきっかけに処理が始まっているのでしょうか？） HTMLに、<Script>のタグで、JQueryのパスを書くと、ハンドルする機能が使用されるのでしょうか？ Ajaxでも「リクエスト」は行われているけれども、処理結果として戻されるものがXML形式であるだけだという理解で良いのでしょうか？
- ベストアンサー
- AJAX
- AJAX(mac)開発環境のはどのようにつくればいいのでしょうか？
自宅macで 「Ajax」 「javascript」 「jQuery」 の開発環境はどのように作ればいいのでしょうか？ 【使用目的】 webサイトの構築 アプリケイションの制作です。 ご存知の方いましたら教えてください。 よろしくお願い致します。
- ベストアンサー
- AJAX
- 検索サイト作成について
今、Ajaxを用いてカスタム検索サイトを作成しています。内容は、検索したいキーワードをテキストボックスに入力し、その結果をタブの中で表示させるようにしています。しかし、何度してみても結果を表示させることができません。どうしたら、結果表示させることができるでしょうか？よろしくお願いします。下がソースです。 <?xml version="1.0" encoding="utf-8"?> <!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="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Search Site</title> <link rel="stylesheet" type="text/css" href="_css/import.css" media="all" /> <script type="text/javascript" charset="utf-8" src="_js/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery_ui_tab.js"></script> </head> <body> <div id="header"> <!-- #header --></div> <div id="container"> <div id="read"> <br> </div> <ul> <li><a href="#about" title="about">about</a></li> <li><a href="_ajax/google.html" title="google">google</a></li> <li><a href="_ajax/yahoo.html" title="yahoo">yahoo</a></li> <li><a href="_ajax/goo.html" title="goo">goo</a></li> </ul> <div id="about"> </div> <!-- #container --></div> <div id="footer"> <!-- #footer --></div> </body> </html>
- ベストアンサー
- JavaScript
- ajax後、php,mysqlも一部再読み込み？
通常は一部でも変更が加わるとページの全てを再読み込みしますが、ajaxを利用すると、変更を加えた部分だけが再読み込みされるところまでは理解しています。 分からないところは、各プログラムへの動作がajaxを使った後の場合と通常の場合ではどのように違うのかです。 下記のような考え方で正しいですか？説明が下手で読みにくく申し訳ないですが、アドバイスをいただけたら嬉しいです。お願いします。 ■htmlは、実行を起こした部分を含めその子要素全てが再読み込みの対象に。 例えば、↓の<div#ajax>～</div>この間にある子要素の全てが再読み込みされる。それ以外のhtmlやcssは再読み込みされない。 ■cssは、htmlと同じで、その部分で使われているcssが対象。 ■javascriptは、ajaxの場合と通常の場合で違いはなく、常に全てが再読み込みされる(外部ファイル、記述の位置に関係なく)。 ■jquery、php、mysqlも、javascriptと同じで何一つ変わりなく通常通りに動く。 <?php ・includeで外部ファイルを取得 ・様々な処理 ・mysqlに接続して様々な処理 ?> <html> <head> <script type="text/javascript" src="外部ファイルでajaxを記述"></script> <title></title> </head> <body> <?php ・様々な処理 ?> <div id="main"> <div id="a"> <dl>～</dl> </div> <div id="ajax" onclick="ajaxの処理へ"> <table>～</table> <ul>～</ul> その他様々な処理 </div> <p>～</p> <img src=""> </div> <script type="text/javascript"> </script> </body> </html>
- ベストアンサー
- AJAX
- jQuery Ajax通信をランダムで表示
Ajax通信で別htmlファイルを読み込みたいと考えています。 それぞれ読み込むファイルは、a.html、b.html、c.html、d.htmlとあります。 読み込む先(index.html)の以下div要素内に、 上記htmlを読み込みたいと考えています。 <div id="01"></div> <div id="02"></div> <div id="03"></div> <div id="04"></div> 本来ならAjax通信で以下のように出来るかと思います。 $(function(){ $('#01').load('a.html'); $('#02').load('b.html'); $('#03').load('c.html'); $('#04').load('d.html'); }); しかし、div要素内の表示をランダムにしたいのです。 例）id="01"のところに、b.htmlだったり、d.htmlだったりという感じです。 ロードする度にコンテンツの表示場所が変化するイメージです。 ランダムというところが、どのように対処したらよいのか、手も足も出ません。 どなたか詳しい方、ご教授いただけたら助かります。 何卒、何卒、宜しくお願いいたします。
- ベストアンサー
- AJAX
