インラインフレームのページ「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を表示させることができるでしょうか?
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー