ここから本文です

iframe内でのページ移動

ter********さん

2012/5/1515:38:10

iframe内でのページ移動

自社モバイルサイトを比較するために、ローカルで1つのhtmlファイルにiframeを2つ並べて1ページ内で2つのサイトを観覧できるようにしています。
そこで、inputフォームを追加設置して、URLのサブドメイン名だけを指定して、iframe内のサイトが移動するように作りたく。。。

比較対象は自社提供のサイトなので、サブドメイン以外は同じURLとなります。
例:
サイト1 : http://aaa.自社ドメイン名.co.jp
サイト2 : http://bbb.自社ドメイン名.co.jp

というサイトが20個ほどあります。

比較のためにブラウザを2つ開くのと高さ調整が難しかったり、
iframeのURLを一回一回編集するのも大変っです。

javascriptを使って上手く作れないものでしょうか?

閲覧数:
386
回答数:
1

違反報告

ベストアンサーに選ばれた回答

whi********さん

2012/5/1622:07:22

これでいかがでしょう。
textarea内のvalueや、selectのoption、各GUI部品のcssは、適宜 追加,削除,書き換えをして下さい。

------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0013)about:internet -->
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta content="text/html; charset=shift_jis" http-equiv="Content-Type" />
<script type="text/JavaScript">

function changeIFrameSrc(protocol, sub, domain, path, target){

function getVal(id){
return document.getElementById(id).value;
}

sub = document.getElementById(sub);
sub = sub.options[sub.selectedIndex].innerHTML;

document.getElementById(target).src = getVal(protocol)+sub+getVal(domain)+getVal(path);
}

</script>
</head>
<body>
<div style="position:absolute;top:10px;left:10px;">
<input type="text" id="protocol0" value="http://" style="width:50px;">
<select id="sub0" style="width:100px">
<option selected>aaa.</option>
<option>bbb.</option>
<option>ccc.</option>
<option></option>
</select>
<input type="text" id="domain0" value="orig_domain.co.jp" style="width:100px;">
<input type="text" id="dir0" value="/" style="width:140px;">
<input type="button" value="移動" onclick="changeIFrameSrc('protocol0','sub0','domain0','dir0','frame0');" style="width:50px"><br>
<iframe id="frame0" src="" style="margin-top:2px;width:480px;height:640px;"></iframe>
</div>

<div style="position:absolute;top:10px;left:500px;">
<input type="text" id="protocol1" value="http://" style="width:50px;">
<select id="sub1" style="width:100px">
<option>aaa.</option>
<option selected>bbb.</option>
<option>ccc.</option>
<option></option>
</select>
<input type="text" id="domain1" value="orig_domain.co.jp" style="width:100px;">
<input type="text" id="dir1" value="/" style="width:140px;">
<input type="button" value="移動" onclick="changeIFrameSrc('protocol1','sub1','domain1','dir1', 'frame1');" style="width:50px"><br>
<iframe id="frame1" src="" style="margin-top:2px;width:480px;height:640px;"></iframe>
</div>
</body>
</html>

質問した人からのコメント

2012/5/17 13:02:01

whiteapples0さん>

有難う御座います!!!!!
理想としていた機能が再現できました!!
本当にご丁寧に記述して頂いて、本当に嬉しいです!
有難う御座いました!!

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる