JavaScript初心者のためのウィンドウ表示とスライドショーの方法についての質問

前へ 次へ
このQ&Aのポイント
  • JavaScript初心者のKootsukiさんは、ウィンドウを開き、スライドショーでマンガのページを表示したいと考えています。
  • ウィンドウを開くための関数とスライドショーのスクリプトはすでに記述されていますが、setTimeout内での関数の実行でエラーが発生しています。
  • Kootsukiさんは、ウィンドウを渡す方法や他の解決策について質問しています。
回答を見る
  • ベストアンサー

setTimeoutで引数を渡したいのですが。あるいは別の方法でも。

Ｋｏｏｔｓｕｋｉと申します。 ブログを立ち上げているのですが、javascriptは初心者です。 ひとつ教えて欲しいことがあります。よろしくお願いします。 ある画像をクリックしたら別ウィンドゥ(Aウィンドゥとします)を開いて、そのウィンドゥの中で自作マンガのページを横からのスライドショーで表示させようとしています。いろいろなページを見て寄せ集めで作成しています。 新たなウィンドゥのオープンは、以下の感じです。 function nstory(){ newWin = window.open("","nstory","top=10,left=10,width=680,height=680,resizable=yes").document; newWin.open(); newWin.write('<html>\ 　・・・・ 　 ただ、マンガのページをスライドさせるスクリプトのfunctionはブログのHTML上にすでに記述されています。 ですので、例えばAウィンドゥに配置したボタンのonclickは以下のように、window.openerのFunctionを現在のウィンドゥをアーギュメントにして渡して処理させています。 <input type="button" onclick="window.opener.maepage(this);" value="前のページ"> さて、横スクロールをやる部分ですが、以下のような感じで、argはthisで指定してあるウィンドゥを意味しています。 function fade_out(arg){ if(fade>0){ arg.document.getElementById("aaaa").style.left=sokudo*100-fade*sokudo; arg.document.getElementById("bbbb").style.left=-fade*sokudo; fade=fade-min; tid=setTimeout("fade_out(arg);",30); ・・・・ }} ここで質問ですが、setTimeoutで自functionを実行させていますが、"fade_out(arg);"の部分で argは宣言されていません。 というエラーになってしまいます。 tid=setTimeout("fade_out("+arg+");",30);　でもダメでウィンドゥを渡さなくてもいい作りにしないといけないのかとも考えましたが、親ウィンドゥから子ウィンドゥの操作の方法も判らなく、何かいい方法がないか、ここに質問させて戴いている次第です。 以上よろしくお願いします。

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

  • ベストアンサー
  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.5

setTimeoutの動作がおかしいわね。 JavaScriptのバグかしら。 function fade_out(arg){ を function fade_out_main(){ にして ウィンドウはグローバル変数にでも入れたほうがいいわね。

kootsuki22
質問者

お礼

askaaska様 ウィンドウをグローバル変数に入れてようやく動きました。 終わってみれば単純でしたがsetTimeoutで手間取ったのと、newWinがDocumentを指していたのが迷路にはまった原因でした。 いや、一番は基本を知らないことでしたが・・・。 初心者におつきあい戴き、本当にありがとうございました。

その他の回答 (4)

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.4

親から子を扱う時は 変数newWinに対していろいろ行えばいいわよ。 タイトルは newWin.document.titleで取れるはずだし。

kootsuki22
質問者

お礼

askaaska様 >　変数newWinに対していろいろ行えばいいわよ。 ありがとうございます。 単にnewWin.document.xxxと書いても、「'newWin.document.xxx'はNullまたはオブジェクトではありません。」のエラーになりますので、単純でもないようですね。このあたりの理解が重要と思いますので調べてみます。 あとtid=setTimeout("fade_out('"+arg+"');",30);でうまく行かないのは別原因と思っていますので、これはこれで気にはなっていますが。 ちょっと時間がかかりそうですのでまずはお礼まで。

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.3

ちなみにあなたの欲しいものはselfで取れるけど そもそも渡す必要があるのかが謎なのよね

kootsuki22
質問者

お礼

askaaska様 なかなかうまく行かないですね。 以下のようにonclickでウィンドゥを渡したいのでthisではなくwindow.selfで渡すようにしました。 <input type="button" onclick="window.opener.maepage(window.self);" value="前のページ"> そして、横スクロールをやるfunctionでは、自functionを30ms後に実行させるために、setTimeoutで受け取ったウィンドゥを再度渡すようにしましたが、「'document'はNullまたはオブジェクトではありません。」のエラーになります。alertでarg.document.titleを表示させると最初にコールされたときはちゃんとタイトルが表示されますが、setTimeoutによる実行の場合はウィンドゥが渡されていないようです。 function fade_out(arg){ alert (fade_out arg.doc.title '+arg.document.title); if(fade>0){ arg.document.getElementById("aaaa").style.left=sokudo*100-fade*sokudo; arg.document.getElementById("bbbb").style.left=-fade*sokudo; fade=fade-min; tid=setTimeout("fade_out('"+arg+"');",30); 何故なんでしょうか・・・?　ちなみに当方、Windows2000 ProでI.EのVersion 6 です。 「そもそも渡す必要があるのかが謎なのよね」での回避でしょうか?(どう回避するかも判らないですが(^^;)

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.2

function fade_out(arg){ の直後で alert(arg.value)をしなさい。 そうすると あなたの勘違いが一つ分かるわ。

kootsuki22
質問者

お礼

askaaska様 遅くなりました。 > alert(arg.value)をしなさい。 う～む、"前のページ"でしたね。 私の期待はウィンドゥを表すものでした。<input type="button"・・・>の場合の this はボタンなのか・・・。 ウィンドゥを渡すには・・・・。ちょっと考えてみますかね。 とにかくアドバイスありがとうございました。

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

もう一捻りすれば答えに辿りつけたんだと思うわ。 setTimeout("fade_out('"+arg+"');",30); 知らないと難しいけど。

kootsuki22
質問者

お礼

askaaska様 回答ありがとうございました。 やってみました。 エラーメッセージが変化し、以下のエラーとなりました。 'document'はNullまたはオブジェクトではありません。 エラーが発生した文としては　arg.document.getElementById("aaaa")　の所だと思います。 ちなみに、setTimeout("fade_out("+arg+");",30);　の場合のエラーは 'object'は宣言されていません。 だったので、スコープの中で見つかるようになったと思われますが。 試しにFunctionに入った直後に　 alert (fade_out arg.doc.URL '+arg.document.URL); でURLを確認しましたが、最初にコールされたときは正しくURLが表示されましたが、setTimeoutによる実行の場合は同じNull云々のエラーでした。 もう少し何かが足りないのでしょうか?

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

関連するQ&A

  • 別windowを開いて同じ関数を走らせたい

    別windowを開いて同じ関数を走らせたい 今回のスクリプトではブックマークレットAの形式で、あるページ(http://www.aaa?page=1&a=b)で実行すると同ドメインのpage=2,page=3・・・とブックマークレットAに定義した関数を実行しようとしています。firebugで開発をしています。 まずは、次のページ（page=今のページ+1）を開いて次のページで前のページで実行したブックマークレットAのスクリプトに定義された関数（と同じ効果のものでもOK）を実行させたいと思っています。 ---ブックマークレットAとして実行するスクリプト--- ＊試したコード１ function findUser(){(略)} var w=window.open(getXXXURL(++currentPage)); w.focus(); setTimeout("findUser(searchID,currentPage)",3000); →元のページでfindUserしてしまう（新しいページに適用したい） ＊試したコード２ function findUser(){(略)} var w=window.open(getXXXURL(++currentPage)); w.focus(); findUser(searchID,currentPage); →元のページでfindUserしてしまう（新しいページに適用したい） ＊試したコード３ function findUser(){(略)} var w=window.open(getXXXURL(++currentPage)); w.focus(); w.setTimeout("findUser(searchID,currentPage)",3000); →新しいページでfindUserが定義されてないのでエラー ＊試したコード４ function findUser(){(略)} var w=window.open(getComURL(++currentPage)); w.focus(); w.setTimeout("window.opener.findUser(window.opener.searchID,window.opener.currentPage)",3000); →元のページでfindUserしてしまう（新しいページに適用したい） このようにいろいろと試したのですが、どうにもうまくいきませんでした。 良いアイデア、例など、あなたのご意見、お待ちしております。

  • setTimeoutで引数を配列にできるか

    画面全体に50行×50列くらいのtd（背景色がピンク）を持ったtableを配置し、それぞれのtdにマウスが乗ったらそのtdの背景色を青くして、マウスがtdの外に出たら1秒後にピンク色に戻すものを作ろうと思ってます。つまり、tdを画素に見立てた簡単なペイントに似たものを作ろうということです。 そのために以下のjavascriptを書きました。 window.onload = function(){ td = document.getElementsByTagName("td"); for(i=0;i<td.length;i++){ td[i].onmouseover = ChCo; td[i].onmouseout =　setTimeout("ClCo('"+td[i]+"')",1000); } function ChCo(){ this.style.backgroundColor = "blue"; } function ClCo(hoge){ hoge.style.backgroundColor = "pink"; } } この場合、onmouseoverの青くするところはうまくいくのですが、onmouseoutのsetTimeoutのところがうまくいきません。どうも、setTimeoutに設定したClCoの引数がうまく渡ってないような感じなのですが、どこが間違っているのでしょうか。

  • JscriptでsetTimeout

    JscriptでＩＥを操作してあるページのリンクをクリックしたいです。 リンクにjavascriptが入っているため同期処理でクリックすると、 その先に進みません。 そのため非同期処理でクリックしたく、setTimeoutを使って 関数を作りましたが動きません。 setTimeout('function ck(ie,ID){ ie.document.querySelector(ID).click();}',10); ※ieはＩＥオブジェクト、iDはリンクのＩＤ属性です。 ちなみに上記をＶＢＡから呼び出して動かしています。 setTimeoutをはずせば普通に動きました。 setTimeoutはwindowオブジェクトが必要なので、 それを省略しているのが悪いとも考えましたが、 VBAでどうやってIEのwindowオブジェクトを作るのかが分かりません。 setTimeout以外にも非同期実行できる方法があれば それでも構いません。 どうかご教授お願いいたします。

  • XPでのwindow.setTimeout代用？

    JAVA SCRIPT初心者です。 自分のHPで新規に開いた特定のページを指定時間後に閉じる為に window.setTimeoutを使っておりましたが、XP等ではうまく作動しないので困っています。 　１．window.openで新しいページを開く。 　２．window.setTimeoutで30秒後に１で開いたページを閉じる。 window.setTimeoutを使用しないで同じような事が出来るのでしょうか？ 　勉強不足なのですが、タイマーの関数、指定した開いているページを閉じる関数等があるのかどうかわかりません。

  • setTimeoutで、止まらない

    setTimeoutで、止まらない現象が起きています。 アップロードしたｃｓｖファイルを、ローダーでデータベースに流し込みたいのですが、このまま実行すると、アップロードが終わらないうちに、ローダーが走ってしまいます。 アップロードの「testUpload.cgi」にsleepを入れてみたのですが、ダメでした。 sleep自体は「testUpload.cgi」のみ（setTimeout(fncLoader(),10000);をコメントアウトして）実行すると、ちゃんと止まってくれます。 ご存知の方がいらっしゃったら教えて下さい。 xxxx.jsの内容 --------------------------------------------------------- function fncTest(){ w_form = document.f_login; if(window.confirm("アップロードしますが、よろしいですか？")){ //アップロード w_form.action = "/cgi-bin/testUpload.cgi"; setTimeout(fncLoader(),10000); return true; } else { return false; } } function fncLoader(){ alert("Loader"); //ローダー w_form.action = "/cgi-bin/testsqlldr.cgi" return true; }

  • 画像の別ウィンドでの拡大表示をやりたいが・・・

    Ｋｏｏｔｓｕｋｉと申します。 初めて質問させていただきます。 javascriptを勉強しはじめたものです。 ブログで画像の別ウィンドでの拡大表示をやりたくjavascriptでfunctionを定義しました。しかし、エラーになってしまいうまくいきません。どなたか原因を教えていただけないでしょうか。 まずhtmlは以下です。 <img src="http://...AAAAs.jpg" onclick="largeImage(this)"> 次にfunctionの定義は以下です。 ブログ上のサムネール画像をクリックしたときには、lergeImageで900×675のウィンドゥを開き、そこにオリジナル画像を100%縮小(?)で表示します。同時に画面の左上に拡大マーク画像を表示し、そこがクリックされたら同じウィンドゥを使って縮小なしで再表示しようと思っています。しかし、拡大マーク画像をクリックすると、ランタイムエラー：行番号0で「オブジェクトを指定してください」とランタイムエラーになってしまいます。どこがおかしいのでしょうか。よろしくお願いします。 <script type="text/javascript"> <!-- var lisrc = ""; function largeImage(img){ var objImg = new Image(); objImg.src = img; var img_wh_hi = objImg.height / objImg.width; var base_wh_hi = 675 / 900; img.src.match(/^(.+)s\.([^\.]+)$/); lisrc = RegExp.$1 + "." + RegExp.$2; newWin = window.open("","","top=10,left=10,width=900,height=675,scrollbars=yes").document; newWin.open(); newWin.write('<html><head><title>拡大画像<\/title><style type="text/css"><!-- body {padding:0;margin:0;text-align:center;} #blank {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;} --><\/style><\/head>'); newWin.write('<body>'); newWin.write('<p><img src="' + lisrc + '" width="100%" onClick="window.close()"alt="クリックするとウィンドゥを閉じます。"><img src="http://blog-imgs-19.fc2.com/....../kakudai.jpg" onClick="maxImage()" alt="さらに拡大" style="position:absolute; top:10px; left:150px; z-index=2"><\/p>'); newWin.write('<\/body><\/html>'); newWin.close(); } function maxImage(){ newWin = window.open("","","top=10,left=10,width=900,height=675,scrollbars=yes").document; newWin.open(); newWin.write('<html><head><title>拡大画像<\/title><style type="text/css"><!-- body {padding:0;margin:0;text-align:center;} #blank {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;} --><\/style><\/head>'); newWin.write('<body>'); newWin.write('<p><img src="' + lisrc + '" onClick="window.close() alt="クリックするとウィンドゥを閉じます"><\/p>'); newWin.write('<\/body><\/html>'); newWin.close(); } // --> </script>

  • 続き]　divの背景画像を、徐々に表示させるには？

    トップページの２つのdivボックスの背景画像を、徐々に表示されるようにするjavascriptを作って頂いたのですが、リピートをやめる方法を御教えいただくのを忘れてしまいました！ （http://oshiete1.goo.ne.jp/qa3921804.html） リピートをとめるには、下記ソースをどのようにすればよろしいでしょうか？ ------------------------------------------------------------ fade.js ------------------------------------------------------------ var after = 10; // 秒数を指定 var tid1; var tid2; window.onload = function () { fdi2(); tid2=window.setInterval("fdi2()", after*1000); }; function fdi2() { var img1 = document.getElementById("limg"); img1.style.visibility = "visible"; fadeIn("limg", 0); var img2 = document.getElementById("rimg"); img2.style.visibility = "visible"; fadeIn("rimg", 0); } function fadeIn(imgId, opacity) { if (opacity <= 100) { setOpacity(document.getElementById(imgId), opacity); opacity += 10; tid1=window.setTimeout("fadeIn('" + imgId + "'," + opacity + ")", 80); } else { window.clearTimeout(tid1); } } function setOpacity(img, opacity) { img.style.filter = "alpha(opacity:" + opacity + ")"; img.style.KHTMLOpacity = opacity / 100; img.style.MozOpacity = opacity / 100; img.style.opacity = opacity / 100; }

  • Firefoxでwindow.openerが動作しない

    あるHTMLから、window.openであらたなウィンドウを開いて、開いたウィンドウにあるリンクをクリックすると、そのリンクの値が元のウィンドウのテキストフォームに入力されるようにしたいのです。 IE6では正常に動いてくれますが、Firefox3で動きません。 新たなウィンドウでは以下の記述をしています。 function junp(value){ window.opener.formtest["test"].value = value; window.close(); } window.openerの行をコメントアウトすると正常にウィンドウを閉じます。 そもそもFirefoxでwindow.openerは使えないのでしょうか？？

  • タブブラウザで　focus()　を実現する方法を教えてください。

    WEBページを作成しています。 javascriptで親子ウィンドウ（親子タブ）のフォーカスをコントロールしようとしています。 IEなどデフォルトが「ウィンドウを開く」設定のブラウザでは問題ないのですが、Firefox、Google Chrome、Mac Safariなどのタブブラウザ（「新しいウィンドウでなく新しいタブでひらく」がデフォルト設定のブラウザ）ではうまくフォーカスしません。 以下に現在のソースを記載させていただきました。 実現のためのアドバイスをお願いします。 以下が現在のソースです。 =================================================== function GoTo_Home() { if(!opener) { // openerが存在しない Open_Home(); } else if(opener.closed == true) { // openerが閉じている Open_Home(); } else { // openerを前に出す opener.focus(); } } // 「parentsite」を開き、openerにする function Open_Home(parentsite) { var parentsite = window.open("http://www.hoge.com/"); opener = parentsite; parentsite.focus(); } =================================================== よろしくお願いします。

  • <FORM>タグのtargetに値を書込む方法を教えて下さい

    送信ボタンを押すとtargetの値をとれず、javascriptエラーになります。 「引数は無効です」と表示されます。 SUBMITした時にmake_newwin(f)を動作しようとしているのですが、 うまくtargetが取れません。 targetには、親ウィンドウ名を書き込みたいのです。 何か良い方法ありましたら、教えて下さい。 <script language="javascript" type="text/javascript"> <!-- function make_newwin(f) { alert(f) …ここで内容を表示したところ[object]と表示されました。 　 var w = window.open('about:blank', f.target); 　　 w.focus(); window.close(); } <FORM name="test" action="/cgi-bin/test.cgi" method="post" target="" onSubmit="make_newwin(this);"> <input name = "aaa" type = "hidden" value ="10000" > 　　　　　　　: </FORM> </BODY> <script> document.test.target=opener.window.top.name; </script> </HTML>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する