質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2440閲覧

javascript内のボタンをクリックをしたときにインラインフレーム内に表示させたい

tajix_japan

総合スコア132

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/01/02 12:49

インラインフレームのページ「index.html」があります。
このページのインラインフレーム中に、nakami.htmlが入っています。

【index.html】

<iframe name="inf" src="nakami.html"></iframe>

nakami.htmlに記載されている【<a href="http://wxample.com/hoge.php">クリック</a>】をクリックすると、当然ですが、http://wxample.com/hoge.phpが同じインラインフレームの中に表示されます。

やりたいこと

インラインフレームがあるindex.htmlにボタンを付けて、一度インラインフレーム内で「http://wxample.com/hoge.php」に飛んだ後に再度nakami.htmlに戻れるようにしたいと思います。

index.htmlは全面インラインフレームであり、ボタンを記載する適当な場所がない状況のため、jQueryを使い、スクロールすると、特定の固定位置にボタンが表示される方法で対処したいと考えています。

下記がそのソースになります。


<style> #fixedTop { right: 10px; bottom: 70px; width: 50px; height: 50px; line-height: 50px; color: #fff; font-size: 10px; text-align: center; display: none; background: rgba(255,0,0,0.5);; position: fixed; z-index: 9999; border-radius: 5px; -webkit-transform: translateZ(0); } #fixedTop:hover { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0.7; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function(){ var showTop = 100; $('body').append('<a href="javascript:void(0);" id="fixedTop">▲検索TOP</a>'); var fixedTop = $('#fixedTop'); fixedTop.on('click',function(){ $('html,body').animate({scrollTop:'0'},500); }); $(window).on('load scroll resize',function(){ if($(window).scrollTop() >= showTop){ fixedTop.fadeIn('normal'); } else if($(window).scrollTop() < showTop){ fixedTop.fadeOut('normal'); } }); }); </script> <iframe name="inf" src="nakami.html"></iframe>

上記のソースでは、
「▲検索TOP」のボタンを押すと0.5秒でそのページの一番上に戻ります。

今回は、トップの位置に戻るのではなく、インラインフレーム内に表示させることになりますので、下記の部分を改造しました。

【改造前】
$('body').append('<a href="javascript:void(0);" id="fixedTop">▲検索TOP</a>');

【改造後】
$('body').append('<a href="nakami.html" target="inf" id="fixedTop">▲検索TOP</a>');

結果

無事nakami.htmlは表示されるのですが、target=_topのような動きになります。すなわち、nakami.html が新規ページとして新たに表示されインラインフレームは解除された形になります。(target="inf" が機能しません)

どうすれば、▲検索TOPボタンを押したときにインラインフレーム内に無事nakami.htmlを表示させることができるでしょうか?

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/01/02 15:19

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答1

0

自己解決

どうも別の要因のようです。
もう少し調べて踏めて移転がありましたら再度投稿します。

投稿2017/01/02 22:28

tajix_japan

総合スコア132

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問