途中のjavascriptを後で読み込ませるには？
- 現在、HTMLファイルでJavaScriptのソースを後から読み込ませる方法が知りたいです。読み込みが終わるまで次のソースを表示したくありません。
- 早くJavaScriptを読み込む方法や、ページ表示後にJavaScriptを読み込む方法を教えてください。後から読み込む方法の方がストレスがないです。
- 外部の動画サーバーからの埋め込みソースのJavaScriptを読み込む際に、読み込み完了まで次のソースを表示したくありません。効率的な読み込み方法を教えてください。
- ベストアンサー
途中のjavascriptを後で読み込ませるには？
こんにちは 現在htmlファイルで <html> : <body> : AAAAAAAAAAAAAA AAAAAAAAAAAAAA <div> <script type="text/javascript"> <script type="text/javascript" src="http://hogehoge.com/hoge.js"></script> <noscript>ブラウザのjavascript機能をONにしてご覧ください</noscript> </div> : BBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBB : </body> </html> のような形のソースを入れているのですが、 これだとjavascriptのソースの読み込みが終わるまで、 次のソースをみることができません。 （実はこのjavascript部分がある動画サーバーからの埋め込みソースで、 ２、３秒くらいかかってしまうのです） １）javascriptを早く読み込む方があれば教えてください。 もしくは ２）ページを表示してからjavascript部分を読むようにするには どうすれば良いのか教えてください。 （これだとページのあとからjavascript部分が表示されるので、 ストレスが無いので・・・） ちょっとしたアドバイスでもよいので、宜しくお願いします。
- yu393939
- お礼率5% (22/371)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
async、defer属性を使ってください
その他の回答 (2)
- Gletscher
- ベストアンサー率23% (1525/6504)
＞実はこのjavascript部分がある動画サーバーからの埋め込みソースで、２、３秒くらいかかってしまうのです それが間違いで、きっと余計なものがいっぱいくっついた大きなファイルなんでしょう。 必要最低限のものに書き直して自分のサーバーに入れるのが良いと思います。 他のサーバーにあるものは、いつまであるかの保証もないですよ。
- tracer
- ベストアンサー率41% (255/621)
HTMLは基本的に上から下に読み込まれます。 従って、ご指摘の通り、HTMLの途中にファイルサイズの大きいjavascriptがあると、それ以降のHTMLの表示が遅くなります。 つまり、単純にHTMLの一番下にscriptを配置すればいいですよね？ 仮に、どうしてもその位置にscriptを配置しなければならない都合があるとしたら、改善するべきはその都合です。 他にもjavascriptからjavascriptを読み込むなどの方法もありますが、いずれにしてもscriptの配置場所を変える点においては同じことです。
関連するQ&A
- javascriptのクラスの処理について
javascriptのクラスを利用した処理で分からない所がありますので 教えて下さい。 最初に 下記の「1.の方法」でhtml側にjavascriptを呼び出す記述を して動かしていましたが、「2.の方法」に変更しなければならなく なりました。 ところが、「2.の方法」でやりますと、メインのhtml側がフリーズ してしまいます。 調べてみますと、メモリーを食いつぶしていますので、何か永久ループの ような状態に陥っているようです。 こような場合、何かやり方がおかしいのでしょうか？ ご存知の方がいらっしゃいましたら、ご教授お願いいたします。 === 1.の方法 ===(問題なく動きます)================= ---ソース(index1.html) <script type="text/javascript" src="js1.js"></script> <script type="text/javascript"> hoge.create( abc, "def"); </script> ---ソース(js1.js) var hoge = { xxx: ～～, yyy: ～～ create: function(val1,val2) { ～略～ }; === 2.の方法 ===(フリーズしてしまいます)=========== ---ソース(index2.html) <script type="text/javascript" src="js2.js"></script> <script type="text/javascript"> hoge_sub(); </script> ---ソース(js2.js) function hoge_sub(){ hoge.create( abc, "def"); } var hoge = { xxx: ～～, yyy: ～～ create: function(val1,val2) { ～略～ };
- 締切済み
- JavaScript
- javascriptを起動した後のウェブページを取得するには
こんにちは。よろしくお願いいたします。 以下のようなHTMLソースをブラウザで読み込むとhogeと 表示されますが、PHPのfile_get_contentsやPerlのLWPなどを使って ページを取得するとソースそのものが取得されます。PHPやPerlを使って ブラウザから見たソース(以下の例ではhoge)を取得するには どのようにしたらよいのでしょうか？ <script type="text/javascript"> window.onload=function (){ document.getElementById("a").innerHTML="hoge"; } </script> <div id="a"></div>
- ベストアンサー
- PHP
- Bloggerのガジェットにdocument.write("<script～したい
こんにちは。googleのBloggerを使っています。 このフォームに書き込む為、便宜上、＜＞を全角で入力しています。 ＜script src="hoge001.js"＞＜/script＞のようなガジェットをBloggerのカスタマイズから「ガジェットの追加」ー「HTML/Javascript」を選んで設定しようとしています。 ここでhoge001.jsの001が機能によって違うため、ここをランダムに切り替えて使うべく、document.write()を使って001部分を可変にしようとしているのですが、そもそもこのBloggerのガジェットエディタで（１）のようにdocumnt.write()化したコードが正しく保存されません。保存した結果をブラウザで表示させて展開されたソースコードも、ガジェットの編集で再度エディタを開いても、（２）のコードになります。 （１）ガジェットのエディタで最初に入力したコード： ＜script type="text/javascript"＞ document.write( "＜script type=\"text/javascript\" src=\"http://hogehoge.com/jslib/hoge001.js\"＞＜/script＞" ) ; ＜/script＞ （２）保存後再度編集で開いたコード、およびブラウザで見たソース： ＜script type="text/javascript"＞ document.write( "＜script src="\" text/javascript\ http://hogehoge.com/jslib/hoge001.js\ type="\"＞＜/script＞" ) ; どうにかうまくやる方法はないものでしょうか。 よろしくお願いします。 尚、hoge001.js自体の動作に問題はありません。
- ベストアンサー
- JavaScript
- HTMLとJavascriptについて
今WEBアプリを作成中で、ひとつわからないところがあるので質問させていただきます ページ内に画像があり、その画像をクリックすると別のdiv要素のところにその画像のidを表示させるようにしたいのですが、以下のようではできませんでした。どなたか解決策お願いします。 ------html------- <div> __<a href="#"> ____<img src="hoge.png" id="3" class="hogehoge" onclick="test(this.id)" /> __</a> </div> <div> __<script type="text/javascript"> ____document.write("ここは"+ hallid + "階です"); __</script> </div> -------js--------- hallid = 0; function test(id){ __hallid = id; }
- ベストアンサー
- JavaScript
- JavaScriptで擬似フレーム、読み込み完了を知るには？
サイト内の各ページ上部に、Ajaxで共通のメニュー部分.htmlを読み出し、表示しています。 参考：AjaxでIFRAME的な表示をやってみる http://bizcaz.com/archives/2006/11/13-000253.php 参考：階層メニューにJavaScriptで書き換え http://www.dhtmlgoodies.com/index.html?whichScript=dhtmlgoodies_menu2 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="ajaxcontents.js"></script> <script type="text/javascript" src="ListbasedDHTMLmenu.js"></script> </head> <body> <span id="ajax_content_block"></span> <script type="text/javascript"> <!-- ajax_content_onload_get('メニュー部分.html','','ajax_content_block','ajax_content_progress'); //--> </script> <div> 本文 </div> </body> </html> ajaxcontents.jsでメニュー部分.htmlを読み出しListbasedDHTMLmenu.jsで階層メニューに書き換えています。 "dhtmlgoodies_menuObjはNullまたはオブジェクトではありません" のエラーが出て、階層メニュー部分が表示されません。 dhtmlgoodies_menuObjは階層メニュー書き換えのListbasedDHTMLmenu.jsで使われています。 ページ読み出しjavascript完了後に、ページ書き換えjavascriptを実行すればと思っているのですが、 方法の検討がつきません。 if ( location.search.indexOf("1") == -1 ) { setTimeout("_reload()",100); } function _reload() { location.href = location.href + "?1"; } ↑でリロードさせて見たのですが、バックすると表示されなくなります。 すいませんがアドバイスをお願いいたします。
- ベストアンサー
- JavaScript
- javascriptでselectboxのvalueを取得し、特定のv
javascriptでselectboxのvalueを取得し、特定のvalue値により、「<input type="text" name～>」をブラウザに表示させたいのですが、やり方がわかりません。 javascriptについて素人です。 jQUERYを使用して、phpのようにif文を追加したらいけるのかなと思って下記のようにやってみたのですが、更新しないと変わりませんでした。。 どなたかお力を貸して下さい！どうか宜しくお願い致します！ ========================================== <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <meta name="robots" content="noindex,nofollow" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="/admin/js/jquery-1.2.3.js" ></script> <script type="text/javascript"> $(function() { hogehoge = $("#abcdefg").val(); if(hogehoge !== '3'){ $('#hijklmn').hide(); } }); </script> </head> <body> <form method="post" action="/admin/～"> <select id="abcdefg"> <option value="1">aaaaaaaa</option> <option value="2">bbbbbbbb</option> <option value="3">cccccccc</option> </select> <div id="hijklmn"> 上のセレクトボックスが3の場合のみ、下記のフォームを表示させたい <input type="text" value="ああああああああ" /> </div> </form> </body> </html>
- ベストアンサー
- JavaScript
- javascript 解析タグのコメントアウト
XHTMLではなく、HTMLに貼るときにのコメントアウトで、 以下をどうすればよいのでしょうか？ <script type="text/javascript" src="http://i.yimg.jp/images/analytics/js/ywa.js"></script> <script type="text/javascript"> var YWATracker = YWA.getTracker("XXXX"); YWATracker.addExcludeProtocol("file:"); YWATracker.submit(); </script> <noscript> <div><img src="http://by.analytics.yahoo.co.jp/p.pl?a=XXXX&js=no"; width="1" height="1" alt="" /></div> </noscript> ------------------------- 例１ <!-- // --> 例２ //<![CDATA[ //]]> 例３ どっちでも良い。
- ベストアンサー
- JavaScript
- バナー(javascript)をランダムで表示
FC2ブログのプラグインにjavascriptを使ってバナー広告をランダムで表示しています。 今までは問題なかったのですが、新しくバナーを加えた際に、そのバナーがjavascriptで出来たものだったので、どうしてよいものかわからなくなってしまいました。 ランダム表示にはこちらのページを参考、というかコピーしました。 http://javascript.eweb-design.com/0616_ra.html 貼り付けたいバナーのソースです↓ ソースの改変は認められていません。 <!--- ---> <script type="text/javascript"><!--- ---></script> <script src='jsファイルのURL'></script> <noscript></noscript> <!--- ---> これ以外のバナーはgifとリンクで構成されていましたので特に問題ありませんでしたが、そこに上記のjavascriptバナーを加えてランダムに表示することはできますか? 自分で調べてみましたが、自力では見つけられなかったのでココで質問をする事にいたしました。 回答お願いします。
- 締切済み
- JavaScript
- JavaScriptのinnerHTMLの挙動について
下で"JavaScript内からJavaScriptを書き出したいのですが"で質問したものですが，ソースコードを簡単にして再質問したいと思います． ソースは以下のようにし，divタグのところにinnerHTMLで文字"test"とJavaScriptでアラートを表示させるものです．表示してみたところ，"test"は表示されるのですが，アラートは出てきません． これはinnerHTMLではHTMLのタグは評価されるが，JavaScriptは評価されない，ということなんでしょうか．JavaScriptのこのような仕様は調べにくいので困っています．回答宜しくお願いします． <html><head><title></title> <SCRIPT type="text/javascript"> <!-- var str='<font color="blue">test</font><script type="text/javascript">alert(123);</script>'; function gogo(){ document.all("here").innerHTML = str; } //--> </SCRIPT> </head><body> <div id="here" style="position:absolute;width:600px;left:0px;top:0px;"></div> <SCRIPT type="text/javascript"> <!-- gogo(); //--> </SCRIPT></body></html>
- ベストアンサー
- JavaScript
- IEだけで動きません。Javascriptに関する質問です。
IEだけで動きません。Javascriptに関する質問です。 初心者です。よろしくお願いします。 下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。 ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。 他のブラウザでは動きました。 どうしてでしょう？ 悩んでいます。 どなたか教えてください。よろしくお願いいたします。 <html> <head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script> </head> <body> <div id="container"> </div> <div id="menu"> <ul> <li><a href="javascript:changeObj('a.htm')" title="a">a</a></li> <li><a href="javascript:changeObj('b.htm')" title="b">b</a></li> <li><a href="javascript:changeObj('c.htm')" title="c">c</a></li> </ul> </div> </body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html> <head> <script type="text/javascript" src="bbb.js"></script> </head> <body> <div id="page-height"> <div id="a"><!--ここにページ内容--> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
