- ベストアンサー
window.openでフレームページを開いたときのフレーム名Object生成について
いつもお世話になります。 今回、別の方の疑問に答えるためにフレームページの検証を重ねるうちに変な現象に行き当たってしまいました。 下記のようなJavaScriptを組み込んだページで、スクリプト内の関数から「sFramePageURL」で指定される 「frame01」及び「frame02」から構成されるフレームページを開いた際、新窓内のフレームにおけるObjectの 生成状況がブラウザによって異なります。 このリストの場合は「frame02」を監視しています。 「新しい窓を開いてFrame確認」のボタンを押すと、多少の時間差はあるのですが IE 8 FireFox 3.0.10 Opera 9.63 Netscape 7.1 はObjectが生成されます。 ところが Safari 3.1.1 GoogleChrome 2.0.172.31 に関してはチェック回数や時間間隔をどう増やしてみてもいっこうに生成されません。 処理終了後に「新しい窓のFrame確認」ボタンで確認するとしっかりとObjectが確認できるのですが・・・ この差異は仕様によるものでしょうか単なるバグでしょうか？ また、これをSafari及びChromeで回避する(同一プロセス内でObject生成できる)手法などございましたらご教授お願いいたします。 ********************************************************* 作成した実験用ページ：ここから <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>TEST</title> </head> <SCRIPT Language="JavaScript"> <!-- var FrameContent_TEST; var sFramePageURL = 'http://www.hogehoge.jp/test/FramePage.html'; var sWinName = 'TestPage'; function fShowFramePage(){ FrameContent_TEST = window.open(sFramePageURL,sWinName,'width=800,height=700,scrollbars=1'); FrameContent_TEST.focus(); // *********************************** alert(typeof(FrameContent_TEST.frame02)); alert(typeof(FrameContent_TEST.frame02)); alert(typeof(FrameContent_TEST.frame02)); // *********************************** return true; } function fConfirmFramePage(){ // *********************************** alert(typeof(FrameContent_TEST.frame02)); // *********************************** return true; } //--> </SCRIPT> <body> <br> 試験フレーム１【ページ開く】<input type="button" value="新しい窓を開いてFrame確認" name="B1" onClick="fShowFramePage();"><br> 試験フレーム２【フレームチェック】<input type="button" value="新しい窓のFrame確認" name="B2" onClick="fConfirmFramePage();"><br> <br><br> </body> </html> ********************************************************* 作成した実験用ページ：ここまで
- ralf124c
- お礼率52% (10/19)
- JavaScript
- 回答数6
- ありがとう数6
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
#1＆#4です スクリプト書いたほうが早そうなので書いておきます。 whileのチェックをsetTimeoutにしただけです。 safariでもchromeでもframe02を確認できました。 function fShowFramePage(){ FrameContent_TEST = window.open(sFramePageURL,sWinName,'width=800,height=700,scrollbars=1'); FrameContent_TEST.focus(); CheckFrame(FrameContent_TEST); } function CheckFrame(w){ if(typeof(w.frame02) != 'undefined') alert(typeof(w.frame02)+"を確認しました"); else setTimeout(function(){CheckFrame(w)}, 1000); } フレーム表示のhtmlは下記だけです。 <html> <head> <title>-</title> </head> <frameset rows="50%,*"> <frame src="hoge.html" name="frame01"> <frame src="hoge.html" name="frame02"> </frameset> </html>
その他の回答 (5)
- think49
- ベストアンサー率59% (285/482)
#2,3です。 #2,3はページ読み込みに時間がかかると期待通りに動作しませんね…。失礼しました。 ** 代替案 ** DOMでdisplay:none;なiframeを生成してcontentwindowから取得することはできるので、オブジェクトはiframeで取得してwindow.openは別に発行する手はあります。 ただし、window.openとiframeで2重アクセスしてしまいます。 掲示板/JavaScript質問板/子ページをロード時に編集したい - TAG index Webサイト http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=2172 上記URLでは参照先(B.html) のonloadで参照元(A.html)の関数を呼び出すのが良い、という結論ですが参照先が自サイト内でないと使えないので、参照先(B.html) を自サイト内のHTMLにして、 B.htmlではURLパラメータで渡された外部URLをiframeで生成すれば、アクセスは一回に抑えられます。 いずれもスマートではないですし、一長一短なのでどれが正解ということはないと思います。 参考程度に受け取ってください。
お礼
ご回答、ありがとうございます。 かなり手の込んだソースを拝見させていただきました。 頭の固くなった年寄りには読むのに少々時間がかかりました。 DOMとイベント処理を駆使して新窓を開くやり方は目に鱗がおちる思いで、こういうアプローチの仕方もあったのかとたいへん勉強になりました。 開けた窓のリソースをチェックするやり方から、根本的に窓の開け方を変えてチェックするというアプローチを行ってみます。 たいへん参考になりました。
補足
朝、就業前にあわてて書いたので今見たら文がおかしいですね。 「目から鱗が落ちる」の間違いでした。目に鱗がおちたら痛いですよね。 訂正してお詫びいたします。
- atse
- ベストアンサー率83% (36/43)
#1です ＞ while(typeof(FrameContent_TEST.frame02) != 'undefined'); typeof(FrameContent_TEST.frame02)が'undefined'ではなければ実効し続ける、です。 つまり、while開始時点でundefinedだとすぐ抜けてしまいます。 逆に、while開始時点でobjectとして確認できると、永久ループになってしまいます。 while(typeof(FrameContent_TEST.frame02) == 'undefined'); こうすれば、'undefined'であればループし続け、'object'であればwhileを抜けます。 そこまで細かい間隔で調べる必要がなければ、setTimeoutやsetIntervalあたりを使い、間隔を少しあけながら確認するのが無難かと思います。 fConfirmFramePage()でframe02を確認できるブラウザであれば、成功すると思いますよ。
お礼
すみません。 ご指摘ありがとうございます。 いろいろと実験していて「==」でブラウザがウンともスンとも言わなくなってタスクマネージャで何とか落とすことが出来た後に、間違って上げた場合の用心にロジックを逆にしておいた方を貼り付けてしまいました。 このほかにも「FrameContent_TEST.closed」などをループで確認しながらチェックしたりしていました。 でもやっぱり、「Safari」と「GoogleChrome」だけは何十分待っても・・・ orz 状態です。
- think49
- ベストアンサー率59% (285/482)
#2に補足。 Chromeでも onload を実行できるようです。 function init(){ var test = document.getElementById('Test'); test.onclick = function(){ var url = 'http://www.google.co.jp/search?q=window.open+focus'; // window.open(url,'_blank','width=800,height=700,scrollbars=1').focus(); var win = window.open(url,'_blank','width=800,height=700,scrollbars=1'); win.onload = function(){ this.focus(); }; } } # win.onload.focus(); はChromeでは動きませんね。Fxでは動くのですけど。
- think49
- ベストアンサー率59% (285/482)
これでどうでしょう？ Fx3.0.1.1, GoogleChrome2.0.172.31 で動作OKを確認しました。 ------- <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html lang='ja' xml:lang='ja' xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv='content-type' content='text/html; charset=utf-8' /> <meta http-equiv='content-style-type' content='text/css' /> <meta http-equiv='content-script-type' content='text/javascript' /> <title>TEST</title> <script type="text/javascript"> (function(){ function init(){ var test = document.getElementById('Test'); test.onclick = function(){ var url = 'http://www.google.co.jp/search?q=window.open+focus'; window.open(url,'_blank','width=800,height=700,scrollbars=1').focus(); } } if(typeof window.addEventListener == 'function'){ window.addEventListener('load', init, false); } else if(typeof window.attachEvent == 'object'){ window.attachEvent('onload', init); } })(); </script> </head> <body> <input id='Test' type="button" value="アクティブなウインドウで開く"> </body> </html> -------
- atse
- ベストアンサー率83% (36/43)
メインのスクリプトの処理推移は、開いたウィンドウと非同期です。 要するに、window.openの次行以降、alert等を処理する際、開いたウィンドウのロード完了を待たずに実行されるということです。 よって、バグではなく仕様上の動作として、新しいウィンドウがframe02を定義する前にメインのほうでalertを行ってしまっているのでしょう。 --------------------------------- firefox3あたりなら、FrameContent_TESTのonloadにalert処理を入れればよいのですが、こちらで調べたsafariでは新しく開いたウィンドウには効かないようです。（onloadは存在するが実行されない） 解決には至りませんが、この辺りが何かの糸口になるのではないでしょうか。 ちなみにfirefoxにおいても「クロスドメインではない」が前提です。
お礼
早速の回答ありがとうございます。 > メインのスクリプトの処理推移は、開いたウィンドウと非同期です。 問題の核心をひとことで言い表わしていただいて感謝いたします。 > よって、バグではなく仕様上の動作として、新しいウィンドウがframe02を定義する前にメインのほうでalertを行ってしまっているのでしょう。 こちらに関しては実験で使っているPCの個体差にもよるのですが、IEとNetscapeはOpenの直後でもObjectが確認できました。 のこりのものも、 while(typeof(FrameContent_TEST.frame02) != 'undefined'); や、タイマー処理で時間をずらしながら「FrameContent_TEST.frame02」の状況を監視することで、Object生成をその関数処理内で確認することが出来ました。 確かに、非同期によるタイミングの問題であれば、そのように監視やWAITをかけることでObject(フレーム)の存在が確認できるはずなのですが、SafariとChromeに関しては、最悪「監視の永久ループ」に入ってしまうしまつです。 いつまで待っても生成されません。 これが取得できないことで生じる問題点として「スクリプト処理内で別窓フレームのTARGETを特定することが出来ないこと」です。 無料のブラウザに文句を言ってもしょうがないのですが、よくあるJSの差ということでしょうか。 > ちなみにfirefoxにおいても「クロスドメインではない」が前提です。 セキュリティの基本を思い出させていただき感謝です。 window.openという古典的な関数で、自スクリプトからTARGET指定で生成される子プロセスに関してブロックがかかるなら「そりゃないんじゃない」と思ってしまいます。 また、セキュリティの事情云々であれば、当該JSの処理終了後に別の処理からはObject取得が可能なのが中途半端な実装を証明しているように感じてしまいます(担当者が違う可能性があるかも)。 とにかく、いろいろとありがとうございます。 あつかましいお願いですが、何かまたヒントなどございいましたらよろしくお願いいたします。
関連するQ&A
- window.openで開いたページに書き込みたい
<html> <script language="javascript"><!-- function startIE(jpURL) { var newWindow = window.open(jpURL, null, 'width=500,toolbar=yes,menubar=yes,scrollbars=yes'); newWindow.onload = function() { alert("ページが読み込まれました！");// ここに読み込みが完了したら実行したい処理を記述する var NAIYOU=document.getElementById('NAIYOU'); var Kakikomi=newWindow.document.getElementByName('p'); Kakikomi.innerHTML= NAIYOU.innerHTML; } } // --></script> <a href="javascript:startIE('https://www.yahoo.co.jp/')">IE起動</a> <div id="NAIYO">ああああああああああああああああああああああああ</div> </html> ------------------------------------- divの内容は自動で色々変更するようにしていますが 参考として上記のようにしました。 ボタンを押してブラウザを起動したら、Yahooを開き 「あああああああああああ」を検索ボックスに入れたいと思っています。 しかし、ロードが終わっていない状況だからから 書き込むことが出来ません。 OnLoadを組み込んでみましたが、以下のようなエラーが出ます。 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame. Chromeの拡張機能にしたら出来るようになるのでしょうか? お手数をおかけしますが、回答よろしくお願いいたします。
- ベストアンサー
- JavaScript
- window openについて
こんにちは、例えば以下のようなスクリプトがあったとします。 <html> <form name = serchform> <input type=text name=id><br> <input type=submit value=ID検索 onclick="openwin()"> <a href="javascript:open(1);"><Img Src="1.bmp"></a><br> <a href="javascript:open(2);"><Img Src="2.bmp"></a><br> <script type="text/javascript"><!-- function openwin() { a = document.serchform.id.value; url = "http://10.8.2.166/test/syuhou_kensaku.php?id="+a; mywin = window.open(url,"","width=1120,height=500"); } function open(select) { if(aa == 1){ alert("Test") url2="http://10.8.2.166/test/kensaku.php?msg="+Testです; mywin2 = window.open(url2,"",""); } } //--></script> このソースを実行すると、ID検索ボタンをクリックしても何も反応せず 1.bmpをクリックすると、Testとメッセージが表示され、画面左下に 警告マークが表示され、何も反応しません。 しかし、function open(select)を削除し、ID検索ボタンをクリック すると命令した処理を実行してくれます。 function openwin()を削除したらその逆も起きるのかと考えやって みたのですが、これについては上記と同じエラーでした。 なぜこのようになるのか原因が分かりません。 どなたかご存知の方がいらっしゃいましたら、アドバイスよろしく お願い致します。
- ベストアンサー
- JavaScript
- windowオブジェクトの操作
登録フォームを作成しています。 登録内容に誤りがなければ次のページへ飛び、登録内容に誤りがある場合は再度同じページで登録させる（次のページにはいかないようにさせたい。）というふうにしたいのですがどうすればよいでしょうか？ function mailcheck(){ var tmail = document.form.temail.value; var mail = document.form.email.value; if(tmail != mail){ window.alert("E-Mailが一致しません！"); ★ } else if((tmail == "") | (mail == "")){ window.alert("E-Mail記入されていません！ "); ★ } } <input type="submit" value="確認" name="submit" onclick="mailcheck()"> この場合は★マークの所でwindowオブジェクトだけで操作できるのでしょうか？
- ベストアンサー
- JavaScript
- javascriptに詳しい方
下のスクリプトで見るべきページが二つ以上ある場合どのように記述すればいいのでしょうか? javascriptに詳しい方よろしくお願いいたします。 <html> <head> <script language="JavaScript"> <!-- var isClicked = false; //--> </script> </head> <body> <A href="check.html" onClick="isClicked = true">見るべきページ</a><br> <A href="test.html" onClick="if (!isClicked){ alert('先に見るべきページをクリックしてください'); return false; }">A</a><br> </body> </html>
- ベストアンサー
- JavaScript
- getElementsByNameで要素が取得できない
久々にJavaScriptを組みました。 以下のソースコードなんですが、ボタンクリック時にalertで「1」 が表示されるはずだと思っているのですが、「0」が返ってきます。 何かおかしなところはありますでしょうか？宜しくお願いします。 <html> <head> <script language="javascript"> function test(){ var obj = document.getElementsByName("name1"); alert(obj.length); } </script> </head> <body> <div name="name1"></div> <button onclick="test();">TEST</button> </body> </html>
- ベストアンサー
- JavaScript
- ボタンを押したときに特定のフレームにページを表示するには？
タグの知識が全然無くてすみませんが教えて下さい。 端末だけで紙芝居のように見てゆくＨＴＭＬを作っています。FrontPage2000を使っています。 上下にフレーム分割されていて、上のフレームがnavi、 下のフレームがcontentだとします。 このとき､naviにロードしたページ上にあるボタンを押したら、 contentにあるページをロードするようにしたいのです。 ＵＲＬのリンクなら出来るのですが．．． ページ全体を開きなおすのは <input onclick="top.location='??.htm'" type="button" value="○○" name="B1"> でできたので、 <input onclick="content.location='??.htm'" type="button" value="○○" name="B1"> とか、 <input onclick="location='??.htm'" target='content' type="button" value="○○" name="B1"> とかしてみたんですがダメでした。 こういう場合どのようにしたらいいでしょうか。
- ベストアンサー
- HTML
- フレームで呼び出したhtml名の取得
お世話になります。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2374524 で、教えて頂いた関数呼び出しについてです。 フレームを左右に分割しています。 左側 frame_left.html name="left" 右側 最初page1.html 後でページを切り替える name="main" としたとき、 frame_left.htmlで <a href="page2.html" onclick='getTagName();' target="main">ページ２</a> とすると、右側フレームはpage2.htmlに切り替わります。 このとき、getTagName();が、ページが切り替わった後に実行される方法として、 No1.talepandaさんに、 <body onload="window.parent.left.getTagName();"> と、いう方法を教えて頂きました。 ここで、関数getTagName()で、この呼び出したhtml名、つまりpage2.htmlを取得できないものでしょうか。 いろいろと試してみました。 alert("window.parent.mainfrm.location.href="+window.parent.mainfrm.location.href); //framesetを定義したhtml名となってしまう。 alert("window.mainfrm.location.href="+window.mainfrm.location.href); //スクリプト停止 alert("location.href="+location.href); //frame_left.htmlになる。 と、いうことでいずれもダメでした。 このような呼び出し方をした場合、呼び出しもとのhtml名を取得できないのでしょうか。 どうか、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- window.alert グーグルクローム
グーグルクロームを使用しています。 <html> <head> <title>test</title> </head> <body> <script type="text/javascript"> <!-- function test() { window.alert("テストです。"); } // --> </script> <button onClick="javascript:test();">テスト</button> </body> </html> このソースでテストボタンを押すと 画像の様に 「javascriptのアラート」と出ますが 同じコードを自分の作成しているサイトに組み込むと 「javascriptのアラート」の部分が 「ページ ○○.web.fc2.com の記述：」 になります。 ○○は、私のサイトのＵＲＬです。 ＩＥで確認すると、 サンプルコードでも自分のサイトでも 「Webページからのメッセージ」になります。 グーグルクロームで 「javascriptのアラート」となる場合と 「ページ ○○.web.fc2.com の記述：」となる場合の違いは何でしょうか？
- ベストアンサー
- HTML
- javascriptのonclickに関数を追加？
現在、javascriptでinput要素に新しくonclick='hoge()'などの関数を追加したいのですができません。 色々調べたのですが、結局わからなかったので質問させていただきます。 何卒、ご教授宜しくお願いします。 ■やろうとしていること 下記ソースのボタンをどれかクリックしたら、 新しく、<input type="button" value="次へ" onclick="next()" />というのを<span>に 生成したいのですが、onclickが追加されずに困っております。 どのようにしたらよいのでしょうか？ちなみにtypeとvalueは生成されています。 <form name="test"> <input type="button" value="" id="answer_0" onclick="test(0)" /> <input type="button" value="" id="answer_1" onclick="test(1)" /> <input type="button" value="" id="answer_2" onclick="test(2)" /> </form> <span id="test2"></span> <script> function test(n) { ・・・ 中略 var nq = document.createElement('input'); nq.type = "button"; nq.value = '次へ'; nq.onclick = "nexｔ()"; document.getElementById('test2').appendChild(nq); } </script> 以上、宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
- javascriptの動的読み込みについて教えてください
javascriptの動的読み込みについて教えてください いつもお世話になります。 jqueryを勉強中のものです。 少しややこしいのですが、 以下のmenu.htmlとmain.htmlを持ったframe.htmlで、メニューの試験ボタンを押してmain.htmlの<div id="target_id">にload.htmlを動的に読み込んだ時、loadされたhelloボタンが作動しません。 menu.htmlのtest()中のalert(data);でload.htmlの<script>が読み込まれていることは確認できるのですが・・何が原因でどこが悪いのでしょうか？ よろしくご指導お願いします。 frame.html ----------------------------------------------------------- <html> <head> <title>Dynamic Load Test</title> </head> <frameset name="frame" cols="180,*"> <frame name="menu" src="menu.html"> <frame name="MainPanel" src="main.html"> </frameset> </html> ----------------------------------------------------------- menu.html ----------------------------------------------------------- <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"><!-- function test(){ jQuery.get("./load.html",function(data){ alert(data); $("#target_id",window.parent.MainPanel.document).html(data); }); } // --></script> </head> <body> <button onClick="test();">試験</button> </body> </html> ----------------------------------------------------------- main.html ----------------------------------------------------------- <html> <head> </head> <body> <h1>main.html</h1> </body> <div id="target_id"></div> </html> ----------------------------------------------------------- load.html ----------------------------------------------------------- <h1>load.html</h1> <script type="text/javascript"><!-- function hello(){ alert("こんにちわ"); } // --></script> <button onClick="hello();">hello</button> -----------------------------------------------------------
- ベストアンサー
- JavaScript
お礼
検証に時間がかかってしまい申し訳ありませんでした。 処理といいリストの美しさといいみごとな回答です。 本当にありがとうございました。 処理を見ると監視部分を関数化している以外はほぼ同じことをやっていたのに不思議でしょうがありません。これからじっくりと相違点を追跡して原因部分を探って生きたいと思います。