- 締切済み
インラインフレーム内の変数を親ページから呼び出す
インラインフレーム内のマウス位置を↓のjavascriptコードで取得しているのですが、親ページのjavascriptの関数で使用したいです。どのようにインラインフレーム内の変数を親ページから呼び出して、利用すればよいのでしょうか？ var x, y; window.addEventListener("DOMContentLoaded", function(){ window.document.onmousemove = function(e){ x = getMousePosition(e).x; } },false); function getMousePosition(e) { var obj = new Object(); if(e) { obj.x = e.pageX; obj.y = e.pageY; } else { obj.x = event.x + document.body.scrollLeft; obj.y = event.y + document.body.scrollTop; } return obj; }
- tennis_eyes
- お礼率37% (3/8)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
各フレームのwindowオブジェクトからアクセスしてください。 <script> onload=function(){ alert( window.iframe_name.x ); // Javascript1.1 DocumentObject alert( document.getElementById('iframe_id').contentWindow.x ); // DOM }; </script> <iframe name="iframe_name" id="iframe_id" src="index2.html"></iframe> index2.html <body> <script> var x = 1; </script> </body> =============== HTML5 WebApplication APIを使うなら、postMessage()でウインドウ間通信ができます。 この方法はあくまで「通信」ですので、変数を参照するという物ではありません。 https://developer.mozilla.org/ja/docs/DOM/window.postMessage http://msdn.microsoft.com/ja-jp/library/ie/cc197057(v=vs.85).aspx
関連するQ&A
- 動的に変数だけを切り替える
<script> (function($) { $.ipop001 = function() { var wx, wy; // ウインドウの左上座標 // ウインドウの座標を画面中央にする。 wx = $(document).scrollLeft() + ($(window).width() - $('.ipop').outerWidth()) / 2; if (wx < 0) wx = 0; wy = $(document).scrollTop() + ($(window).height() - $('.ipop').outerHeight()) / 2; if (wy < 0) wy = 0; // ポップアップウインドウを表示する。 $('.ipop').css({top: wy, left: wx}).fadeIn(100); // 閉じるボタンを押したとき $('.ipop_close').click(function() {$('.ipop').fadeOut(100);}); // タイトルバーをドラッグしたとき $('.ipop_title').mousedown(function(e) { var mx = e.pageX; var my = e.pageY; $(document).on('mousemove.ipop', function(e) { wx += e.pageX - mx; wy += e.pageY - my; $('.ipop').css({top: wy, left: wx}); mx = e.pageX; my = e.pageY; return false; }).one('mouseup', function(e) { $(document).off('mousemove.ipop'); }); return false; }); } })(jQuery); (function($) { $.test = function() { var wx, wy; // ウインドウの左上座標 // ウインドウの座標を画面中央にする。 wx = $(document).scrollLeft() + ($(window).width() - $('.ipop').outerWidth()) / 2; if (wx < 0) wx = 0; wy = $(document).scrollTop() + ($(window).height() - $('.ipop').outerHeight()) / 2; if (wy < 0) wy = 0; // ポップアップウインドウを表示する。 $('.ipop').css({top: wy, left: wx}).fadeIn(100); // 閉じるボタンを押したとき $('.ipop_close').click(function() {$('.ipop').fadeOut(100);}); // タイトルバーをドラッグしたとき $('.ipop_title').mousedown(function(e) { var mx = e.pageX; var my = e.pageY; $(document).on('mousemove.ipop', function(e) { wx += e.pageX - mx; wy += e.pageY - my; $('.ipop').css({top: wy, left: wx}); mx = e.pageX; my = e.pageY; return false; }).one('mouseup', function(e) { $(document).off('mousemove.ipop'); }); return false; }); } })(jQuery); $(function() { $("a").click(function() { eval("$."+this.id+"();"); var text = this.id; $("#text").text(text); }); }); </script> 『$.ipop001 = function() { も『$.test = function() {』以降の中身一緒なのですが、クリックした時に変数の部分だけを切り替える方法はないのでしょうか。 仮にリンクが100個あったら変数が違う＆中身が一緒のfunction()を100個文書かなければいけないのでご教示お願いします。
- 締切済み
- JavaScript
- 初心者なのですが教えてください。
ＨＴＭＬの中にJavaScriptを用いて 初めてプログラムを作ってみました。 ある画像があり、カーソルを動かすとｘ、ｙ座標を表示させる プログラムを作りました。 今回これを改良したいのです。 画像の中に、人の絵がありまして、その人のところに カーソルを持っていくと画面にその人の名前が表示されるようにしたいです。 たとえばｘ、ｙの座標、共に（２００、２００）の所に その人物の中心があるとすれば、その前後±５０ぐらいの範囲で この名前が表示されるようにしたいです。 まだまだ未熟で分からないことだらけなので、どなたか分かる方 ご指導ください。ヨロシクお願いします。 <html> <head> <title>情報収集</title> </head> <body> <script type="text/javascript"> window.document.onmousemove = getMouseXY; function getMouseXY(evt){ // x,yとpageX,Y if (window.createPopup){ x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; } else{ x = evt.pageX; y = evt.pageY; } document.getElementById("result1").innerHTML = "(x,y) = "+x + ", "+y; // offsetX,YとlayerX,Y if (document.all){ cx = event.offsetX; cy = event.offsetY; } else{ cx = evt.layerX; cy = evt.layerY; } document.getElementById("result2").innerHTML = "(offsetX,offsetY) = "+cx + ", "+cy; } </script> <IMG src="q600.jpg" name="img1"> <br> <div id="result1"></div> <div id="result2"></div> <script type="text/javascript"> function eve1(e){ window.status="[ 座標位置 ] : "+"( x , y ) = "+"( "+x+" , "+y+" )"; return true; } document.onmousedown = eve1; </script> <script type="text/javascript"> function openWindow1(){ window.open("serv.html","OpenWindow","screenX=20,screenY=50,left=20,top=50,width=160,height=240"); } document.ondblclick=openWindow1(); </script> </body> </html>
- ベストアンサー
- JavaScript
- 初心者なのですが教えてください。
ＨＴＭＬで初めてプログラムを作ってみました。 ある画像があり、カーソルを動かすとｘ、ｙ座標を表示させる プログラムを作りました。 今回これを改良したいのです。 画像の中に、人の絵がありまして、その人のところに カーソルを持っていくと画面にその人の名前が表示されるようにしたいです。 たとえばｘ、ｙの座標、共に（２００、２００）の所に その人物の中心があるとすれば、その前後±５０ぐらいの範囲で この名前が表示されるようにしたいです。 まだまだ未熟で分からないことだらけなので、どなたか分かる方 ご指導ください。ヨロシクお願いします。 <html> <head> <title>情報収集</title> </head> <body> <script type="text/javascript"> window.document.onmousemove = getMouseXY; function getMouseXY(evt){ // x,yとpageX,Y if (window.createPopup){ x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; } else{ x = evt.pageX; y = evt.pageY; } document.getElementById("result1").innerHTML = "(x,y) = "+x + ", "+y; // offsetX,YとlayerX,Y if (document.all){ cx = event.offsetX; cy = event.offsetY; } else{ cx = evt.layerX; cy = evt.layerY; } document.getElementById("result2").innerHTML = "(offsetX,offsetY) = "+cx + ", "+cy; } </script> <IMG src="q600.jpg" name="img1"> <br> <div id="result1"></div> <div id="result2"></div> <script type="text/javascript"> function eve1(e){ window.status="[ 座標位置 ] : "+"( x , y ) = "+"( "+x+" , "+y+" )"; return true; } document.onmousedown = eve1; </script> <script type="text/javascript"> function openWindow1(){ window.open("serv.html","OpenWindow","screenX=20,screenY=50,left=20,top=50,width=160,height=240"); } document.ondblclick=openWindow1(); </script> </body> </html>
- ベストアンサー
- HTML
- javascriptで困っています
スマホでタッチした場所の座標を取得しようとしているのですが、いろいろ調べて以下のように作ってみましたが、座標が取得できません。どこを直せばいいのか、教えていただきたく投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <script type="text/javascript" charset="utf-8"> var touch_box = document.getElementById("box"); touch_box.addEventListener("touchstart", function(e){ document.getElementById("txt0").innerHTML = "スタート"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchmove", function(e){ document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchend", function(e){ document.getElementById("txt0").innerHTML = "エンド"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); </script> </head> <body> <div id="box"> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </div> </body> </html>
- ベストアンサー
- JavaScript
- つづきです・2
先ほどの質問のプログラムです。 どうぞよろしくお願いいたします。 （＊印はサイトアドレスまたはファイル名です。） <script tupe="text/javascript"> <!-- window.onerror=null function getMouseX(e){ if(document.layers)return e.pageX if(document.all) return document.body.scrollLeft+event.clientX } function getMouseY(e){ if(document.layers)return e.pageY if(document.all) return document.body.scrollLeft+event.clientY } function moveLAYER(layName,x,y){ if(document.layers)document.layers[layName].moveTo(x,y) //NN用 if(document.all)document.all(layName).style.pixelLeft=x //IE用 if(document.all)document.all(layName).style.pixelTop=y //IE用 } function setBGCOLOR(layName,color){ if(document.layers)document.layers[layName].bgColor=color if(document.all)document.all(layName).style.backgroundColor=color } var nn4=!!document.layers var ie4=!!document.all function showHELP(no,e){ var offsetx=1 var offsety=1 moveLAYER('helplay'+no,(getMouseX(e)+offsetx),(getMouseY(e)+offsety)) } function hideHELP(no,e){ moveLAYER('helplay'+no,-100,-3) } //--> </script> <STYLE TYPE="text/css"> <!-- A { font-family:Osaka,Arial;font-size:10pt } .helplay { position:absolute;top:-100;left:-3 <!----> </STYLE> </head> <body bgcolor="#969696" link="#3c3c3c" text="white"> （つづきます） 関連URL：http://oshiete1.goo.ne.jp/kotaeru.php3?q=453166
- 締切済み
- JavaScript
- ＩＥのイベントでのウインドウ位置の取得
以前に、MdNの「リンクにマウスオーバーするとポップアップで説明が表示される」というサンプルの記述がうまく動作しないという質問で、FairefoxやSafariではその回答でうまく動作するようなのですが、ＩＥの動作がまだ駄目なようなのです。 ＩＥのイベントが発生した時のマウス座標の取得は、Javascriptで、 function OnScreenHelp(x,y){ if(document.all) { /* IEでの処理 */ document.getElementById(strID).style.left = event.x + document.body.scrollLeft + 15; document.getElementById(strID).style.top = event.y + document.body.scrollTop + 0; }else{ /* IE以外の処理 */ document.getElementById(strID).style.left = x + 15 + "px"; document.getElementById(strID).style.top = y + 0 + "px"; } } のような記述になっているのですが、関数OnScreenHelp(x,y)のx,yがbodyの本文内で、event.pageX、event.pageYのようにＮＮ系の記述になっているため、ＩＥではこのx,yの値は使えないので上記のような記述になっているようなのです。上記の記述ではうまくポップアップしてくれないので、 event.xやevent.yの所の記述がまずいのかな？と思って、ちょっと調べてみて、window.event.offsetXやwindow.event.offsetYに変更してやってみたのですが、うまくいきません。ここの所の、IEの記述としては、どのように記述したらよいか分かりかねています。ご経験のある方、ご教示願えたらと思います。 よろしくお願い致します。
- 締切済み
- JavaScript
- Netscapeで動かない
みなさん、こんにちは。Blackwinglsです。 以下のようなScriptを作成したのですが、Netscapeで動いてくれません(^^;) IEしか持っていないので、Netscapeに対応させるにはどうしたら良いのかさっぱりわかりません。 <script language="JavaScript"> <!-- var ax=20 function mv() { if(document.all) { obj=document.all.L1.style WIDTH=document.body.clientWidth } if(document.layers) { obj=document.L1 WIDTH=window.innerWidth } setTimeout("mv()",100) x=obj.left n=x.length y=(eval(x.substring(0,n-2))-ax) obj.left=y+"px" x2=obj.width n2=x2.length y2=(eval(x2.substring(0,n2-2))) if(y < -y2) { obj.left=WIDTH } } //--> </script> 何処が間違っているのでしょうか？ 良きアドバイスをお願いします。
- ベストアンサー
- JavaScript
- スクロール位置 ページ切り替え前と同じにしたい
POST送信をしてページが切り替わった時に、切り替え前のスクロール位置にスクロールが来るようにしたいです。 以下のソースでスクロール位置は取得できるようなのですが、切り替え後のページに反映させるにはどうしたらいいでしょうか？ function getScrollPosition() { var obj = new Object(); obj.x = document.documentElement.scrollLeft || document.body.scrollLeft; obj.y = document.documentElement.scrollTop || document.body.scrollTop; return obj; }
- 締切済み
- JavaScript
- FireFoxでブラウザーと閉じる時に特定の処理を実行したいのですが良い方法を教えてください。
ブラウザーを閉じる時に特定の処理をWebページ内で実行したのですが、FireFoxでは可能でしょうか? IEでは、下記のロジックで対応することが出来ました。 window.onunload=function() { var x=window.event.clientX,y=window.event.clientY; var w=document.body.clientHeight; if (y<0 &(w-5)<x || x<15) { alert('IEを閉じます。'); } }
- 締切済み
- JavaScript
- Jquery＆JAVAでの変数受け渡しについて、
こんにちは、行き詰ってしまって質問させてください。 ダイアログ表示のBOXYプラグインを使おうと思っているのですが、 http://onehackoranother.com/projects/jquery/boxy/ どうしても、マウスのY位置を渡すことができません。 $(document).ready(function(){ var $bdY = 0; $('.boxy').boxy({'x':43,'y':100}); $('.boxyview').click(function(event){ $bdY = event.pageY; }); $('.boxyview').boxy({'x':160,'y':$bdY,'title': 'Y: ' + $bdY}); }); これでやると、$bdY＝0になってしまい、マウスの近くにダイアログが表示されず、 一番上（0の位置）に表示されてしまいます。 $bdYにマウスのY座標を渡して、BOXYダイアログを表示したいのですが、 どなたかご指南よろしくお願いいたします。
- 締切済み
- Java
お礼
ありがとうございます！助かりました！