highslide jsで、表示された子ウィンドウ(?)の中のformで入力された内容を親ウィンドウの方で受け取りたい(そして、その値を表示したい)のですが、方法はあるでしょうか?


http://highslide.com/

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/08/06 22:21:08
  • 終了:2011/08/13 22:25:03

回答(2件)

id:km1981 No.1

km1981回答回数429ベストアンサー獲得回数492011/08/06 22:57:36

ポイント50pt

>highslide jsで、表示された子ウィンドウ(?)の中のform

http://highslide.com/ のhighslide jsでは

子ウィンドウにformはありませんけど

どのhighslide jsを指してますか?


一般的に子ウィンドウのformオブジェクトは

 子ウィンドウ名.フォーム名.オブジェクト名.value

または

 子ウィンドウ名.getElementById(id名).value

で受け取ることができます

id:rapuntuleru

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

フォーム等は、上記URLの中のサンプルの「Iframe with form」のようなイメージです。

2011/08/06 22:59:18
id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922011/08/07 08:41:07

ポイント50pt

highslideのパッケージに入ってるexampleを改造してみました。

Highslide JS - JavaScript thumbnail viewer

このzipに入っているhighslideフォルダを適当な場所にコピーして、以下のような配置にしてindex.htmlをブラウザで開けば確認できます。

  • highslideフォルダ
  • index.html
  • iframe.html

index.htmlで保存

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="highslide/highslide-with-html.js">
</script><link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
</script>
<script>
function getValue(value) {
	setTimeout(function() {
		document.getElementById('result').textContent = value + '! '+ value + '!';
	}, 1500);
}
</script>
</head>
<body>
<div>
<a href="iframe.html" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">
	Content in iframe
</a>
</div>
<br>
<div id="result" style="font-size: 500%"></div>
</body>
</html>

iframe.htmlで保存

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function doSubmit() {
	var frm = document.getElementById("frm");
	var value = "";
	for (var i = 0; i < frm.colour.length; i++) {
		if (frm.colour[i].checked) {
			value = frm.colour[i].value;
			break;
		}
	}

	//iframeから親フレームのページを書き換える
	parent.document.getElementById('result').textContent = value;
	
	//iframeから親フレームの関数を実行
	parent.getValue(value);
	
	
	parent.hs.close();
}
</script>
</head>
<body>
<form action="" onsubmit="return false" id="frm" style="margin: 0">
<p>What is your favourite colour?</p>
<p>
	<input type="radio" name="colour" id="red" value="red" checked="checked" />
	<label for="red">Red</label>

	<input type="radio" name="colour" id="blue" value="blue" />
	<label for="blue">Blue</label>

	<input type="radio" name="colour" id="green" value="green" />
	<label for="green">Green</label>
</p>
<p style="text-align: right; ">
	<input type="submit" value="Submit" onclick="doSubmit()" />
</p>
</body>
</html>

iframeからparentを使って親フレームにアクセスする方法でいいと思います。

id:rapuntuleru

動作確認できました。

ありがとうございます。

2011/08/07 11:12:12

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません