人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

http://highslide.com/

●質問者: rapuntuleru
●カテゴリ:コンピュータ インターネット
✍キーワード:js ウィンドウ 入力 方法
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● km1981
●50ポイント

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

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

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

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


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

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

または

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

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

◎質問者からの返答

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

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


2 ● Cherenkov
●50ポイント

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

Highslide JS - JavaScript thumbnail viewer

このzipに入っているhighslideフォルダを適当な場所にコピーして、以下のような配置にしてindex.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を使って親フレームにアクセスする方法でいいと思います。

◎質問者からの返答

動作確認できました。

ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ