C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[9]: 子ウィンドウからの親ウィンドウ情報取得

分類:[JavaScript]　

IE11にて以下のような処理を行っているのですが、
エラー: 未定義または NULL 参照のプロパティ 'href' は設定できませんとなります。
デバッガで見るとwindowのオブジェクトはありますが、それ以降の
openerの情報がUnDefinedとなってしまいます。
一連の処理の中で何か問題があればご指摘をお願いします。

親ウィンドウの処理
・ハイパーリンクをクリックすると子画面をwindow.openを使用して表示

子ウインドウの処理
・画面上の条件をもとに検索処理を行う。
・検索結果の一覧にあるハイパーリンクをクリックすると親画面のテキストボックスに選択した一覧の値を反映
（window.opener.document.親フォーム名.オブジェクト名=選択した値）

■No85859 (k3user さん) に返信

コピペして実行すれば質問者さんの問題を再現できる必要最低限のサンプルコードを作って
それをここに書いていただけませんか？

返信ありがとうございます。
現在、ソースコードを編集してますので、しばらくお待ち下さい。

以下のようなコードになります。
(申し訳ございません。半角での投稿ができなかったため全角にしています。)

＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞親画面のＡＳＰ＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ　ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！－－

ｖａｒ　ｗＬａｓｔＦＮｏ／／最後にフォーカスがあったコードテキストボックスＮＯ／／

ｆｕｎｃｔｉｏｎ　ＳａｒｃｈＢｔｎＥｎａＦ（Ｎｏ）｛
ｄｏｃｕｍｅｎｔ．ｆｒｍＦｏｒｍ．ＳａｒｃｈＢｔｎ．ｄｉｓａｂｌｅｄ　＝　ｆａｌｓｅ；
ｗＬａｓｔＦＮｏ　＝　Ｎｏ
｝

ｆｕｎｃｔｉｏｎ　ｋｅｎｓａｋｕ（）
｛
ｖａｒ　ｗｉｎＷｉｄｔｈ　　＝　ｓｃｒｅｅｎ．ｗｉｄｔｈ　－　４６０；
ｖａｒ　ｗｉｎＨｅｉｇｈｔ　＝　ｓｃｒｅｅｎ．ｈｅｉｇｈｔ　－　２５０；
ｖａｒ　ｐｏｉｎｔＸ　＝　２０；
ｖａｒ　ｐｏｉｎｔＹ　＝　１０；
ｖａｒ　ｗｉｎＯｐｔ　＝　’ｗｉｄｔｈ＝’　＋　ｗｉｎＷｉｄｔｈ　＋　’，ｈｅｉｇｈｔ＝’　＋　ｗｉｎＨｅｉｇｈｔ　＋　’，ｔｏｐ＝’　＋　ｐｏｉｎｔＹ　＋　’，ｌｅｆｔ＝’　＋　ｐｏｉｎｔＸ　＋　’，ｒｅｓｉｚａｂｌｅ＝ｙｅｓ，ｓｃｒｏｌｌｂａｒｓ＝ｙｅｓ，ｓｔａｔｕｓ＝ｙｅｓ，ｍｅｎｕｂａｒ＝ｙｅｓ，’；
ｗｉｎｄｏｗ．ｏｐｅｎ（’ｃｈｉｌｄＷｉｎｄｏｗ．ａｓｐ？’　＋　’＆ＴｘｔＮｏ＝’　＋　ｗＬａｓｔＦＮｏ　，’Ｓａｒｃｈ’，　ｗｉｎＯｐｔ）；
｝

／／－－＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞

＜ＢＯＤＹ　＞
＜ＦＯＲＭ　ｎａｍｅ＝”ｆｒｍＦｏｒｍ”　ｍｅｔｈｏｄ＝”ｐｏｓｔ”＞
＜ＴＡＢＬＥ　ｂｏｒｄｅｒ＝”０”＞
＜ＴＲ＞
＜ＴＤ　ａｌｉｇｎ＝”ＣＥＮＴＥＲ”＞子画面から反映させるエリア＜／ＴＤ＞
＜ＴＤ　ＡＬＩＧＮ＝”ＬＥＦＴ”　ＣＯＬＳＰＡＮ＝”２”＞
＜ｉｎｐｕｔ　　ｔｙｐｅ＝”ｔｅｘｔ”　ｎａｍｅ＝”ｔｘｔＣｄ１”　ｉｄ＝”ｔｘｔＣｄ１”　　　ＯｎＦｏｃｕｓ＝”ＳａｒｃｈＢｔｎＥｎａＦ（１）”；＞
＜ｉｎｐｕｔ　　ｔｙｐｅ＝”ｔｅｘｔ”　ｎａｍｅ＝”ｔｘｔＣｄ２”　ｉｄ＝”ｔｘｔＣｄ２”　　　ＯｎＦｏｃｕｓ＝”ＳａｒｃｈＢｔｎＥｎａＦ（２）”　；＞
＜ｉｎｐｕｔ　　ｔｙｐｅ＝”ｔｅｘｔ”　ｎａｍｅ＝”ｔｘｔＣｄ３”　ｉｄ＝”ｔｘｔＣｄ３”　　　ＯｎＦｏｃｕｓ＝”ＳａｒｃｈＢｔｎＥｎａＦ（３）”　；＞
＜ｉｎｐｕｔ　　ｔｙｐｅ＝”ｔｅｘｔ”　ｎａｍｅ＝”ｔｘｔＣｄ４”　ｉｄ＝”ｔｘｔＣｄ４”　　　ＯｎＦｏｃｕｓ＝”ＳａｒｃｈＢｔｎＥｎａＦ（４）”　；＞
＜ｉｎｐｕｔ　　ｔｙｐｅ＝”ｔｅｘｔ”　ｎａｍｅ＝”ｔｘｔＣｄ５”　ｉｄ＝”ｔｘｔＣｄ５”　　　ＯｎＦｏｃｕｓ＝”ＳａｒｃｈＢｔｎＥｎａＦ（５）”　；＞
＜／ＴＤ＞
＜／ＴＲ＞
＜／ＴＡＢＬＥ＞
＜ＴＡＢＬＥ　ｗｉｄｔｈ＝”１００％”　ＣＬＡＳＳ＝”ｐａｇｅ”＞
＜ＣＯＬＧＲＯＵＰ　ｓｐａｎ＝”８”　　ｗｉｄｔｈ＝”１２０”＞　
＜ＴＨ＞
＜ｉｎｐｕｔ　ｔｙｐｅ＝”ｂｕｔｔｏｎ”　ｖａｌｕｅ＝”業者検索”　ｏｎＣｌｉｃｋ＝”ｋｅｎｓａｋｕ（）；”　ＮＡＭＥ＝”ＳａｒｃｈＢｔｎ”　＞＆ｎｂｓｐ；
＜ｉｎｐｕｔ　ｔｙｐｅ＝”ｂｕｔｔｏｎ”　ｖａｌｕｅ＝”終　了”　ｏｎＣｌｉｃｋ＝”ＪａｖａＳｃｒｉｐｔ：ｗｉｎｄｏｗ．ｃｌｏｓｅ（）”　＞＜／ＴＨ＞
＜／ＴＲ＞
＜／ＴＡＢＬＥ＞
＜／ＦＯＲＭ＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞

＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞子画面のＡＳＰ＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ　ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞

／／＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝／／
／／親ウインドウに反映　　／／
／／＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝／／
ｆｕｎｃｔｉｏｎ　ＳＥＮＤＧｙｏＣＤ（ＧｙｏｓｈａＣＤ）
｛
／／　本来は以下のコメントしたコードで動いています。
／／　Ｗｉｎｄｏｗ．ｏｐｅｎｅｒ．ｄｏｃｕｍｅｎｔ．ｆｒｍＦｏｒｍ．ｔｘｔＣｄ＜％＝ＴＲＩＭ（ｗＴｘｔＮｏ）％＞．ｖａｌｕｅ　＝　ＧｙｏｓｈａＣＤ；
Ｗｉｎｄｏｗ．ｏｐｅｎｅｒ．ｄｏｃｕｍｅｎｔ．ｆｒｍＦｏｒｍ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（”ｔｘｔＣｄ１”）．ｖａｌｕｅ　＝　’ａａａ’；

｝

／／－－＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ　＞
＜ＴＡＢＬＥ　ｗｉｄｔｈ＝”１００％”　ｃｌａｓｓ＝”ｐａｇｅ”＞
＜ＴＢＯＤＹ＞
＜ＴＲ＞＜ＴＨ＞子画面のＡＳＰ＜／ＴＨ＞＜／ＴＲ＞
＜／ＴＢＯＤＹ＞
＜／ＴＡＢＬＥ＞
＜ＦＯＲＭ　ｎａｍｅ＝”ｆｒｍＦｏｒｍ”　　ｍｅｔｈｏｄ＝”ｐｏｓｔ”＞
＜ＴＡＢＬＥ　ＡＬＩＧＮ＝”ＣＥＮＴＥＲ”　ｂｏｒｄｅｒ＝”０”＞
＜ＴＲ＞
＜ＴＨ＞こーど名称＜／ＴＨ＞
＜ＴＤ＞＜ＩＮＰＵＴ　ｔｙｐｅ＝”ｔｅｘｔ”　ｎａｍｅ＝”ｔｘｔＣｄ”＞＜／ＴＤ＞
＜／ＴＲ＞
＜／ＴＡＢＬＥ＞
＜ＢＲ＞
＜ＩＮＰＵＴ　ｃｌａｓｓ＝”ｎｏｍａｌＢｔｎ”　ｔｙｐｅ＝”ｂｕｔｔｏｎ”　ｖａｌｕｅ＝”検索実行（検索処理はＡＳＰで実行）”　ｏｎＣｌｉｃｋ＝”ｓｕｂｍｉｔ（）”　＞
＜／ＦＯＲＭ＞

／／　サーバのＡＳＰでレコード分ループ　ｓｔａｒｔ
＜ＴＡＢＬＥ　ＡＬＩＧＮ　＝　”ＣＥＮＴＥＲ”　ＢＯＲＤＥＲ　＝”０”＞
＜ＴＲ＞
＜ＴＲ＞
＜ＴＤ＞＜ＤＩＶ　ＡＬＩＧＮ＝”ＣＥＮＴＥＲ”＞＜Ａ　ＨＲＥＦ＝”ＪａｖａＳｃｒｉｐｔ：ＳＥＮＤＣＤ（’コード’）”＞コード＜／Ａ＞＜／ＤＩＶ＞＜／ＴＤ＞
＜／ＴＲ＞

＜／ＴＡＢＬＥ＞
／／　サーバのＡＳＰでレコード分ループ　Ｅｎｄ
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞

■No85864 (k3user さん) に返信

> 半角での投稿ができなかったため全角にしています。

図表モードにしたらできないですかね？　ちょっと試してみますね。

あと、コードはもっと削れませんか？　table タグとか css とか問題を再現する荷が不要ですよね？

■No85864 (k3user さん) に返信

図表モードで試してみます。ダメだったらすみません。 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    function getCars() {
        $.ajax({
            type: "POST",
            url: "097_jQueryAjaxAndWebService.asmx/GetCarsByDoors",
            data: '{"doors":' + $("#ddlDoors").val() + '}',

            contentType: "application/json; charset=utf-8",
            success: function (cars) {
                $('#output').empty();
                $.each(cars, function (index, car) {
                $('#output').append(
                    '<p><strong>' + car.Make + ' ' +
                    car.Model + '</strong><br /> Year: ' +
                    car.Year + '<br />Doors: ' +
                    car.Doors + '<br />Colour: ' +
                    car.Colour + '<br />Price: &pound;' +
                    car.Price + '</p>');
                });
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $('#output').text('textStatus: ' + textStatus +
                    ', errorThrown: ' + errorThrown);
            }
        });
    }
    //]]>
    </script>

	<meta charset="utf-8" />
</head>
<body>
    <div>
        Number of doors:
        <select name="ddlDoors" id="ddlDoors">
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
    </div>
    <input type="button"
           id="Button1"
           value="Get Cars"
           onclick="getCars();" />
    <div id="output"></div>
</body>
</html>

■No85864 (k3user さん) に返信

> 半角での投稿ができなかったため全角にしています。

上の通り、自分が試した限りでは図表モードにすれば html タグも表示されますしインデントも
されます。

もっともっとコードを削って、そのままコピペすれば問題を再現できるコードを、図表モードで
お願いします。

図表モードでの方法を教えていただきありがとうございます。

ご指摘をいただいた不要な部分を削りました。
やっていることは以下のとおりです。
・親画面でフォーカスの当たったテキストボックスの数値（txtCd1なら１を渡す。）
・子画面をwindow.openでオープン
・子画面で検索処理(サーバサイドVBScript)を行い、一覧に表示（コード、コード名称の一覧）
・コードのリンクをクリックするとJavaScript関数のSENDCDをコール（引数にコードを設定）
・SENDCD関数で親画面から引き継いだ番号を使用して親画面のテキストボックスに反映

以下のように直接値をセットしてみましたが、Window.openerがUndefinedでした。
Window.opener.document.frmForm.getElementById("txtCd1").value = 'aaa';

<HTML>
<HEAD>
<TITLE>親画面のASP</TITLE>
<SCRIPT LANGUAGE="JavaScript">

//最後にフォーカスがあったコードテキストボックスNO
var wLastFNo;

function SarchBtnEnaF(No){
	document.frmForm.SarchBtn.disabled = false;
	wLastFNo = No;
}

function kensaku()
{
	var winOpt = 'width=100,resizable=yes,scrollbars=yes,status=yes,menubar=yes,';
	window.open('childWindow.asp?' + '&TxtNo=' + wLastFNo ,'Sarch', winOpt);
}

</SCRIPT>

<FORM name="frmForm" method="post">
	<input  type="text" name="txtCd1" id="txtCd1"   OnFocus="SarchBtnEnaF(1)";>
	<input  type="text" name="txtCd2" id="txtCd2"   OnFocus="SarchBtnEnaF(2)" ;>
	<input  type="text" name="txtCd3" id="txtCd3"   OnFocus="SarchBtnEnaF(3)" ;>
	<input  type="text" name="txtCd4" id="txtCd4"   OnFocus="SarchBtnEnaF(4)" ;>
	<input  type="text" name="txtCd5" id="txtCd5"   OnFocus="SarchBtnEnaF(5)" ;>
	<input type="button" value="業者検索" onClick="kensaku();" NAME="SarchBtn" >&nbsp;
	<input type="button" value="終 了" onClick="JavaScript:window.close()" ></TH>
</FORM>


↓↓↓↓↓↓ここから子画面

<TITLE>子画面のASP</TITLE>
<SCRIPT LANGUAGE="JavaScript">

//親ウインドウに反映  //
function SENDGyoCD(GyoshaCD)
{
	// 本来は以下のコメントしたコードで動いています。
	// Window.opener.document.frmForm.txtCd<%=TRIM(wTxtNo)%>.value = CD;
	Window.opener.document.frmForm.getElementById("txtCd1").value = 'aaa';
}

</SCRIPT>

子画面のASP
<FORM name="frmForm"  method="post">
	コード名称
	<INPUT type="text" name="txtCd">
<INPUT type="button" value="検索実行(検索処理はASPで実行)" onClick="submit()" >
</FORM>
 サーバのASPでレコード分ループ start
	<A ｈｒｅｆ="JavaScript:SENDCD('コード値')">コード値
 サーバのASPでレコード分ループ End

■No85871 (k3user さん) に返信

> ↓↓↓↓↓↓ここから子画面
>
> <TITLE>子画面のASP</TITLE>
> <SCRIPT LANGUAGE="JavaScript">
>
> //親ウインドウに反映 //
> function SENDGyoCD(GyoshaCD)
> {
> // 本来は以下のコメントしたコードで動いています。
> // Window.opener.document.frmForm.txtCd<%=TRIM(wTxtNo)%>.value = CD;
> Window.opener.document.frmForm.getElementById("txtCd1").value = 'aaa';
> }
>
> </SCRIPT>
>
> 子画面のASP
> <FORM name="frmForm" method="post">
> コード名称
> <INPUT type="text" name="txtCd">
> <INPUT type="button" value="検索実行(検索処理はASPで実行)" onClick="submit()" >
> </FORM>
> サーバのASPでレコード分ループ start
> <A ｈｒｅｆ="JavaScript:SENDCD('コード値')">コード値
> サーバのASPでレコード分ループ End

↑ これコピペしても動きませんよね？

定義・意味不明の変数・関数が使われてますし、クラシック ASP がサーバー側で生成する html ソース
も必要です。

そもそも、問題は単純に JavaScript の問題だけではなく、クラシック ASP によるサーバー側での処理
と絡んだ問題のように見えます。

とりあえずクラシック ASP の影響を受けないように、子画面のコードの間違っているところは直して試
して見ましたが、期待通りに動きますけど・・・

>定義・意味不明の変数・関数が使われてますし、クラシック ASP がサーバー側で生成する html ソース
>も必要です。
申し訳ございませんでした。業務に関わる部分があったので、ASPの所は削除していました。
（ASPでやっていることは親画面、子画面からのパラメータをキーにしてSQLで検索を行い、レコードセットに格納する処理をしています。）
一覧から選択した行を選択するとそのレコードを親画面に返すのですが、その時に
以下のようにしていたのですが、openerがUndefinedになってしまいます。

Window.opener.親フォーム.テキストエリア = 子画面で選択した値

解決策を探していた所
以下のように呼出元ウィンドウに名前をつけることで解決しました。

呼出元
window.name = "Parent";
と自windowsの名前を定義

子ウィンドウ
var window_parent = window.open("", "Parent");
window_parent.document.frmForm.txtaCd<%=TRIM(wTxtNo)%>.value = CD;

この度は、色々と教えていただき誠にありがとうございました。

■No85887 (k3user さん) に返信

> 解決策を探していた所
> 以下のように呼出元ウィンドウに名前をつけることで解決しました。

それでホントに解決でいいのでしょうか？　解決策としては違うような気がし
ますけど。

参考に検証に使った html と JavaScript だけのコードをアップしておきます。
親 window に名前を付けるなんてことは必要ないです。コピペすれば動くので
試してみてください。

***** 親ページ 0021-parent.html *****

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script type="text/javascript">
    //<![CDATA[
        var wLastFNo;

        function SarchBtnEnaF(No) {
            wLastFNo = No;
        }

        function kensaku() {
            window.open('0021-child.html?TxtNo=' + wLastFNo,
                'search',
                'width=500,height=500,resizable=yes,scrollbars=yes,status=yes,menubar=yes')
        }
    //]]>
    </script>
</head>
<body>
    <form id="form1">
        <input type="text" name="txtCd1" id="txtCd1" onfocus="SarchBtnEnaF(1)" />
        <input type="text" name="txtCd2" id="txtCd2" onfocus="SarchBtnEnaF(2)" />
        <input type="text" name="txtCd3" id="txtCd3" onfocus="SarchBtnEnaF(3)" />
        <input type="text" name="txtCd4" id="txtCd4" onfocus="SarchBtnEnaF(4)" />
        <input type="text" name="txtCd5" id="txtCd5" onfocus="SarchBtnEnaF(5)" />
        <input type="button" value="業者検索" onclick="kensaku();" name="SarchBtn" />
    </form>
</body>
</html>

■No85887 (k3user さん) に返信

どうしても子ページのコードがアップできないのでちょっと待ってください。

WebSurferさん

ソースコードありがとうございます。
参考にさせていただきます。

親ウィンドウ名を指定する方法は暫定処置として
もう少し調べてみようと思います。
ASPの検索処理は今回の件と関係ないと思いこんでいたのですが、
検索処理を行っているASPに問題があるような気がしてきました。
ASP周りを詳しく調べてみます。

■No85887 (k3user さん) に返信

子ページ 0021-child.html
注：下のコードの a タグの < > は半角に書き換えてください。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
//<![CDATA[
function SENDGyoCD(GyoshaCD) {
var textBoxId = "txtCd" + GyoshaCD;
window.opener.document.getElementById(textBoxId).value = 'aaa';
}
//]]>
</script>
</head>
<body>
<form id="form1">
＜a href="javascript:SENDGyoCD('1')"＞txtDd1＜/a＞
＜a href="javascript:SENDGyoCD('2')"＞txtDd2＜/a＞
＜a href="javascript:SENDGyoCD('3')"＞txtDd3＜/a＞
＜a href="javascript:SENDGyoCD('4')"＞txtDd4＜/a＞
＜a href="javascript:SENDGyoCD('5')"＞txtDd5＜/a＞
</form>
</body>
</html>

■No85887 (k3user さん) に返信

すみません、前の書き込みが「図表モード」になってなかったです。「図表モード」にしてアップし直しました。

子ページ 0021-child.html
注：下のコードの a タグの < > は半角に書き換えてください。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script type="text/javascript">
    //<![CDATA[
       function SENDGyoCD(GyoshaCD) {
           var textBoxId = "txtCd" + GyoshaCD;
           window.opener.document.getElementById(textBoxId).value = 'aaa';
        }
    //]]>
    </script>
</head>
<body>
    <form id="form1">
        ＜a href="javascript:SENDGyoCD('1')"＞txtDd1＜/a＞
        ＜a href="javascript:SENDGyoCD('2')"＞txtDd2＜/a＞
        ＜a href="javascript:SENDGyoCD('3')"＞txtDd3＜/a＞
        ＜a href="javascript:SENDGyoCD('4')"＞txtDd4＜/a＞
        ＜a href="javascript:SENDGyoCD('5')"＞txtDd5＜/a＞
    </form>
</body>
</html>

ありがとうございます。
子ウィンドウのソースも参考にいたします。

いただいた親、子のサンプルを見る限り
自分の作ったもの（HTMLのみ）もおかしい所が見当たりません．．．

やはりASPが怪しいと思われるので、調査します。

C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[9]: 子ウィンドウからの親ウィンドウ情報取得

過去ログには書き込み不可