2017-01-02 4 views
4

"_top"ターゲットを使用して同じタブで開くように、次のリンクを設定しました。 「_parent」だけでなく、いくつかの理由のために、彼らは新しいタブで開くを保つ。私は別のブラウザを試してみた、異なるデバイスが、それはまだ起こる。"_top"または "_parent"に設定されたターゲット属性が新しいタブで開くのはなぜですか?

$(document).ready(function() { 
 
    // for slide-out menu 
 
    $('.js-nav').click(function() { 
 
    $(this).parent().find('.menu').toggleClass('active'); 
 
    if ($(this).find('i.fa').hasClass('fa-bars')) { 
 
     $(this).find('i.fa').removeClass('fa-bars').addClass('fa-times'); 
 
    } else if ($(this).find('i.fa').hasClass('fa-times')) { 
 
     $(this).find('i.fa').removeClass('fa-times').addClass('fa-bars'); 
 
    } 
 
    }); 
 
});
html, 
 
body { 
 
    width: 600px; 
 
    height: 50px; 
 
} 
 
.toggle-nav { 
 
    margin: auto 0 auto 0; 
 
    float: left; 
 
    color: #423c4c; 
 
} 
 
.toggle-nav:hover { 
 
    color: #423c4c; 
 
} 
 
.nav-wrap { 
 
    overflow: hidden; 
 
} 
 
.menu { 
 
    float: left; 
 
    visibility: hidden; 
 
    position: relative; 
 
    right: 100%; 
 
    transition-duration: 5s; 
 
    -webkit-transition-duration: 5s; 
 
} 
 
.menu.active { 
 
    visibility: visible; 
 
    right: 0px; 
 
    transition-duration: 1s; 
 
    -webkit-transition-duration: 1s; 
 
} 
 
.menu ul { 
 
    text-align: justify; 
 
    min-width: 400px; 
 
    margin: 0 auto; 
 
    padding-right: 20px; 
 
} 
 
.menu ul:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
.menu ul li { 
 
    margin-top: 2%; 
 
    display: inline-block; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-family: 'Alef', sans-serif; 
 
    font-size: 13px; 
 
    color: #423c4c; 
 
} 
 
.menu ul li a:link { 
 
    color: #423c4c; 
 
    text-decoration: none; 
 
} 
 
.menu ul li a:visited { 
 
    color: #423c4c; 
 
    text-decoration: none; 
 
} 
 
.menu ul li a:hover { 
 
    <!-- border-bottom: 1px solid #423c4c; 
 
    -->text-decoration: none; 
 
    background-color: #fce2e2; 
 
    ; 
 
    color: red; 
 
} 
 
.menu ul li a:active { 
 
    color: #423c4c; 
 
} 
 
.menu ul li ul { 
 
    display: inline-block; 
 
    position: absolute; 
 
    right: 272px; 
 
    top: 25px; 
 
} 
 
.menu ul li ul li { 
 
    display: table; 
 
    font-size: 13px; 
 
    right: 0px; 
 
    text-align: right; 
 
    background-color: #fce2e2; 
 
    padding: 5px; 
 
    margin-top: 0px; 
 
    word-spacing: 1px; 
 
    min-width: 130px; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<a class="toggle-nav js-nav" href="#/"><i class="fa fa-bars fa-2x"></i></a> 
 
<div class="nav-wrap"> 
 
    <nav class="menu"> 
 
    <ul> 
 
     <li> 
 
     <a href="http://google.com" target="_top">link1</a> 
 
     </li> 
 
     <li> 
 
     <a href="http://pinterest.com" target="_top">link2</a> 
 
     </li> 
 
     <li> 
 
     <a href="http://www.awwwards.com" target="_top">link3</a> 
 
     </li> 
 
     <li> 
 
     <a href="http://dribbble.com" target="_top">link4</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div>

JSfiddle demo

助けてください。

おかげ

メイ

+1

あなたは 'iframe'を使用していますか? – Satpal

+0

iframeにターゲット '_top'を使用します。iframeを使用して、すべてのクリックを親タブで開く場合は、' _top'を使用できます。使用する必要はありません。 –

+0

よくある質問....何が質問ですか?私は何も見つけられない..... !! – Jai

答えて

2

JSFiddleやStackOverflowのStackSnippetsを含む他のサイトで使用されているiFrameのサンドボックス属性の存在に起因しています。

あなたのコードは属性が設定されたが、許すトップナビゲーションセットを持っていないことでhere

のように一人で立ったとき、新しいのを除いて、フレームから抜け出すために許可されていない作品ウィンドウ/タブ

https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe

サンドボックスHTML5のみ

この属性を指定すると、空の文字列として指定すると、インラインフレームに表示されるコンテンツに余分な制限が適用されます。属性の値は、空の文字列(すべての制限が適用されます)またはスペースで区切られた特定の制限を解除するトークンのリストのいずれかです。有効なトークンは次のとおりです。

  • allow-forms:埋め込み閲覧コンテキストがフォームを送信できるようにします。このキーワードが使用されない場合、この操作は許可されません。
  • allow-modals:埋め込みブラウズコンテキストがモーダルウィンドウを開くことを許可します。
  • allow-orientation-lock:埋め込みブラウズコンテキストが画面の向きをロックする機能を無効にすることを許可します。
  • allow-pointer-lock:埋め込みブラウズコンテキストがPointer Lock APIを使用できるようにします。
  • allow-popups:ポップアップを許可します(window.open、target = "_ blank"、showModalDialogなど)。このキーワードを使用しないと、その機能は自動的に失敗します。
  • allow-popups-to-escape-sandbox:サンドボックス化されたドキュメントで、サンドボックス化フラグを強制せずに新しいウィンドウを開くことができます。これにより、たとえば、サードパーティの広告がリンク先ページに同じ制限を課すことなく安全にサンドボックス化されます。
  • allow-presentation:埋め込み者がiframeでプレゼンテーションセッションを開始できるかどうかを制御できるようにします。
  • allow-same-origin:コンテンツを通常の起源のものとして扱うことを許可します。このキーワードが使用されていない場合、埋め込みコンテンツは固有の起源からのものとして扱われます。
  • allow-scripts:埋め込みブラウジングコンテキストでスクリプトを実行できます(ポップアップウィンドウは作成しません)。このキーワードが使用されない場合、この操作は許可されません。
  • allow-top-navigation:埋め込みブラウジングコンテキストがコンテンツをトップレベルの閲覧コンテキストにナビゲート(読み込み)することを許可します。このキーワードが使用されない場合、この操作は許可されません。
+1

@mplungjanの詳細な説明をありがとうございます!私はWixプラットフォーム(HTMLスニペットフレーム内)でこのメニューを使用していましたが、それは完璧に機能しましたが、彼らはフレームワークを変更すると思います。 – mey

+0

ようこそ。それが助けられたら、[こちらを読む](http://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work) – mplungjan

0

あなたがiframeを使用して、すべてが親タブで[開く]をクリックし、あなたがそれ以外の場合は

+0

ありがとうスーパーユーザー。私はiframeを使用していません。私はそれをテンプレートウェブサイトのコードスニペットとして使用しています。 – mey

0

それを使用する必要が_topを使用することはできませんたい場合我々は、iframeのためのターゲット_topを使用あなたは同じタブのリンクを開き、ターゲットを追加する必要はありません.....それは自動的に同じタブのリンクを開きます(デフォルトターゲット値は "_self")

+0

ありがとうSrijan。それはナビバーが完全に消えるように思えます...それは理にかなっていますか? – mey

関連する問題