Auf Bootstrap Registerkarte klicken Sie auf Inhalt innerhalb iframe

Ich habe und index.html Datei, wo ich Header für Bootstrap-Registerkarten und Iframe mit Tabs Inhalt haben.Auf Bootstrap Registerkarte klicken Sie auf Inhalt innerhalb 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> 
    <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>

Unten iframe.html wo ich Inhalt haben (Körper) der Registerkarten:

<!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>

Wenn eine Registerkarte in der Indexdatei klicken, wie kann ich es Inhalte ändern, die innerhalb des iframe wohnt? Der obige Code funktioniert nicht ... Es gibt keinen Fehler in der Konsole ... Thx

Quelle

2016-12-18 Maxim Hash

können Sie die ifram.html bearbeiten/ändern? – Searching

Sie eine Funktion benötigen erstellen und aufrufen, die in Ihrer iframe Seite. Der Bereich auf Ihrer Indexseite ist nicht derselbe wie der Iframe, um die Registerkarten zu wechseln. Ich schlage vor, dieses Update ..

In der Index-Seite, eine neue Funktion switchframe(id) genannt erstellen und rufen Sie diese von Ihrem onclick

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

in iframe.html

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

Bitte teilen Sie uns die Ergebnis ..

Quelle

2016-12-19 00:29:34 Searching

Danke, das ist genau das, was ich brauchte! –

Hier in einem Beispiel, das Ihnen vielleicht helfen könnte. Wenn Sie auf ein Tag klicken, wird eine Funktion ausgeführt, die die attr-Quelle im iframe ändert, je nachdem, auf welche Registerkarte geklickt wird. Dies verwendet 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>

Quelle

2016-12-19 00:11:04

Das wird nicht helfen, ich muss DOM innerhalb des Iframe manipulieren, src wird immer gleich sein. –

Auf Bootstrap Registerkarte klicken Sie auf Inhalt innerhalb iframe

Antwort

Verwandte Themen