ブートストラップタブでiframe内でコンテンツをクリックしてください。

私には、ブートストラップタブ用のヘッダとタブコンテンツ用のiframeがあるindex.htmlファイルがあります。 IFRAME内に常駐ブートストラップタブでiframe内でコンテンツをクリックしてください。

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="1"> 
      <h3>tab1</h3> 
     </div> 
     <div class="tab-pane" id="2"> 
      <h3>tab2</h3> 
     </div> 
     <div class="tab-pane" id="3"> 
      <h3>tab3</h3> 
     </div> 
    </div> 
</body> 
</html>

私はそれを変更する方法インデックスファイルにタブをクリックしてコンテンツ：私は、タブのコンテンツ（ボディ）を持っているIframe.htmlの下に

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <script> 
     function switchTabInIframe(tab) { 
      var tabId = $('#iframe_1').contents().find('#1'); 
      $('.nav-tabs a[href="#' + tabId + '"]').tab('show'); 
     }; 
    </script> 

    <div id="exTab2" class="container"> 
     <ul class="nav nav-tabs"> 
      <li class="active"> 
       <a href="#1" data-toggle="tab" onclick="switchTabInIframe('1')" ;>1</a> 
      </li> 
      <li> 
       <a href="#2" data-toggle="tab" onclick="switchTabInIframe('1')">2</a> 
      </li> 
      <li> 
       <a href="#3" data-toggle="tab" onclick="switchTabInIframe('1')">3</a> 
      </li> 
     </ul> 
     <iframe src="iframe.html" height="300%" width="300" frameborder="0" name="iframe_1"></iframe> 
    </div> 
</body> 
</html>

？上記のコードは動作しません...コンソールにエラーはありません... Thx

出典

2016-12-18 Maxim Hash

ifram.htmlを編集/修正できますか？ – Searching

あなたのiframeのページにある関数を作成して呼び出す必要があります。インデックスページのスコープは、iframeと同じではなく、タブを切り替えることができます。私は...この更新プログラムを提案するインデックスページで

、switchframe(id)と呼ばれる新しい関数を作成し、Iframe.htmlの中であなたのonclick

function switchframe(id) { 
    document.getElementsByName('iframe_1').contentWindow.switchTabInIframe(id); 
}

から

function switchTabInIframe(tab) { 
     console.log('I can run'); 
     console.log(tab); 
     //perform your tab switch now. 
    };

これを呼び出すお聞かせください結果...

出典

2016-12-19 00:29:34 Searching

ありがとう、これは私が必要としたものです！ –

ここでは、役に立つ例を示します。タグをクリックすると、クリックされたタブに応じてiframe内のattr srcを変更する関数が実行されます。これはJQueryを使用しています。

function switchTabInIframe(whichOne) { 
 
    var iframesource = ""; 
 
    if (whichOne == 1) { 
 
     iframesource = "http://google.com"; 
 
     } else if (whichOne == 2) { 
 
     iframesource = "http://matthewbergwall.com"; 
 
     } else if (whichOne == 3) { 
 
     iframesource = "http://stackoverflow.com"; 
 
     } 
 
     $("#ciframe").attr("src", iframesource); 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>test</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <script> 
 
     function switchTabInIframe(tab) { 
 
      var tabId = $('#iframe_1').contents().find('#1'); 
 
      $('.nav-tabs a[href="#' + tabId + '"]').tab('show'); 
 
     }; 
 
    </script> 
 

 
    <div id="exTab2" class="container"> 
 
     <ul class="nav nav-tabs"> 
 
      <li class="active"> 
 
       <a href="#1" data-toggle="tab" onclick="switchTabInIframe(1)" ;>1</a> 
 
      </li> 
 
      <li> 
 
       <a href="#2" data-toggle="tab" onclick="switchTabInIframe(2)">2</a> 
 
      </li> 
 
      <li> 
 
       <a href="#3" data-toggle="tab" onclick="switchTabInIframe(3)">3</a> 
 
      </li> 
 
     </ul> 
 
     <iframe src="iframe.html" height="300%" width="300" frameborder="0" name="iframe_1" id="ciframe"></iframe> 
 
    </div> 
 
</body> 
 
</html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

出典

2016-12-19 00:11:04

これは役に立ちません、私はiframe内のDOMを操作する必要があります、srcは常に同じです。 –

ブートストラップタブでiframe内でコンテンツをクリックしてください。

答えて

関連する問題